Socket.io para JavaScript (Node.js): guía completa con ejemplos

¿Qué es Socket.io y para qué sirve?

Socket.io es una potente biblioteca de JavaScript que proporciona comunicación bidireccional en tiempo real (real-time) entre el cliente (navegador) y el servidor (Node.js). A diferencia del protocolo HTTP tradicional, donde el cliente envía una solicitud y espera una respuesta, Socket.io permite que el servidor inicie el envío de datos al cliente en cualquier momento, y viceversa.

¿Para qué sirve? Imagine una aplicación de chat, un juego en línea, un panel de monitoreo con gráficos en vivo o un sistema de edición colaborativa de documentos. En todos estos escenarios, los datos deben actualizarse al instante, sin recargar la página. HTTP no es adecuado para esto, ya que funciona bajo el principio de "solicitud-respuesta". Socket.io resuelve este problema estableciendo una conexión permanente (generalmente a través de WebSocket) por la cual los datos pueden transmitirse en ambas direcciones en cualquier momento.

Características clave de Socket.io:

\n
• Bidireccionalidad: El servidor y el cliente pueden enviarse mensajes entre sí.
\n
• Tiempo real: Los mensajes se entregan al instante (con un retraso mínimo).
\n
• Reconexión automática: Si la conexión se interrumpe, Socket.io intenta restaurarla automáticamente.
\n
• Salas (Rooms): Posibilidad de agrupar clientes y enviar mensajes solo a un grupo específico.
\n
• Espacios de nombres (Namespaces): División de la aplicación en canales de comunicación independientes.
\n
• Fiabilidad: Si WebSocket no es compatible, Socket.io cambia automáticamente a otros métodos (long-polling, FlashSocket, etc.).
\n

Instalación de Socket.io

Socket.io consta de dos partes: la del servidor (para Node.js) y la del cliente (para el navegador). Ambas se instalan a través de npm.

Instalación de la parte del servidor

Abra la terminal en la carpeta de su proyecto y ejecute el comando:

npm install socket.io

Instalación de la parte del cliente

El script del cliente se puede conectar de dos maneras:

1. A través de CDN (lo más sencillo para empezar):

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

2. A través de npm (para proyectos con empaquetadores, por ejemplo, Webpack):

npm install socket.io-client

Inicio rápido: primer chat

Vamos a crear un chat muy simple donde los mensajes de un cliente son vistos por todos los demás.

Paso 1: Servidor (archivo server.js)

// server.js\nconst http = require('http');\nconst { Server } = require("socket.io");\n\n// 1. Creamos un servidor HTTP\nconst server = http.createServer((req, res) => {\n    res.writeHead(200, { 'Content-Type': 'text/plain' });\n    res.end('Servidor Socket.io iniciado');\n});\n\n// 2. Creamos una instancia de Socket.io, vinculada al servidor\nconst io = new Server(server);\n\n// 3. Manejador de conexión de un nuevo cliente\nio.on('connection', (socket) => {\n    console.log('Nuevo usuario conectado:', socket.id);\n\n    // 4. Escuchamos el evento 'chat message' del cliente\n    socket.on('chat message', (msg) => {\n        console.log('Mensaje:', msg);\n        // 5. Enviamos el mensaje a TODOS los clientes conectados (incluyendo al remitente)\n        io.emit('chat message', msg);\n    });\n\n    // 6. Manejador de desconexión del cliente\n    socket.on('disconnect', () => {\n        console.log('Usuario desconectado:', socket.id);\n    });\n});\n\n// 7. Iniciamos el servidor en el puerto 3000\nserver.listen(3000, () => {\n    console.log('Servidor iniciado en http://localhost:3000');\n});\n

Paso 2: Cliente (archivo index.html)

<!DOCTYPE html>\n<html>\n<head>\n    <title>Chat Socket.io</title>\n    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>