WebSocket en JavaScript: creando aplicaciones en tiempo real con Node.js

WebSocket en JavaScript: creando aplicaciones en tiempo real con Node.js

La web moderna exige una reacción instantánea. Los usuarios esperan que los mensajes en el chat se entreguen en milisegundos, que las cotizaciones de acciones se actualicen sin recargar la página y que las notificaciones lleguen en tiempo real. La tecnología WebSocket en JavaScript resuelve este problema, proporcionando una conexión bidireccional permanente entre el cliente y el servidor. En este artículo, analizaremos cómo usar WebSocket en el entorno Node.js para crear aplicaciones en tiempo real rápidas y escalables.

¿Qué es WebSocket y por qué es necesario?

El protocolo HTTP tradicional funciona bajo el principio de "solicitud-respuesta": el cliente envía una solicitud, el servidor responde y la conexión se cierra. Para obtener nuevos datos, el cliente tiene que consultar constantemente al servidor (polling) o usar solicitudes HTTP largas (long polling). Esto es ineficiente, crea una carga excesiva y aumenta la latencia.

WebSocket (RFC 6455) es un protocolo que establece una conexión dúplex permanente a través de un solo canal TCP. Después del handshake a través de HTTP, el servidor y el cliente pueden enviarse datos entre sí en cualquier momento sin encabezados adicionales. Esto hace que WebSocket sea la solución ideal para:

• Chats y mensajería instantánea
• Juegos en línea y edición colaborativa
• Cotizaciones bursátiles y paneles financieros
• Notificaciones push y monitoreo
• Transmisión de datos en streaming (IoT, logs)

Instalación y configuración del servidor WebSocket en Node.js

Para trabajar con WebSocket en el lado del servidor, usaremos la biblioteca ws, la implementación más popular y confiable para Node.js. La instalamos a través de npm:

npm install ws

Creemos un servidor WebSocket simple. Primero, importamos el módulo y creamos una instancia del servidor en el puerto 8080:

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {    console.log('Nuevo cliente conectado');

    // Enviamos un mensaje de bienvenida al cliente    ws.send('¡Bienvenido al servidor WebSocket!');

    // Manejamos los mensajes entrantes    ws.on('message', function incoming(message) {        console.log('Recibido: %s', message);        // Respondemos a todos los clientes conectados        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`Eco: ${message}`);            }        });    });

    // Manejamos la desconexión del cliente    ws.on('close', function close() {        console.log('Cliente desconectado');    });

    // Manejamos errores    ws.on('error', function error(err) {        console.error('Error de WebSocket:', err);    });});

console.log('Servidor WebSocket iniciado en ws://localhost:8080');

Este código crea un servidor echo simple: cualquier mensaje enviado por un cliente será reenviado a todos los usuarios conectados. Observe la verificación de readyState — esto garantiza que no intentemos enviar datos a una conexión cerrada.

Parte cliente de WebSocket en el navegador

En el lado del cliente (navegador), WebSocket es un objeto integrado — no se requieren bibliotecas adicionales. Conectémonos a nuestro servidor e implementemos un chat simple:

// Creamos una conexión WebSocketconst socket = new WebSocket('ws://localhost:8080');

// Manejador de apertura de conexiónsocket.addEventListener('open', function (event) {    console.log('Conexión establecida');    socket.send('¡Hola, servidor!');});

// Manejador de recepción de mensajessocket.addEventListener('message', function (event) {    const messagesDiv = document.getElementById('messages');    const messageElement = document.createElement('div');    messageElement.textContent = event.data;    messagesDiv.appendChild(messageElement);});

// Manejador de erroressocket.addEventListener('error', function (event) {    console.error('Error en WebSocket:', event);});

// Manejador de cierre de conexiónsocket.addEventListener('close', function (event) {    console.log('Conexión cerrada');});

Este código de cliente se conecta a nuestro servidor WebSocket, envía un saludo al abrir la conexión y muestra cualquier mensaje entrante en un elemento div con el id messages. El manejo de errores y cierre de conexión también está implementado para una aplicación robusta.