Este artículo ofrece un tutorial exhaustivo para construir una aplicación en tiempo real con Node.js, con pasos técnicos actualizados que los desarrolladores pueden seguir para crear un sistema de votación con resultados que se actualizan al instante en todos los clientes.
Node.js es un entorno de ejecución para JavaScript de código abierto y multiplataforma. Esta tecnología permite ejecutar código JavaScript en el lado del servidor. En consecuencia, abre la puerta a la creación de aplicaciones web dinámicas y en tiempo real. Node.js fue lanzado por primera vez en 2009 por Ryan Dahl y ahora está gestionado por la OpenJS Foundation. En este tutorial, aprenderás a construir una aplicación en tiempo real con Node.js para un sistema de votación simple.
Principios Básicos de una Aplicación en Tiempo Real con Node.js
La tecnología central utilizada es Socket.IO. Socket.IO facilita la comunicación bidireccional y basada en eventos entre el servidor y los clientes. Por lo tanto, cualquier cambio en los datos del servidor se puede enviar al instante a todos los clientes conectados. Este concepto es ideal para funciones como votaciones en directo, chat o paneles de monitorización.
Pasos para Construir una Aplicación de Votación en Tiempo Real
- Instalar Node.js
Asegúrate de tener instalada la última versión LTS de Node.js. Puedes descargarla desde el sitio web oficial de Node.js. El proceso de instalación es sencillo y está disponible para varios sistemas operativos. - Inicializar el Proyecto
Crea una nueva carpeta para el proyecto e inicializa el archivopackage.jsonmediante la terminal. Sin embargo, también puedes crearlo manualmente como se muestra en el siguiente ejemplo.
{
"name": "aplicacion-votacion-tiempo-real",
"version": "1.0.0",
"description": "Aplicación de votación en tiempo real con Node.js y Socket.IO",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.18.2",
"socket.io": "^4.7.2"
}
}A continuación, ejecuta el comando npm install en la terminal para descargar las dependencias. Este proceso creará la carpeta node_modules.
npm install.- Crear el Servidor con Express y Socket.IO
Crea un archivo llamadoserver.js. El código en su interior configurará el servidor HTTP, servirá la página HTML y gestionará las conexiones en tiempo real.
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);
// Datos de votación almacenados en un objeto
let voteData = {
candidatoA: 0,
candidatoB: 0
};
// Servir el archivo index.html
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// Manejar conexiones Socket.IO
io.on('connection', (socket) => {
console.log('Un usuario se ha conectado');
// Enviar los datos de votación más recientes al nuevo cliente
socket.emit('actualizarVoto', voteData);
// Manejar eventos de voto de los clientes
socket.on('enviarVoto', (candidato) => {
if (voteData.hasOwnProperty(candidato)) {
voteData[candidato]++;
// Transmitir la actualización a TODOS los clientes conectados
io.emit('actualizarVoto', voteData);
}
});
});
// Ejecutar el servidor en el puerto 3000
server.listen(3000, () => {
console.log('Servidor ejecutándose en http://localhost:3000');
});- Crear la Interfaz del Cliente (HTML)
Crea el archivoindex.html. Esta interfaz mostrará los resultados de la votación y botones para emitir un voto.
<!DOCTYPE html>
<html>
<head>
<title>Aplicación de Votación en Tiempo Real</title>
<script src="/socket.io/socket.io.js"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; text-align: center; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 12px; }
th { background-color: #f4f4f4; }
button { padding: 10px 20px; background-color: #007cba; color: white; border: none; cursor: pointer; }
button:hover { background-color: #005a87; }
</style>
</head>
<body>
<h1>Elección en Tiempo Real para Presidente</h1>
<table>
<tr><th>Candidato</th><th>Conteo de Votos</th></tr>
<tr><td>Candidato A</td><td id="contadorA">0</td></tr>
<tr><td>Candidato B</td><td id="contadorB">0</td></tr>
</table>
<div>
<button onclick="votar('candidatoA')">Votar por el Candidato A</button>
<button onclick="votar('candidatoB')">Votar por el Candidato B</button>
</div>
<script>
const socket = io();
socket.on('actualizarVoto', function(data) {
document.getElementById('contadorA').textContent = data.candidatoA;
document.getElementById('contadorB').textContent = data.candidatoB;
});
function votar(candidato) {
socket.emit('enviarVoto', candidato);
}
</script>
</body>
</html>Pruebas y Ejecución de la Aplicación en Tiempo Real
- Ejecuta el servidor con el comando
node server.jsen la terminal. - Abre un navegador y ve a
http://localhost:3000. - Abre la misma URL en otra pestaña del navegador o en un dispositivo diferente.
- Intenta emitir un voto en un cliente. Al instante, verás que los resultados se actualizan en todos los clientes abiertos. Este proceso demuestra que la aplicación en tiempo real con Node.js funciona correctamente.
Conclusión
Al aprovechar Node.js y Socket.IO, has construido con éxito un sistema funcional en tiempo real. Esta arquitectura se puede ampliar para diversos fines, como la monitorización de datos, la colaboración en documentos o las notificaciones en directo. El código utilizado en este tutorial es modular. Por lo tanto, puedes adaptarlo fácilmente para una mayor escala y complejidad.
