Eventos principales en WebSockets (open, message, close, error)

La API WebSocket, tanto en navegadores como en servidores (con librerías como ws en Node.js), está basada en eventos. Cada conexión expone manejadores que se ejecutan automáticamente cuando ocurre una acción relevante.

Los cuatro eventos fundamentales son:

  • open: cuando la conexión se establece con éxito.
  • message: cuando llega un mensaje desde el otro extremo.
  • close: cuando la conexión se cierra.
  • error: cuando ocurre un problema en la conexión.

📌 1. Evento open

Cuándo se dispara: después de que el cliente completa el handshake con el servidor y el canal WebSocket queda listo.

Uso típico: enviar el primer mensaje, mostrar estado de conexión, habilitar botones de UI.

Cliente (JavaScript en navegador)

const ws = new WebSocket("ws://localhost:8080");

ws.onopen = () => {
  console.log("✅ Conexión abierta con el servidor");
  ws.send("Hola servidor, ya estoy conectado!");
};

📌 2. Evento message

Cuándo se dispara: cada vez que llega un frame de datos (texto o binario).

Uso típico: procesar mensajes JSON, mostrar mensajes en un chat, actualizar la UI.

Cliente

ws.onmessage = (event) => {
  console.log("📩 Mensaje recibido:", event.data);

  // Si el servidor envía JSON:
  try {
    const data = JSON.parse(event.data);
    console.log("Tipo:", data.type, "Payload:", data.payload);
  } catch {
    console.log("Texto plano:", event.data);
  }
};

Servidor (Node.js con ws)

const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", (ws) => {
  ws.on("message", (msg) => {
    console.log("📩 Cliente dice:", msg.toString());
    ws.send("Recibido: " + msg);
  });
});

📌 3. Evento close

Cuándo se dispara: cuando el cliente o el servidor cierra la conexión.

Uso típico: liberar recursos, mostrar mensajes de desconectado, intentar reconectar.

Cliente

ws.onclose = (event) => {
  console.log("👋 Conexión cerrada");
  console.log("Código de cierre:", event.code, "Razón:", event.reason);

  // Ejemplo de reconexión automática
  setTimeout(() => {
    console.log("Reintentando conexión...");
    connect(); // función que vuelve a crear un WebSocket
  }, 2000);
};

Ejemplos de códigos de cierre comunes

  • 1000: cierre normal.
  • 1001: usuario abandonó.
  • 1006: cierre anómalo (sin handshake de cierre).
  • 1011: error en el servidor.

📌 4. Evento error

Cuándo se dispara: si ocurre un error de red o de protocolo.

Importante: el evento error no cierra automáticamente la conexión, pero suele ir seguido de un close.

Cliente

ws.onerror = (err) => {
  console.error("❌ Error en WebSocket:", err);
};

Servidor

wss.on("connection", (ws) => {
  ws.on("error", (err) => {
    console.error("❌ Error en cliente:", err.message);
  });
});

📌 Resumen visual del flujo de eventos

Cliente (Browser)                    Servidor (Node.js)

onopen    ------------------->   conexión establecida
onmessage <-------------------   ws.send("Hola cliente")
ws.send("Hola servidor")  ---->  on("message", ...)
onclose   <-------------------   cierre de conexión
onerror   <-------------------   error de red/protocolo

📌 Ejemplo completo en cliente (HTML)

<!doctype html>
<html lang="es">
<body>
<script>
let ws = new WebSocket("ws://localhost:8080");

ws.onopen = () => {
  console.log("✅ Conexión abierta");
  ws.send("Hola servidor!");
};

ws.onmessage = (e) => {
  console.log("📩 Servidor dice:", e.data);
};

ws.onclose = (e) => {
  console.log("👋 Conexión cerrada (code:", e.code, "reason:", e.reason, ")");
};

ws.onerror = (err) => {
  console.error("❌ Error en WS:", err);
};
</script>
</body>
</html>

En resumen

  • open: confirmación de conexión — ideal para enviar un saludo inicial.
  • message: llegada de datos — procesar mensajes de chat, JSON, etc.
  • close: cierre de conexión — limpiar recursos o reconectar.
  • error: problemas de red/protocolo — loguear y manejar fallas.
Retornar