Como criar uma conexão realtime com react e server em node express usando o socket.io

Como criar uma conexão realtime com react e server em node express usando o socket.io

Antes de tudo, você precisa saber que existe um protocolo específico de comunicação para conexões em tempo real. E como é de se esperar existem diversas bibliotecas no npm que nos permitem fazer isso no NodeJS. Nesse artigo você verá como utilizar uma dessas bibliotecas para integrar com react e com o NodeJS com express para ter realtime na sua aplicação frontend React.

Configurando o backend

O primeiro passo que precisamos fazer é configurar o seu backend. No seu backend, você precisa instalar a biblioteca do socket.io dentro da sua aplicação, ele consegue se integrar com praticamente qualquer tipo de backend.

1. Faça a instalação do socket.io:

 yarn add socket.io

Depois de instalado a biblioteca no seu projeto, o próximo passo será inicializar o servidor do socket.io junto com o seu servidor express ou outro. Para fazer isso siga os seguintes passos:

1. Importe o servidor de dentro da biblioteca:

// src/Server.ts

import { Server } from 'socket.io';

2. Agora, você precisa integrar o server do socket.io junto ao seu server, lembre-se de que no cors, você pode utilizar a mesma configuração que é usada no cors do seu servidor express:

// src/Server.ts

const serverExpress = express();

const server = http.createServer(serverExpress);

const realtime = new Server(server, { cors: { origin: '*' } });

3. O último passo é exportar o servidor para ser acessível de outros lugares:

// src/Server.ts

export { server, realtime };

Agora que o servidor do socket.io está inicializado, você consegue emitir eventos para as conexões ativas. Para emitir os eventos, nesse exemplo vou configurar para que o evento seja emitido diretamente da controller de criação do registro, você pode utilizar onde preferir, siga o passo a passo abaixo:

1. Na controller, nesse exemplo, depois de criar o registro no banco de dados vamos emitir um evento:

 // src/controllers/contas-bancaria/create.ts

 realtime.emit('contas-bancaria:new');

Pronto, tudo configurado no seu backend. O próximo passo é configurar o frontend.

Configurando o frontend

Para configurar o frontend corretamente, é preciso instalar uma biblioteca de cliente do socket.io. Nesse exemplo vamos usar a biblioteca “socket.io-client”. Siga o passa à passo abaixo para instalar:

1. Instale a biblioteca no seu projeto react ou next.js:

npm install socket.io-client

Agora que a biblioteca está instalada, vamos configurar nas suas telas para que o evento emitido pelo backend seja ouvido aqui no frontend. Siga os seguintes passos:

1. Faça o importe da biblioteca na tela que deseja utilizar:

// pages/Tela1.tsx

import io from 'socket.io-client';

2. Depois de importar, vamos inicializar a biblioteca com a URL do nosso backend:

// pages/Tela1.tsx

const realtime = io(Environment.URL_BASE);

3. Com a biblioteca inicializada, basta dentro do componente da tela, dentro de um useEffect, escutar os eventos:

// use effect, deve ser utilizado tanto no react puro quanto no next.js para não ter problemas de performance

useEffect(() => {

 // Adiciona o listener para o evento emitido pelo server

 realtime.on('contas-bancaria:new', () => {

   // Reexecuta as consultas no backend

   ContasBancariaService.getAll();

 });

 // Quando o componente é desmontado da tela, os evento não são mais ouvidos

 return () => realtime.off('contas-bancaria:new');

}, []);

Pronto, agora sempre que você inserir um registro novo no backend e o evento for emitido, o seu frontend saberá que houve uma alteração e fará uma nova consulta para buscar as atualizações.

Caso você deseja utilizar o próprio evento do web socket para receber dados, recomendo adicionar uma camada de autenticação na hora de realizar a conexão com o banco de dados, para assim evitar que conexões mal intencionadas sejam realizadas no servidor.