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

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

Las aplicaciones web modernas requieren un intercambio instantáneo de datos entre el cliente y el servidor. El protocolo HTTP tradicional, basado en solicitudes-respuestas, no es adecuado para tareas donde la velocidad es importante: chats en línea, cotizaciones bursátiles, juegos multijugador o sistemas de notificaciones. Aquí es donde el protocolo WebSocket viene al rescate. En este artículo, analizaremos cómo funciona WebSocket en JavaScript y crearemos una aplicación simple en tiempo real con Node.js.

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

WebSocket es un protocolo de comunicación full-duplex sobre una conexión TCP. A diferencia de HTTP, donde el cliente siempre inicia la solicitud, WebSocket permite que el servidor envíe datos al cliente de forma independiente en cualquier momento. Esto se logra estableciendo un canal bidireccional permanente después del handshake inicial.

Principales ventajas de WebSocket sobre HTTP:

• Baja latencia — los datos se transmiten instantáneamente sin encabezados HTTP repetitivos.
• Ahorro de tráfico — overhead mínimo después de establecer la conexión.
• Conexión permanente — no es necesario usar polling o long-polling.
• Comunicación bidireccional — el servidor puede iniciar el envío de datos.

WebSocket es ideal para aplicaciones en tiempo real: chats, notificaciones, edición colaborativa de documentos, terminales financieros y juegos en línea.

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

Para trabajar con WebSocket en Node.js, usaremos la popular biblioteca ws. Es ligera, confiable y está bien documentada.

Empecemos con la instalación:

npm init -ynpm install ws

Ahora crearemos un servidor WebSocket simple que acepte conexiones y responda a los mensajes:

// server.jsconst WebSocket = require('ws');

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

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

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

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

    // Manejamos el cierre de la conexión    ws.on('close', function close() {        console.log('Cliente desconectado');    });});

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

Ejecute el servidor con el comando node server.js. El servidor está listo para aceptar conexiones.

Creación de la parte cliente en JavaScript

La parte cliente funciona directamente en el navegador. La API de WebSocket está integrada en todos los navegadores modernos, por lo que no se requieren bibliotecas adicionales.

Crearemos una página HTML con una interfaz simple:

<!DOCTYPE html><html><head>    <title>Chat WebSocket</title>    <style>        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }        #input { width: 300px; }    </style></head><body>    <h2>Chat en Tiempo Real</h2>    <div id="messages"></div>    <input type="text" id="input" placeholder="Escribe un mensaje..." />    <button onclick="sendMessage()">Enviar</button>

    <script>        // Nos conectamos al servidor WebSocket        const socket = new WebSocket('ws://localhost:8080');

        // Manejador de