Construyendo Aplicaciones en Tiempo Real con WebSockets

// server.ts
import { WebSocketServer, WebSocket } from 'ws';
import { createServer } from 'http';
import { v4 as uuid } from 'uuid';
 
interface Client {
  id: string;
  socket: WebSocket;
  userId?: string;
  rooms: Set<string>;
  lastPing: number;
}
 
class WebSocketManager {
  private wss: WebSocketServer;
  private clients: Map<string, Client> = new Map();
  private rooms: Map<string, Set<string>> = new Map();
 
  constructor(server: ReturnType<typeof createServer>) {
    this.wss = new WebSocketServer({ server });
    this.setupConnectionHandler();
    this.startHeartbeat();
  }
 
  private setupConnectionHandler() {
    this.wss.on('connection', (socket, request) => {
      const clientId = uuid();
      const client: Client = {
        id: clientId,
        socket,
        rooms: new Set(),
        lastPing: Date.now(),
      };
 
      this.clients.set(clientId, client);
      console.log(`Cliente conectado: ${clientId}`);
 
      // Enviar reconocimiento de conexión
      this.send(socket, {
        type: 'connected',
        clientId,
      });
 
      // Manejar mensajes entrantes
      socket.on('message', (data) => {
        try {
          const message = JSON.parse(data.toString());
          this.handleMessage(client, message);
        } catch (error) {
          console.error('Formato de mensaje inválido:', error);
        }
      });
 
      // Manejar desconexión
      socket.on('close', () => {
        this.handleDisconnect(client);
      });
 
      // Responder a pings
      socket.on('pong', () => {
        client.lastPing = Date.now();
      });
    });
  }
 
  private startHeartbeat() {
    setInterval(() => {
      const now = Date.now();
      const timeout = 30000; // 30 segundos
 
      for (const [clientId, client] of this.clients) {
        if (now - client.lastPing > timeout) {
          // La conexión está muerta
          console.log(`Cliente ${clientId} expiró`);
          client.socket.terminate();
          this.handleDisconnect(client);
        } else if (client.socket.readyState === WebSocket.OPEN) {
          // Enviar ping
          client.socket.ping();
        }
      }
    }, 10000); // Verificar cada 10 segundos
  }
}

// useWebSocket.ts
import { useEffect, useRef, useCallback, useState } from 'react';
 
interface UseWebSocketOptions {
  url: string;
  onMessage?: (message: any) => void;
  onOpen?: () => void;
  reconnect?: boolean;
  reconnectAttempts?: number;
  reconnectInterval?: number;
}
 
export function useWebSocket({
  url,
  onMessage,
  onOpen,
  reconnect = true,
  reconnectAttempts = 5,
  reconnectInterval = 3000,
}: UseWebSocketOptions) {
  const [isConnected, setIsConnected] = useState(false);
  const wsRef = useRef<WebSocket | null>(null);
  const reconnectCountRef = useRef(0);
 
  const connect = useCallback(() => {
    const ws = new WebSocket(url);
 
    ws.onopen = () => {
      setIsConnected(true);
      reconnectCountRef.current = 0;
      onOpen?.();
 
      // Iniciar heartbeat del lado del cliente
      const heartbeat = setInterval(() => {
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(JSON.stringify({ type: 'ping' }));
        }
      }, 25000);
 
      ws.addEventListener('close', () => clearInterval(heartbeat));
    };
 
    ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      onMessage?.(message);
    };
 
    ws.onclose = () => {
      setIsConnected(false);
 
      // Intentar reconexión
      if (reconnect && reconnectCountRef.current < reconnectAttempts) {
        reconnectCountRef.current++;
        const delay = reconnectInterval * Math.pow(2, reconnectCountRef.current - 1);
        console.log(`Reconectando en ${delay}ms (intento ${reconnectCountRef.current})`);
        setTimeout(connect, delay);
      }
    };
 
    wsRef.current = ws;
  }, [url, onMessage, onOpen, reconnect, reconnectAttempts, reconnectInterval]);
 
  const send = useCallback((message: any) => {
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      wsRef.current.send(JSON.stringify(message));
    }
  }, []);
 
  useEffect(() => {
    connect();
    return () => wsRef.current?.close();
  }, [connect]);
 
  return { send, isConnected };
}

// Escalando WebSockets a través de múltiples servidores
import Redis from 'ioredis';
 
class ScaledWebSocketManager extends WebSocketManager {
  private publisher: Redis;
  private subscriber: Redis;
 
  constructor(server: ReturnType<typeof createServer>) {
    super(server);
 
    this.publisher = new Redis(process.env.REDIS_URL);
    this.subscriber = new Redis(process.env.REDIS_URL);
 
    this.setupPubSub();
  }
 
  private setupPubSub() {
    // Suscribirse a todos los canales de sala
    this.subscriber.psubscribe('room:*');
 
    this.subscriber.on('pmessage', (pattern, channel, message) => {
      const roomId = channel.replace('room:', '');
      const parsed = JSON.parse(message);
 
      // Solo transmitir si el mensaje no se originó en este servidor
      if (parsed.serverId !== this.serverId) {
        this.localBroadcastToRoom(roomId, parsed.message);
      }
    });
  }
 
  // Sobrescribir para publicar a Redis en lugar de broadcast solo local
  protected broadcastToRoom(roomId: string, message: any, excludeClientId?: string) {
    // Publicar a Redis para otros servidores
    this.publisher.publish(`room:${roomId}`, JSON.stringify({
      serverId: this.serverId,
      message,
      excludeClientId,
    }));
 
    // También transmitir localmente
    this.localBroadcastToRoom(roomId, message, excludeClientId);
  }
}

// Servidor WebSocket seguro con autenticación JWT
const wss = new WebSocketServer({
  server,
  verifyClient: async (info, callback) => {
    try {
      const url = new URL(info.req.url!, `http://${info.req.headers.host}`);
      const token = url.searchParams.get('token');
 
      if (!token) {
        callback(false, 401, 'No autorizado');
        return;
      }
 
      const user = await verifyJWT(token);
      (info.req as any).user = user;
      callback(true);
    } catch (error) {
      callback(false, 401, 'Token inválido');
    }
  },
});