Socket.io: WebSockets listos para producción

Socket.io es la librería estándar para tiempo real en el mundo Node/React. Toma el WebSocket nativo —con todas sus limitaciones— y le agrega lo que falta para producción: reconexión automática, fallback cuando la red bloquea WebSockets, EVENTOS CON NOMBRE (en vez de un canal crudo), salas para agrupar usuarios, y confirmaciones. Hoy dominas su modelo mental: emitir y escuchar eventos nombrados, en cliente y servidor.

El operador de la centralita

Conectar y los eventos con nombre

En el cliente, io(url) abre la conexión. Lo central de Socket.io: en vez de un onmessage genérico, emites y escuchas eventos CON NOMBRE, como un EventEmitter (SC-02, el pub/sub):

import { io } from "socket.io-client";

// conectar (io se encarga de reconexión, fallback, etc.)
const socket = io("https://servidor.com");

// eventos del ciclo de vida
socket.on("connect", () => console.log("Conectado, id:", socket.id));
socket.on("disconnect", () => console.log("Desconectado"));

// ESCUCHAR eventos con nombre (lo que el servidor emite)
socket.on("mensaje", (msg: { usuario: string; texto: string }) => {
console.log(`${msg.usuario}: ${msg.texto}`);
});
socket.on("usuario_escribiendo", (nombre: string) => {
mostrarIndicador(nombre);
});

// EMITIR eventos con nombre (lo que el cliente manda)
function enviar(texto: string) {
socket.emit("mensaje", { usuario: "Sara", texto });
// ¡sin JSON.stringify! Socket.io serializa por ti
}

Fíjate en las mejoras sobre el nativo: io(url) maneja la reconexión y el fallback solo; los mensajes son EVENTOS NOMBRADOS (socket.on("mensaje"), socket.on("usuario_escribiendo")) en vez de un onmessage crudo con un switch sobre tipo; y Socket.io SERIALIZA los datos por ti (envías objetos directo, sin JSON.stringify). El modelo es el pub/sub que ya conoces del SC-02: on para suscribirte a un evento, emit para publicarlo.

La simetría cliente/servidor

Una nota sobre este módulo

Mini-reto

Diseña el vocabulario de eventos de un chat con Socket.io (en papel): 1) lista los eventos que EMITE el cliente ("mensaje", "escribiendo") y los que ESCUCHA ("mensaje", "usuario_entra", "usuario_sale"); 2) para cada uno, di qué datos lleva; 3) describe qué hace el servidor al recibir un "mensaje" del cliente (pista: io.emit("mensaje", ...) para repartirlo a todos). Nota cómo cliente y servidor comparten los nombres de eventos.

Qué sigue

Ya tienes el modelo de Socket.io. Ahora, lo específico de React: una conexión es un recurso vivo que debe abrirse y CERRARSE bien —un useEffect con su cleanup— y conviene empaquetarla en un custom hook. La próxima lección integra el socket en React con un useSocket propio, corriendo en vivo con el socket simulado.