WebSockets en JavaScript: creando aplicaciones en tiempo real desde cero

WebSockets en JavaScript: cuando un sitio «vivo» no es magia, sino código

¿Alguna vez se ha preguntado cómo funcionan los chats en línea, las cotizaciones bursátiles en tiempo real o los juegos multijugador en el navegador? El secreto es simple y elegante: WebSockets en JavaScript. Esta tecnología transforma un sitio web estático en un organismo vivo que reacciona instantáneamente a las acciones de otros usuarios.

En este artículo no solo analizaremos la teoría. Escribiremos un chat real desde cero, aprenderemos a manejar errores y entenderemos por qué las aplicaciones en tiempo real con WebSockets funcionan más rápido que el viejo AJAX con polling. Abróchense los cinturones: será interesante.

¿Por qué HTTP no es adecuado para tiempo real? (Breve introducción)

El HTTP normal funciona bajo el principio de «solicitud-respuesta». El cliente pide, el servidor responde. Si el servidor quiere decir algo por sí mismo (por ejemplo, «llegó un nuevo mensaje»), tiene que esperar a que el cliente pregunte de nuevo. Esto se asemeja a una correspondencia con palomas mensajeras: lento e ineficiente.

Los desarrolladores idearon soluciones alternativas:

\n
• Polling — el cliente consulta al servidor cada 5 segundos: «¿Qué hay, hay novedades?»
\n
• Long polling — el servidor mantiene la conexión abierta hasta que haya una respuesta (pero sigue siendo un canal unidireccional).
\n

Y entonces entran en escena los WebSockets. Imagine que abre una línea telefónica entre el navegador y el servidor. Ambos pueden hablar en cualquier momento, simultáneamente, sin demoras por «levantar el auricular». Esa es la magia de la API WebSocket de JavaScript.

Cómo funciona WebSocket: protocolo, handshake, mensajes

Técnicamente, WebSocket es un protocolo separado (ws:// o wss:// para conexiones cifradas). Todo comienza con un handshake HTTP:

\n
1. El cliente envía una solicitud HTTP normal con el encabezado Upgrade: websocket.
\n
2. El servidor responde: «101 Switching Protocols» — y la conexión se «actualiza» a WebSocket.
\n
3. A partir de ahí, full dúplex: los datos vuelan en ambas direcciones en forma de tramas (texto o datos binarios).
\n

En el navegador, para trabajar con WebSocket se utiliza el objeto incorporado WebSocket. No se necesitan bibliotecas adicionales: el WebSocket JavaScript puro funciona de fábrica en todos los navegadores modernos.

Escribimos nuestro primer chat en tiempo real en JavaScript

Vamos a crear un chat simple. La parte del servidor la escribiremos en Node.js con la biblioteca ws (la más popular para WebSocket Node.js), y el cliente en JavaScript puro.

Paso 1. Instalación del servidor

npm init -y\nnpm install ws

Paso 2. Código del servidor (server.js)

const WebSocket = require('ws');\n\nconst wss = new WebSocket.Server({ port: 8080 });\n\nwss.on('connection', function connection(ws) {\n    console.log('Nuevo usuario conectado');\n\n    // Enviamos un saludo al nuevo cliente\n    ws.send(JSON.stringify({\n        type: 'system',\n        message: '¡Bienvenido al chat!'\n    }));\n\n    // Recibimos mensajes del cliente\n    ws.on('message', function incoming(data) {\n        const message = JSON.parse(data);\n        console.log('Recibido:', message);\n\n        // Reenviamos el mensaje a todos los clientes conectados\n        wss.clients.forEach(function each(client) {\n            if (client.readyState === WebSocket.OPEN) {\n                client.send(JSON.stringify({\n                    type: 'message',\n                    user: message.user,\n                    text: message.text,\n                    time: new Date().toLocaleTimeString()\n                }));\n            }\n        });\n    });\n\n    // Manejamos la desconexión\n    ws.on('close', function() {\n        console.log('Usuario desconectado');\n    });\n});\n\nconsole.log('Servidor iniciado en ws://localhost:8080');

Paso 3. Cliente