Presencia y salas (rooms)

Un chat completo necesita dos cosas sociales más: saber QUIÉN está conectado (la PRESENCIA) y separar las conversaciones en canales (las SALAS o rooms). La presencia te da el "3 en línea" y el "Luis está escribiendo…"; las salas hacen que un mensaje de "#general" no llegue a quienes están en "#diseño". Hoy dominas ambas —las piezas que faltan para un chat colaborativo real, el proyecto final del curso—.

La lista de asistentes y los salones

Presencia: quién está y quién escribe

function usePresencia(socket: Socket) {
const [enLinea, setEnLinea] = useState<string[]>([]);
const [escribiendo, setEscribiendo] = useState<string | null>(null);

useEffect(() => {
  const alEntrar = (usuarios: string[]) => setEnLinea(usuarios);
  const alEscribir = (nombre: string) => {
    setEscribiendo(nombre);
    // el indicador se limpia solo tras 2s sin nuevas señales
    setTimeout(() => setEscribiendo(null), 2000);
  };
  socket.on("presencia", alEntrar);       // lista completa de conectados
  socket.on("escribiendo", alEscribir);   // alguien está escribiendo
  return () => {
    socket.off("presencia", alEntrar);
    socket.off("escribiendo", alEscribir);
  };
}, [socket]);

// avisar que YO escribo (con throttle para no spamear)
const avisarEscribo = throttle(() => socket.emit("escribiendo"), 1000);

return { enLinea, escribiendo, avisarEscribo };
}

Salas (rooms): separar conversaciones

Mini-reto

Diseña la presencia y las salas de un chat (en papel): 1) lista los eventos de presencia (quién emite "usuario_entra", "usuario_sale", "escribiendo" y quién los escucha); 2) describe el flujo de unirse a la sala "#general" (qué emite el cliente, qué hace el servidor con join, cómo se emite un mensaje solo a esa sala); 3) explica cómo mostrarías "Luis está escribiendo…" y cómo se limpia el indicador. Nota que todo son eventos que actualizan estado en React.

Qué sigue

Tienes todas las piezas del tiempo real: conexión, chat, envío optimista, presencia y salas. El reto del módulo las junta en un chat funcional en vivo (con socket simulado): mensajes, envío optimista, y presencia. Es el ensayo general del PROYECTO FINAL del curso —el chat colaborativo con backend real—.