Arquitectura cliente-servidor en WebSockets

Visión general

La arquitectura de WebSockets sigue el modelo cliente‑servidor, con diferencias clave respecto al modelo tradicional de HTTP.

En lugar de peticiones puntuales, WebSockets establece un canal persistente donde cliente y servidor pueden enviar y recibir mensajes en cualquier momento.

Componentes principales

Cliente

  • Generalmente un navegador o una app móvil.
  • Usa la API WebSocket (en JavaScript u otras librerías) para conectarse al servidor.
  • Escucha mensajes entrantes y envía datos cuando lo necesite.

Servidor WebSocket

  • Servicio que acepta conexiones WebSocket.
  • Puede implementarse en Node.js, Python, Java, Go, etc.
  • Gestiona múltiples clientes simultáneamente.
  • Responsabilidades principales:
    • Recibir mensajes de los clientes.
    • Procesarlos.
    • Responder o retransmitirlos (broadcast).

Conexión persistente

  • Tras el handshake inicial (upgrade de HTTP a WebSocket), la conexión queda abierta hasta que cliente o servidor la cierren.
  • La comunicación se hace mediante frames (mensajes ligeros de texto o binarios).

Flujo de comunicación cliente‑servidor

Conexión inicial (handshake)

  • El cliente envía una petición HTTP especial con el encabezado Upgrade: websocket.
  • El servidor responde confirmando la actualización de protocolo.

Conexión establecida

  • Desde aquí, la conexión ya no es HTTP sino WebSocket.
  • Se habilita comunicación bidireccional.

Mensajería activa

  • El cliente puede enviar mensajes en cualquier momento.
  • El servidor también puede iniciar mensajes sin esperar peticiones.

Cierre de conexión

  • Puede ser controlado (mensaje de cierre) o inesperado (error/desconexión).

Diagrama de arquitectura básica

          +----------------+
          |     Cliente    |
          |  (Navegador)   |
          +-------+--------+
                  |
          Handshake HTTP Upgrade
                  |
          +-------v--------+
          |    Servidor    |
          |    WebSocket   |
          +----------------+
                  |
          Comunicación bidireccional
                  |
          <---------------------->

Ejemplo sencillo

Cliente (JavaScript en navegador)

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

socket.onopen = () => {
  console.log("Conexión establecida");
  socket.send("Hola servidor!");
};

socket.onmessage = (event) => {
  console.log("Mensaje del servidor:", event.data);
};

Servidor (Node.js con ws)

const WebSocket = require("ws");

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

wss.on("connection", (ws) => {
  console.log("Cliente conectado");

  // Enviar mensaje al cliente
  ws.send("Bienvenido al servidor WebSocket!");

  // Escuchar mensajes del cliente
  ws.on("message", (msg) => {
    console.log("Cliente dice:", msg);
    ws.send("Servidor responde: " + msg);
  });
});

Arquitectura extendida en producción

En sistemas reales, el modelo cliente‑servidor puede escalar con:

Diferencia clave con HTTP cliente‑servidor

  • En HTTP, el servidor es pasivo: responde solo cuando el cliente pide.
  • En WebSockets, el servidor puede ser activo: envía mensajes espontáneamente (notificaciones, actualizaciones, datos en vivo).

En resumen

La arquitectura cliente‑servidor de WebSockets transforma la comunicación web en un canal continuo, bidireccional y eficiente, donde ambos lados pueden iniciar mensajes. Esto habilita aplicaciones en tiempo real, algo costoso o ineficiente de lograr con HTTP tradicional.

Retornar