WebSockets

Definición

¿Alguna vez has usado un chat donde los mensajes aparecen instantáneamente sin que tengas que refrescar la página? ¿O un documento de Google donde ves las ediciones de otros en tiempo real? Eso es posible gracias a WebSockets. Es como la diferencia entre enviar mensajes de texto y tener una llamada telefónica - con HTTP normal, cada mensaje requiere una nueva “llamada,” pero con WebSockets, la línea permanece abierta.

HTTP tradicional funciona como pasar notas en clase - envías una nota, esperas una respuesta, envías otra nota. Esto funciona bien para muchas cosas, pero es terrible para aplicaciones en tiempo real. Si quieres saber si alguien te envió un mensaje, tendrías que preguntar constantemente “¿hay algo nuevo?” cada pocos segundos. WebSockets resuelve esto abriendo una conexión permanente donde el servidor puede enviarte datos en cualquier momento sin que tengas que preguntar.

La magia de WebSockets es que es bidireccional y persistente. Una vez establecida la conexión (que comienza como una petición HTTP y luego “se actualiza”), tanto el cliente como el servidor pueden enviar mensajes cuando quieran. Es perfecta para juegos online, chats, actualizaciones de bolsa, editores colaborativos - cualquier cosa donde necesites datos frescos al instante sin el costo de establecer nuevas conexiones constantemente.

Ejemplo

Aplicaciones de Chat (Slack, Discord): Cuando envías un mensaje en Slack, no quieres esperar a que todos refresquen para verlo. WebSockets mantiene conexiones abiertas con todos los usuarios. Tu mensaje va al servidor, y el servidor inmediatamente lo empuja a todos los participantes del canal. El chat se siente instantáneo porque lo es.

Edición Colaborativa (Google Docs): Cuando editas un documento de Google con compañeros, cada tecla que presionas se transmite por WebSocket a los demás editores. Ellos ven tu cursor moviéndose y tus palabras apareciendo en tiempo real. Sin WebSockets, tendrías que refrescar para ver cambios - destruyendo completamente la colaboración.

Marcadores Deportivos en Vivo: Las aplicaciones de deportes te muestran puntuaciones actualizadas al segundo. Cuando hay un gol, miles de usuarios conectados reciben la actualización instantáneamente a través de WebSockets. No hay retraso de “refresca para ver el marcador” - el servidor empuja la actualización a todos simultáneamente.

Plataformas de Trading: Las aplicaciones de bolsa muestran precios que cambian varias veces por segundo. WebSockets permiten que los precios se actualicen continuamente sin generar miles de peticiones HTTP. Los traders ven precios en tiempo real porque hay una conexión permanente transmitiendo cada cambio de precio.

Analogía

La Llamada Telefónica vs. Mensajes de Texto: HTTP es como enviar mensajes de texto - escribes algo, envías, esperas respuesta, repites. WebSockets es como una llamada telefónica - una vez conectados, ambos pueden hablar cuando quieran sin el costo de “marcar” de nuevo cada vez. La línea permanece abierta hasta que alguien cuelga.

La Puerta de Oficina Abierta: HTTP es como ir a la oficina de tu jefe, tocar la puerta, entrar, hacer tu pregunta, salir, y repetir el proceso para cada pregunta. WebSockets es como tener la puerta abierta - puedes entrar cuando necesites algo, y tu jefe puede llamarte cuando tenga algo que decirte, sin la ceremonia de tocar cada vez.

Los Walkie-Talkies: HTTP es como el correo - escribes una carta, la envías, esperas respuesta días después. WebSockets es como walkie-talkies - presionas el botón y hablas instantáneamente, y el otro puede responder inmediatamente. La comunicación es inmediata y bidireccional.

El Concierto en Vivo vs. el Álbum: Escuchar un álbum (HTTP) es obtener contenido que fue grabado antes - siempre el mismo, a tu ritmo. Un concierto en vivo (WebSockets) es escuchar lo que el artista está tocando AHORA MISMO - cada nota te llega en el momento que se toca, no puedes pausar o rebobinar, pero la experiencia es inmediata y compartida con todos.

Diagrama

sequenceDiagram
    participant C as Cliente
    participant S as Servidor

    Note over C,S: Handshake de Actualización HTTP
    C->>S: GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
    S->>C: HTTP/1.1 101 Switching Protocols
Upgrade: websocket

    Note over C,S: Conexión Bidireccional Persistente

    rect rgb(200, 230, 200)
        C->>S: Mensaje: "Hola"
        S->>C: Mensaje: "¡Hola!"
        S->>C: Mensaje: "Nueva notificación"
        C->>S: Mensaje: "Recibido"
        S->>C: Mensaje: "Usuario conectado"
    end

    Note over C,S: Cualquier lado puede cerrar
    C->>S: Frame de Cierre
    S->>C: Frame de Cierre (ACK)

Code Example

// WebSocket del lado del cliente
const ws = new WebSocket('wss://api.example.com/stream');

ws.onopen = () => {
  console.log('Conectado');
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Recibido:', data);
};

ws.onerror = (error) => console.error('Error de WebSocket:', error);
ws.onclose = () => console.log('Conexión cerrada');

// Servidor (Node.js con librería ws)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // Transmitir a todos los clientes
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

Notas de Seguridad

Standards & RFCs