Como fazer um CHAT EM TEMPO REAL utilizando WEBSOCKETS com REACT E NODE.JS

Neste artigo, vamos aprender a criar um chat em tempo real utilizando WebSockets em conjunto com React e Node.js.

Passo 1: Configurando o servidor Node.js

Para começar, vamos configurar um servidor Node.js para lidar com as conexões WebSocket. Para isso, vamos utilizar a biblioteca socket.io, que facilita a implementação de comunicação em tempo real.

    const server = require('http').createServer();
    const io = require('socket.io')(server);

    io.on('connection', (socket) => {
      console.log('Novo usuário conectado');
      socket.on('message', (data) => {
        io.emit('message', data);
      });
    });

    server.listen(3000, () => {
      console.log('Servidor WebSocket está rodando na porta 3000');
    });
  

Passo 2: Criando a interface do chat com React

Agora que temos o servidor WebSocket configurado, vamos criar a interface do chat utilizando React. Vamos usar a biblioteca socket.io-client para se conectar ao servidor WebSocket e enviar e receber mensagens em tempo real.

    import React, { useState, useEffect } from 'react';
    import io from 'socket.io-client';

    const socket = io('http://localhost:3000');

    const Chat = () => {
      const [messages, setMessages] = useState([]);
      const [input, setInput] = useState('');

      useEffect(() => {
        socket.on('message', (data) => {
          setMessages(messages => [...messages, data]);
        });
      }, []);

      const sendMessage = () => {
        socket.emit('message', input);
        setInput('');
      };

      return (
        

          

            {messages.map((message, index) => (
              
{message}
            ))}
          
           setInput(e.target.value)} />
          Enviar
        
      );
    };

    export default Chat;
  

Passo 3: Testando o chat em tempo real

Agora que o servidor Node.js e a interface do chat em React estão prontos, podemos testar a aplicação. Inicie o servidor Node.js e acesse a interface do chat em um navegador. Você verá que as mensagens enviadas por um usuário serão recebidas em tempo real por todos os usuários conectados.

Com isso, você aprendeu como criar um chat em tempo real utilizando WebSockets com React e Node.js. Essa é apenas uma introdução ao uso de WebSockets, e existem muitas outras funcionalidades e possibilidades a serem exploradas.