Dados em tempo real em um front-end do React JavaScript com Change Streams
Joel Lord6 min read • Published Oct 04, 2022 • Updated Sep 09, 2024
Avalie esse Tutorial
Atualmente, em muitos aplicativos, você deseja que os dados sejam exibidos em tempo real. Seja um sensor IoT relatando um valor, um valor de ação que você deseja rastrear ou um aplicativo de bate-papo, você desejará que os dados atualizem automaticamente sua interface do usuário. Isso é possível usando MongoDB Change Streams com o Realm Web SDK.
Neste tutorial, você aprenderá a usar o Realm Web SDK para exibir as alterações em uma coleção à medida que elas ocorrem.
To follow this tutorial, you will need an Atlas cluster. The free tier will be more than enough for the needs of this tutorial. If you don't already have one, you can find the instructions on creating a cluster in the documentation.
Quando você tiver um cluster, crie um novo banco de dados chamado
data, com uma coleção changestream.Você também precisará de um aplicativo do Application Services. As instruções para criar uma nova aplicação também podem ser encontradas na documentação. Siga as instruções para criar um novo aplicativo sem modelo.
Esta aplicação exibirá qualquer operação que seja executada em uma coleção específica. Para fazer isso, precisaremos configurar regras sobre quem tem acesso aos dados (todos) e como os usuários se autenticarão (anonimamente).
Você precisará do ID do aplicativo quando começar a criá-lo. Ao abrir o aplicativo pela primeira vez (ou ao clicar no item da barra de navegação com o nome do seu aplicativo), você verá a página inicial com as informações sobre esse aplicativo. Logo na parte superior, você notará um campo chamado "App ID". Este é o ID do seu aplicativo.
Você pode copiá-lo e colá-lo em algum lugar ou apenas voltar a essa tela mais tarde quando precisar dele.No menu de navegação esquerdo do Atlas App Services, procure o item "Rules". Isso listará todos os seus bancos de dados e coleções no cluster associado a esse aplicativo. Selecione o banco de dados
data e a coleção changestream. Será solicitado que você crie uma nova função para essa coleção.
Use a predefinição
readAlle, em seguida, clique no botão "Add preset role". Isso criará uma nova função que terá acesso completo de leitura aos dados dessa coleção. Se você quiser criar uma função que tenha acesso apenas aos dados de propriedade do usuário, isso poderá ser feito com uma função personalizada aqui.Para este aplicativo, não exigiremos autenticação, o que significa que qualquer visitante deste site terá acesso a todos os dados. No nosso caso, é isso que queremos, mas em um aplicativo de produção, talvez você queira configurar um provedor de autenticação real.
Na barra de navegação à esquerda, clique no item "Autenticação". Na tabela exibida, procure a linha "Permitir que os usuários façam login anonimamente".
Clique no botão "Editar". Na próxima tela, alterne o botão "Provedor habilitado" para ativá-lo. Depois de clicar no botão Salvar, volte para a página dos provedores de autenticação e verifique se ela está ativada.
Por enquanto, é tudo o que você precisa na interface do usuário do Atlas App Services. Procure a barra azul na parte superior da tela.
Clique no botão "Revisar rascunho e implantar" e aceite as alterações.
Seu aplicativo agora está pronto para ser usado.
Começaremos com um aplicativo React em branco gerado com a ferramenta
create-react-app para este aplicativo.Em seu terminal, execute o seguinte comando.
Em seguida, instale a biblioteca necessária para usar o Realm Web SDK e inicie o aplicativo.
Isso abrirá uma janela do navegador com o aplicativo em execução. Com seu editor de código favorito, abra o código-fonte desse aplicativo e procure o arquivo App.js.
Você substituirá todo o conteúdo deste arquivo para que possa prosseguir e excluir tudo lá.
Agora, comece com esse código padrão para seu arquivo App.js.
No comentário Create the Application, insira o seguinte.
Isso instanciará seu aplicativo Atlas. Não se esqueça de alterar o ID para o identificador do seu aplicativo.
Em seguida, precisaremos de duas variáveis de estado. O primeiro —
user— conterá o objeto de usuário criado pelo Realm SDK depois de autenticado. O segundo —events— conterá qualquer novo evento do banco de dados. Esses eventos serão operações (criar, atualizar ou excluir) realizadas no banco de dados, juntamente com o _id do documento e o documento completo.Adicione o seguinte código após o comentário Set state variables (Definir variáveis de estado ).
A seguir é a função
useEffect. Aqui, você criará uma função chamada login que autenticará anonimamente no aplicativo. Em seguida, ele atualizará o objeto de usuário no estado.Finalmente, altere o código JSX para renderizar uma tabela com os eventos.
Isso é tudo que você precisa para sua aplicação. Se você olhar para o navegador, verá o aplicativo em execução.
Na interface do usuário do Atlas, crie, edite ou exclua itens da coleção do changestream. Ao realizar essas operações, você verá seu novo aplicativo da web exibindo cada uma dessas operações em tempo real conforme elas acontecem.
Observação: ao executar esse aplicativo, você pode notar que alguns dos eventos são duplicados. Isso se deve à ferramenta React.StrictMode, que faz uma segunda passagem em seu código para notificá-lo de qualquer erro. Isso só acontece em produção e não ocorrerá se você executar
npm run build.O mesmo aplicativo pode ser reescrito em JavaScript simples com menos de 50 linhas. As principais diferenças com o aplicativo React é que o
realm-web é carregado por meio de uma tag de script e que o código para criar a tabela não usa JSX.Os change streams são uma funcionalidade muito poderosa no MongoDB. Eles permitem que você crie aplicativos que exibem e reagem às informações em tempo real sem precisar de um back-end.
Se você quiser um desafio adicional, que tal criar um aplicativo de bate-papo usando Change Streams? Adicione um formulário que usará um endpoint Atlas HTTPS para adicionar entradas ao banco de dados e, em seguida, liste as mensagens de bate-papo ouvindo novas alterações na coleção.