WebSockets: Comunicación en Tiempo Real para la Web

WebSockets: Cuando HTTP No Es Suficiente

HTTP es request-response: el cliente pregunta, el servidor responde. Pero para features en tiempo real — chat, notificaciones en vivo, edición colaborativa, dashboards en vivo — necesitas que el servidor envíe datos al cliente sin ser preguntado. Eso son WebSockets.

HTTP vs WebSocket

API del 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('Recibido:', 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', '¡Hola!');

Cuándo Usar Qué

Si el cliente solo necesita recibir (no enviar), considera SSE — más simple, funciona sobre HTTP y reconecta automáticamente.