WebSocket en JavaScript: aplicaciones en tiempo real de la A a la Z

Introducción a WebSocket en JavaScript: ¿qué es la comunicación en tiempo real?

En la web moderna, los usuarios están acostumbrados a las actualizaciones instantáneas: los mensajes en los chats llegan sin recargar la página, las cotizaciones de acciones cambian en tiempo real y, en los juegos en línea, las acciones de los oponentes se ven de inmediato. Todo esto ha sido posible gracias a la tecnología WebSocket, un protocolo que proporciona una conexión bidireccional permanente entre el cliente y el servidor.

A diferencia de la clásica solicitud HTTP, donde el cliente envía una petición y espera una respuesta, WebSocket permite que el servidor envíe datos al cliente en cualquier momento. Esto abre posibilidades ilimitadas para crear aplicaciones en tiempo real con JavaScript. En este artículo, analizaremos WebSocket desde los fundamentos hasta la creación de un chat completo en Node.js.

Fundamentos de WebSocket: cómo funciona el protocolo

¿Qué es WebSocket y en qué se diferencia de HTTP?

WebSocket es un protocolo de comunicación que funciona sobre TCP. Comienza como una solicitud HTTP (handshake), después de lo cual la conexión se "actualiza" a WebSocket y los datos se transmiten en ambas direcciones sin encabezados adicionales. Esto lo hace ideal para aplicaciones donde la baja latencia es importante.

Principales ventajas de WebSocket sobre los métodos tradicionales (Polling, Long Polling):

• Conexión permanente — no es necesario crear una nueva solicitud HTTP para cada actualización
• Baja latencia — los datos se transmiten instantáneamente tan pronto como aparecen en el servidor
• Ahorro de tráfico — tamaño mínimo de los frames (solo 2 bytes de datos de control)
• Comunicación bidireccional — el servidor puede iniciar el envío de datos

Establecimiento de la conexión: handshake

El proceso comienza con una solicitud HTTP del cliente que contiene el encabezado Upgrade: websocket. El servidor, que admite WebSocket, responde con el estado 101 Switching Protocols. Después de esto, la conexión se considera establecida.

// Ejemplo de solicitud HTTP para establecer WebSocketGET /chat HTTP/1.1Host: example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13

Creación de un servidor WebSocket en Node.js

Instalación y configuración de la biblioteca ws

Para trabajar con WebSocket en el lado del servidor, utilizaremos la popular biblioteca ws. Es ligera, rápida y cumple completamente con la especificación del protocolo.

// Instalación de la biblioteca// npm install ws

Creemos un servidor WebSocket simple:

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {    console.log('Nuevo cliente conectado');        ws.on('message', (message) => {        console.log('Mensaje recibido:', message.toString());        // Enviamos respuesta a todos los clientes conectados        wss.clients.forEach((client) => {            if (client.readyState === WebSocket.OPEN) {                client.send(`Eco: ${message}`);            }        });    });        ws.send('¡Bienvenido al servidor WebSocket!');});

console.log('Servidor WebSocket iniciado en el puerto 8080');

Conexión del cliente en JavaScript

En el lado del cliente (navegador) se utiliza el objeto incorporado WebSocket:

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);};

socket.onclose = () => {    console.log('Conexión cerrada');};

socket.onerror = (error) => {    console.error('Error de WebSocket:', error);};

Creación de un chat en tiempo real en JavaScript y