WebSockets: Comunicação em Tempo Real para a Web

WebSockets: Quando HTTP Não É Suficiente

HTTP é request-response: o cliente pergunta, o servidor responde. Mas para features em tempo real — chat, notificações ao vivo, edição colaborativa, dashboards ao vivo — você precisa que o servidor envie dados para o cliente sem ser perguntado. Isso são WebSockets.

HTTP vs WebSocket

API do Browser

const ws = new WebSocket('wss://example.com/chat');

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', room: 'general' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Recebido:', data);
};

Servidor (Node.js)

import { WebSocketServer } from 'ws';
const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (data) => {
    const message = JSON.parse(data);
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(message));
      }
    });
  });
});

Socket.IO

// Servidor
import { Server } from 'socket.io';
const io = new Server(3000);

io.on('connection', (socket) => {
  socket.join('room:general');
  socket.on('chat:message', (msg) => {
    io.to('room:general').emit('chat:message', {
      user: socket.id, text: msg, timestamp: Date.now(),
    });
  });
});

// Cliente
import { io } from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.on('chat:message', (msg) => console.log(msg));
socket.emit('chat:message', 'Olá!');

Quando Usar o Quê

Se o cliente só precisa receber (não enviar), considere SSE — mais simples, funciona sobre HTTP e reconecta automaticamente.