Los WebSockets son un protocolo que permite comunicación bidireccional en tiempo real entre cliente y servidor, a diferencia de HTTP que funciona en modo solicitud-respuesta.
Es como un canal permanente, donde ambos lados (cliente y servidor) pueden enviar datos en cualquier momento.
Son útiles en cualquier escenario donde se requiera interacción instantánea:
- Chats y mensajería: WhatsApp Web, Slack, Discord.
- Juegos online: sincronización de movimientos en tiempo real.
- Colaboración en documentos: Google Docs, Notion, donde ves cambios de otros usuarios al instante.
- Notificaciones en vivo: alertas de bolsa, actualizaciones deportivas, sistemas de monitoreo.
- Aplicaciones financieras: transmisión de precios de criptomonedas o acciones en tiempo real.
- IoT y dashboards: dispositivos que envían datos continuamente a una interfaz web .
Entre las ventajas principales encontramos:
- Baja latencia: no hay que abrir y cerrar conexiones constantemente.
- Menor consumo de recursos: menos overhead que múltiples peticiones HTTP.
- Escalabilidad: ideal para aplicaciones con miles de usuarios conectados simultáneamente.
- Flexibilidad: permite enviar datos en ambos sentidos (cliente ↔ servidor).
Entre los riesgos y consideraciones a tomar tenemos:
- Seguridad: al ser persistentes, requieren cifrado
(wss://)para evitar ataques de interceptación. - Escalabilidad: manejar miles de conexiones simultáneas exige servidores optimizados.
- Compatibilidad: aunque ampliamente soportados, algunos entornos antiguos pueden no tener soporte completo.
WebSockets
Iniciemos pues con los WebSockets. Haremos un sencillo ejemplo. Para ello necesitamos:
- Tener Node instalado en nuestras máquinas.
- Tener conocimiento de Javascript y Node.
- Instalar Express y Socket.IO
¿Qué haremos? Una aplicación que nos muestre un ejemplo del uso de WebSockets, con ayuda de JS y Node.
1. Crearemos un directorio y nos ubicaremos en el:
$ mkdir websocket-demo $ cd websocket-demo
2. Una vez dentro del directorio, crearemos un proyecto Node:
$ npm init -y
Esto nos generará el proyecto Node.
3. Instalar las dependencias (Express y Socket.IO) con ayuda de la herramienta ``npm``:
$ npm install express socket.io
Podemos validar la descarga con este comando:
$ npm list
Salida:
+-- express@5.2.1 `-- socket.io@4.8.3
4. Creando un servidor que escuche ``server.js``:
const express = require('express'); const http = require('http'); const { Server } = require('socket.io'); const app = express(); const server = http.createServer(app); const io = new Server(server); app.use(express.static('public')); io.on('connection', (socket) => { console.log('Un usuario se conectó'); socket.on('chat message', (msg) => { console.log('Mensaje recibido: ' + msg); io.emit('chat message', msg); }); socket.on('disconnect', () => { console.log('Un usuario se desconectó'); }); }); server.listen(3000, () => { console.log('Servidor escuchando en http://localhost:3000'); });
5. Crearemos un cliente para hacer petciones al servidor:
public\index.html
<!DOCTYPE html> <html> <head> <title>Chat con Socket.IO</title> </head> <body> <h1>Chat sencillo</h1> <ul id="mensajes"></ul> <form id="form"> <input id="input" autocomplete="off" /><button>Enviar</button> </form> <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); const form = document.getElementById('form'); const input = document.getElementById('input'); const messages = document.getElementById('mensajes');
form.addEventListener('submit', (e) => { e.preventDefault(); if (input.value) { socket.emit('chat message', input.value); input.value = ''; } }); socket.on('chat message', (msg) => { const item = document.createElement('li'); item.textContent = msg; messages.appendChild(item); }); </script> </body> </html>
6. Ejecutamos la aplicación:
$ node server.js
Si todo va bien veremos este mensaje:
Servidor escuchando en http://localhost:3000
Abrimos un navegador en la ruta: http://localhost:3000/
Veremos lo siguiente:
Mandamos un mensaje y obtendremos una respuesta:
¡Hemos creado nuestra primera aplicación con WebSockets!
Continuaremos con estos temas en próximas entregas.
Enlaces:
https://en.wikipedia.org/wiki/WebSockethttps://socket.io/
https://expressjs.com/
