Como criar chats com WebSocket no JavaScript?

Se você deseja criar um sistema de chat em tempo real, o WebSocket é uma das melhores tecnologias para isso! Com ele, você pode estabelecer uma conexão bidirecional entre cliente e servidor, garantindo mensagens rápidas e eficientes. Confira os passos básicos para implementar:

1 - Crie um servidor WebSocket

Use o ws, uma biblioteca popular no Node.js:

import { WebSocketServer } from 'ws';

const server = new WebSocketServer({ port: 8080 });

server.on('connection', (socket) => {
  console.log('Usuário conectado!');

  socket.on('message', (message) => {
    console.log(`Mensagem recebida: ${message}`);
    // Enviar mensagem para todos os clientes conectados
    server.clients.forEach((client) => {
      if (client.readyState === client.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => console.log('Usuário desconectado!'));
});

2 - Configure o cliente WebSocket

No frontend, use a API WebSocket nativa:

const socket = new WebSocket('ws://localhost:8080');

// Conexão aberta
socket.addEventListener('open', () => {
  console.log('Conectado ao servidor!');
  socket.send('Olá, servidor!');
});

// Receber mensagens
socket.addEventListener('message', (event) => {
  console.log('Nova mensagem:', event.data);
});

// Enviar mensagem pelo chat
document.getElementById('sendButton').addEventListener('click', () => {
  const message = (document.getElementById('messageInput') as HTMLInputElement).value;
  socket.send(message);
});

3 - Adicione o HTML para o chat

Aqui está um exemplo simples de interface:

<div>
  <input type="text" id="messageInput" placeholder="Digite sua mensagem" />
  <button id="sendButton">Enviar</button>
</div>
<div id="messages"></div>

4 - Torne a interface dinâmica

Atualize o DOM sempre que uma mensagem for recebida:

socket.addEventListener('message', (event) => {
  const messagesDiv = document.getElementById('messages');
  const messageElement = document.createElement('p');
  messageElement.textContent = event.data;
  messagesDiv.appendChild(messageElement);
});

Dicas:

• Segurança: Certifique-se de validar as mensagens enviadas pelos usuários para evitar ataques como injections.

• Conexão SSL: Em produção, utilize wss:// para segurança.

• Escalabilidade: Para suportar muitos usuários, considere integrar com tecnologias como Redis para gerenciar mensagens.

Com apenas algumas linhas de código, você já pode criar um chat funcional! Agora é só personalizar e escalar sua aplicação.

🔗 Compartilhe este post com quem está aprendendo sobre WebSocket!