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:
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:
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:
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/WebSocket
https://socket.io/
https://expressjs.com/