Implementa un Sistema de Monitoreo en Tiempo Real con Node.js y WebSocket
En este artículo, vamos a explorar cómo implementar un sistema de monitoreo en tiempo real utilizando Node.js y la tecnología WebSocket. Esta combinación permite la creación de aplicaciones interactivas donde los datos se actualizan instantáneamente sin necesidad de recargar la página.
¿Qué es WebSocket?
WebSocket es un protocolo de comunicación que proporciona un canal bidireccional interactivo entre el cliente y el servidor. A diferencia de las solicitudes HTTP, donde el cliente inicia la comunicación, WebSocket permite que ambos lados envíen datos sin la sobrecarga de las solicitudes de HTTP.
Instalando Node.js y Dependencias
Primero, asegúrate de tener Node.js instalado. Luego, crea un nuevo proyecto y accede a la carpeta de tu proyecto:
mkdir real-time-monitoring
cd real-time-monitoring
npm init -yAhora, instala la librería ws, que nos permitirá trabajar con WebSocket:
npm install wsCreando el Servidor WebSocket
Vamos a crear un archivo llamado server.js y agregar el siguiente código:
const WebSocket = require('ws');
const http = require('http');
const server = http.createServer();
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
console.log('Nuevo cliente conectado');
ws.on('message', (message) => {
console.log(`Mensaje recibido: ${message}`);
});
// Envío de datos al cliente
const inter = setInterval(() => {
ws.send(JSON.stringify({ data: Math.random() }));
}, 1000);
ws.on('close', () => {
clearInterval(inter);
console.log('Cliente desconectado');
});
});
server.listen(8080, () => {
console.log('Servidor escuchando en http://localhost:8080');
});Este código establece un servidor WebSocket que envía un número aleatorio a los clientes cada segundo.
Creando el Cliente WebSocket
A continuación, crearemos un archivo HTML llamado index.html para conectarnos al servidor:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monitoreo en Tiempo Real</title>
</head>
<body>
<h1>Monitoreo en Tiempo Real</h1>
<div>Datos: <span id="data"></span></div>
<script>
const dataSpan = document.getElementById('data');
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
dataSpan.textContent = data.data;
};
</script>
</body>
</html>Este cliente web se conectará al servidor WebSocket y mostrará los datos en tiempo real.
Ejecutando el Proyecto
Para ejecutar tu servidor, simplemente usa el siguiente comando en la terminal:
node server.jsA continuación, abre index.html en tu navegador. Verás que los datos se actualizan cada segundo.
Conclusión
Has aprendido cómo implementar un sistema de monitoreo en tiempo real utilizando Node.js y WebSocket. Esta tecnología puede ser utilizada en muchas aplicaciones, desde paneles de control hasta chats en tiempo real. Explora más sobre WebSocket y comienza a crear aplicaciones interactivas.