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

React MongoDB Fluxos de alterações JavaScript

Avalie esse Tutorial

Alguns recursos mencionados abaixo serão descontinuados em 30, 2025 de setembro. Saiba mais.

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.

Pré-requisitos

Para seguir este tutorial, você precisará de um cluster do Atlas. A camada grátis será mais que suficiente para as necessidades deste tutorial. Se ainda não tiver um, você pode encontrar instruções sobre como criar um cluster na documentação.

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.

Configurando seu aplicativo Atlas App Services

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).

Anote o ID do seu aplicativo

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.

Atualize as regras

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çãoreadAlle, 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.

Configurar autenticação

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.

Implante suas alterações

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.

Crie o aplicativo React

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.

1 npx create-react-app realm-web-changestreams

Em seguida, instale a biblioteca necessária para usar o Realm Web SDK e inicie o aplicativo.

1 cd realm-web-changestreams
2 npm install realm-web
3 npm start

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.

1 import  React, {useState, useEffect} from  "react"
2 import  *  as  Realm  from  "realm-web";
3 
4 // Create the Application
5 
6 // Define the App component
7 
8 const  App = () => {
9  // Set state variables
10 
11  // This useEffect hook will run only once when the page is loaded
12 
13  useEffect(() => {
14 
15  }, []);
16 
17  // Return the JSX that will generate HTML for the page
18 
19  return (
20    <div  className="App">
21 
22    </div>
23  );
24 };
25 
26 export  default  App;

No comentário Create the Application, insira o seguinte.

1 // Create the Application
2 
3 const  app = new  Realm.App({ id:  "<YOUR_APP_ID>"});

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 ).

1  // Set state variables
2  const [user, setUser] = useState();
3  const [events, setEvents] = useState([]);

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.

1  // This useEffect hook will run only once when the page is loaded
2 
3  useEffect(() => {
4    const  login = async () => {
5      // Authenticate anonymously
6      const  user = await  app.logIn(Realm.Credentials.anonymous());
7      setUser(user);
8 
9      // Connect to the database
10      const  mongodb = app.currentUser.mongoClient("mongodb-atlas");
11      const  collection = mongodb.db("data").collection("changestream");
12 
13      // Everytime a change happens in the stream, add it to the list of events
14      for  await (const  change  of  collection.watch()) {
15        setEvents(events  => [...events, change]);
16      }
17    }
18    login();
19  }, []);

Finalmente, altere o código JSX para renderizar uma tabela com os eventos.

1 // Return the JSX that will generate HTML for the page
2  return (
3    <div  className="App">
4        {!!user &&
5        <div  className="App-header">
6          <h1>Connected as user ${user.id}</h1>
7          <div>
8            <p>Latest events:</p>
9            <table>
10              <thead>
11              <tr><td>Operation</td><td>Document Key</td><td>Full Document</td></tr>
12              </thead>
13              <tbody>
14            {events.map((e, i) => (
15              <tr  key={i}><td>{e.operationType}</td><td>{e.documentKey._id.toString()}</td><td>{JSON.stringify(e.fullDocument)}</td></tr>
16            ))}
17            </tbody>
18            </table>
19          </div>
20        </div>
21        }
22    </div>
23  );

Isso é tudo que você precisa para sua aplicação. Se você olhar para o navegador, verá o aplicativo em execução.

Testando o aplicativo

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.

E quanto ao JavaScript básico?

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.

1 <html>
2  <body>
3    <h1>Connected as user $<span  id="userId"></span></h1>
4    <div>
5      <p>Latest events:</p>
6      <table>
7        <thead>
8          <tr><td>Operation</td><td>Document Key</td><td>Full Document</td></tr>
9        </thead>
10        <tbody  id="tableBody"></tbody>
11      </table>
12    </div>
13  </body>
14 
15  <!-- Import the Realm Web SDK -->
16  <script  src="https://unpkg.com/realm-web/dist/bundle.iife.js"></script>
17 
18  <script>
19    const  main = async () => {
20      //Create the application
21      const  app = new  Realm.App({ id:  "application-1-abcde" });
22      
23      // Authenticate anonymously
24      const  user = await  app.logIn(Realm.Credentials.anonymous());
25      document.querySelector("#userId").textContent = user.id;
26      
27      // Connect to the database
28      const  mongodb = app.currentUser.mongoClient("mongodb-atlas");
29      const  collection = mongodb.db("data").collection("changestream");
30 
31      // Everytime a change happens in the stream, add it to the list of events
32      for  await (const  change  of  collection.watch()) {
33        let  operationCell = document.createElement("td");
34        operationCell.textContent = change.operationType;
35        let  keyCell = document.createElement("td");
36        keyCell.textContent = change.documentKey._id.toString();
37        let  fullDocumentCell = document.createElement("td");
38        fullDocumentCell.textContent = JSON.stringify(change.fullDocument);
39        let  eventRow = document.createElement("tr");
40        eventRow.appendChild(operationCell);
41        eventRow.appendChild(keyCell);
42        eventRow.appendChild(fullDocumentCell);
43        let  tableBody = document.querySelector("#tableBody");
44        tableBody.appendChild(eventRow);
45      }
46    }
47    main();
48  </script>
49 </html>

Resumo

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.

Avalie esse Tutorial

Relacionado

Tutorial

Integrar o Azure Key Vault com a criptografia em nível de campo no lado do cliente do MongoDB

May 24, 2022 | 9 min read

Artigo

As 4 principais razões pelas quais você deve usar o MongoDB

Sep 23, 2022 | 9 min read

Tutorial

Spring Data Unlocked: Começando com Java e MongoDB

Nov 11, 2024 | 5 min read

Artigo

Gerando comandos de shell MQL usando OpenAI e o novo shell mongosh

Jul 11, 2023 | 7 min read

Sumário

Pré-requisitos
Configurando seu aplicativo Atlas App Services
Crie o aplicativo React
Testando o aplicativo
E quanto ao JavaScript básico?
Resumo

1	import React, {useState, useEffect} from "react"
2	import * as Realm from "realm-web";
3
4	// Create the Application
5
6	// Define the App component
7
8	const App = () => {
9	// Set state variables
10
11	// This useEffect hook will run only once when the page is loaded
12
13	useEffect(() => {
14
15	}, []);
16
17	// Return the JSX that will generate HTML for the page
18
19	return (
20	<div className="App">
21
22	</div>
23	);
24	};
25
26	export default App;

1	// Create the Application
2
3	const app = new Realm.App({ id: "<YOUR_APP_ID>"});

1	// Set state variables
2	const [user, setUser] = useState();
3	const [events, setEvents] = useState([]);

1	// This useEffect hook will run only once when the page is loaded
2
3	useEffect(() => {
4	const login = async () => {
5	// Authenticate anonymously
6	const user = await app.logIn(Realm.Credentials.anonymous());
7	setUser(user);
8
9	// Connect to the database
10	const mongodb = app.currentUser.mongoClient("mongodb-atlas");
11	const collection = mongodb.db("data").collection("changestream");
12
13	// Everytime a change happens in the stream, add it to the list of events
14	for await (const change of collection.watch()) {
15	setEvents(events => [...events, change]);
16	}
17	}
18	login();
19	}, []);

1	<html>
2	<body>
3	<h1>Connected as user $<span id="userId"></span></h1>
4	<div>
5	<p>Latest events:</p>
6	<table>
7	<thead>
8	<tr><td>Operation</td><td>Document Key</td><td>Full Document</td></tr>
9	</thead>
10	<tbody id="tableBody"></tbody>
11	</table>
12	</div>
13	</body>
14
15	<!-- Import the Realm Web SDK -->
16	<script src="https://unpkg.com/realm-web/dist/bundle.iife.js"></script>
17
18	<script>
19	const main = async () => {
20	//Create the application
21	const app = new Realm.App({ id: "application-1-abcde" });
22
23	// Authenticate anonymously
24	const user = await app.logIn(Realm.Credentials.anonymous());
25	document.querySelector("#userId").textContent = user.id;
26
27	// Connect to the database
28	const mongodb = app.currentUser.mongoClient("mongodb-atlas");
29	const collection = mongodb.db("data").collection("changestream");
30
31	// Everytime a change happens in the stream, add it to the list of events
32	for await (const change of collection.watch()) {
33	let operationCell = document.createElement("td");
34	operationCell.textContent = change.operationType;
35	let keyCell = document.createElement("td");
36	keyCell.textContent = change.documentKey._id.toString();
37	let fullDocumentCell = document.createElement("td");
38	fullDocumentCell.textContent = JSON.stringify(change.fullDocument);
39	let eventRow = document.createElement("tr");
40	eventRow.appendChild(operationCell);
41	eventRow.appendChild(keyCell);
42	eventRow.appendChild(fullDocumentCell);
43	let tableBody = document.querySelector("#tableBody");
44	tableBody.appendChild(eventRow);
45	}
46	}
47	main();
48	</script>
49	</html>