React: implementando arquitetura event-driven com Socket.io

Instalando o socket.io - Apresentação

Olá! Seja bem-vindo ao curso de Event Driven no React. Meu nome é Luiz Fernando, sou instrutor aqui na Alura.

Audiodescrição: Luiz Fernando é um homem pardo, com cabelo e barba pretos. Ele também possui um bigode e um cavanhaque. Está vestindo a camisa da Alura. Ao fundo há uma parede com iluminação gradiente do azul para o rosa.

Neste curso, vamos criar o aplicativo TriboChat utilizando o conceito de arquitetura Event Driven para que possamos trocar informações e mensagens no chat em tempo real, utilizando uma biblioteca chamada socket.io.

Estou utilizando dois navegadores diferentes lado a lado para simular duas pessoas diferentes acessando nosso chat.

Uma delas é o Luiz, com quem vou me logar. Tenho a conversa com a Márcia e com o João. Se eu entrar com a Márcia, terei a conversa com o Luiz e com o João, e consigo visualizar que a Márcia está online. Ao entrar na conversa e enviar um "olá" para a Márcia, recebo essa informação. Assim, conseguimos trocar essas mensagens. Se eu fizer logout, a Márcia aparece como deslogada para mim.

Vamos explorar todas essas funcionalidades neste curso, e você entenderá melhor como funciona o Event Driven no front-end utilizando essa biblioteca tão importante. Você aprenderá a utilizar Emitter, Consumer e Channel, tudo isso dentro da biblioteca do socket.io.

Pré-requisitos

Caso tenha interesse nesse assunto, os pré-requisitos são dominar React, pois não entraremos em detalhes sobre ele.

Utilizamos hooks e outras funcionalidades do React, mas nosso foco será o conteúdo que queremos abordar: Event Driven e socket.io.

Tenho certeza de que você vai gostar, pois o conteúdo está bem completo.

Instalando o socket.io - Instalando a biblioteca

Se você acompanhou tudo o que foi colocado na atividade "Preparando o Ambiente" provavelmente tem o repositório igual ao que teremos no vídeo.

Já estamos com o terminal aberto, vamos aumentar um pouco o zoom e já estamos na pasta onde o repositório está localizado. Caso você não esteja, basta utilizar o comando cd até chegar na pasta desejada.

Vamos entrar na pasta "event-driven", que é o nome do repositório onde o código necessário está. Em seguida, vamos executar code. para abrir o código no VS Code.

Após abrir o código, aumentamos o zoom para melhor visualização. Já temos uma ideia do problema a ser resolvido: o chat está funcional, mas não responde em tempo real. Precisamos encontrar uma solução para isso.

No repositório, já temos um back-end funcionando, implementado com a biblioteca socket.io, que permite utilizar o websocket para resolver alguns problemas, incluindo o que estamos enfrentando.

Vamos instalar essa biblioteca com o seguinte comando:

pnpm add socket.io-client

Conhecendo o Socket.io

Na documentação do socket.io, não entraremos em muitos detalhes, mas quero destacar a parte que fala sobre o manager.

Ele menciona o uso de "engine" e "manager". Basicamente, ele explica que utiliza um transporte como websocket ou HTTP long-polling. Vamos nos aprofundar no websocket, que é o que estamos utilizando.

O websocket é uma porta de transferência que pode ser utilizada entre o servidor (back-end) e o cliente (front-end), semelhante aos endpoints das APIs REST.

No entanto, o websocket é uma porta que permanece aberta até que decidamos fechá-la, seja pelo fechamento do navegador ou explicitamente.

Essa característica do websocket nos permitirá resolver o problema do chat, pois podemos manter uma porta sempre aberta. Sempre que uma nova mensagem é enviada ou recebida, podemos comunicar isso ao servidor através do websocket, em vez dos endpoints convencionais.

A comunicação será feita por meio da arquitetura event-driven, uma arquitetura baseada em eventos. Emitimos um evento para o socket.io, que o recebe e executa ações no servidor. O servidor também pode enviar eventos, permitindo que um usuário receba notificações sobre ações de outro usuário.

Configuração inicial

Voltamos ao VS Code para iniciar a configuração. Já instalamos o socket.io, mas agora precisamos entender seu funcionamento. Vamos acessar a seguinte pasta chat/src/config e criar uma nova pasta chamada "socket". Dentro dela, criamos um arquivo index.js.

No index.js, a primeira ação é importar o io de socket.io-client:

import { io } from 'socket.io-client';

Vamos criar uma constante chamada url, que será a URL do nosso servidor. No arquivo server/index.js, verificamos que a porta utilizada é a 8080. Voltamos ao index.js do socket e configuramos a URL:

const URL = 'http://localhost:8080';

Exportamos uma constante chamada socket, que será igual a io, uma função que recebe a URL:

import { io } from 'socket.io-client';

const URL = 'http://localhost:8080';

export const socket = io(URL);

Próximo passo

Essa é a configuração inicial do socket.io, e já temos a instância chamada socket. No próximo vídeo, entenderemos como realizar o connect e disconnect do socket.io e como isso será utilizado na nossa aplicação!

Instalando o socket.io - Conectando ao servidor

Agora que já temos a configuração do socket, vamos explorar como conectar, desconectar e emitir um evento de teste para verificar se tudo está funcionando corretamente.

Antes disso, precisamos iniciar nossa aplicação. Vamos abrir os dois terminais. Já estamos nas pastas corretas, mas, caso contrário, podemos clicar no ícone de mais no canto superior direito da aba para abrir os terminais desejados e navegar até as pastas necessárias.

Na primeira pasta, "chat", executamos o comando pnpm dev para iniciar essa parte.

No segundo terminal que temos aberto, já estamos na pasta "server", então também executamos pnpm dev para iniciar o back-end. Com ambos iniciados, atualizamos a página em nosso navegador, que está em localhost:5173, a porta utilizada pelo Vite.

Conectando e desconectando o socket

Voltando ao VS Code, abrimos o explorador de arquivos novamente. No arquivo chat/src/config/socket/index.js, já temos a configuração feita anteriormente. Copiamos o nome do socket e acessamos chat/src/hooks/userprovider.jsx. No provider, que está em um nível mais alto e não terá muitas renderizações desnecessárias, criamos um novo useEffect com uma arrow function. Não há dependências nesse useEffect, então usamos um colchete vazio.

Dentro do useEffect, importamos o socket da configuração e chamamos socket.connect().

useEffect(() => {
  socket.connect();
}, []);

Assim, na primeira renderização do provider, o socket já se conecta. O recomendado pelo socket.io é que tenhamos um retorno no useEffect, que é o componente willUnmount, para desconectar o socket quando não for mais necessário, usando socket.disconnect().

useEffect(() => {
  socket.connect();
  return () => {
    socket.disconnect();
  };
}, []);

Para testar se tudo está funcionando, após o connect e antes do return, usamos socket.on('connect', () => console.log('Conectado!')).

useEffect(() => {
  socket.connect();
    socket.on('connect', () => console.log('Conectado!'))
  return () => {
    socket.disconnect();
  };
}, []);

O on é uma função onde o primeiro parâmetro indica qual evento queremos escutar e o segundo parâmetro é a arrow function, o callback, do que queremos fazer depois que o evento for emitido.

No console do navegador, já podemos ver a mensagem "Conectado!". Se alterarmos o evento para 'nova mensagem' e atualizarmos a tela, nada será exibido, pois não há emissão de uma mensagem chamada "nova mensagem".

Para emitir essa mensagem, no arquivo server/socket/index.js, na linha 6, adicionamos io.emit('nova mensagem', socket.id), enviando o socket.id como parâmetro.

io.on('connection', (socket) => {
  const userController = UserController;
  io.emit('nova mensagem', socket.id);

  socket.on('disconnect', () => {
    io.emit('user disconnected');
    const id = null;
  });
});

No provider.jsx, no socket.on('nova mensagem', (id) => console.log('Nova mensagem:', id)), exibimos a mensagem e o ID do socket.

useEffect(() => {
  socket.connect();
    socket.on('nova mensagem', (id) => console.log('nova mensagem!!!, id'))
  return () => {
    socket.disconnect();
  };
}, []);

Para que isso funcione, precisamos reiniciar o servidor. Após atualizar a tela, a mensagem "Nova mensagem" e o ID do socket são exibidos no console do navegador. Esse ID é o identificador que o socket.io usa no servidor para saber qual cliente está conectado. Podemos ter vários sockets conectados ao mesmo servidor, permitindo a comunicação entre clientes.

Conclusão

Com isso, entendemos como funcionam os métodos .on, .connect, .disconnect e .emit no servidor, estabelecendo uma base sólida para resolver o problema do chat. Nos vemos no próximo vídeo.

Sobre o curso React: implementando arquitetura event-driven com Socket.io

O curso React: implementando arquitetura event-driven com Socket.io possui 103 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Instalando o socket.io
• Implementando comunicação
• Guardando mensagens corretamente
• Refinando o fluxo de eventos
• Deslogando o chat