Tutorial completo para crear un sistema de chat en tiempo real con Node.js y Socket.io

Bienvenido a este tutorial detallado pensado para desarrolladores con conocimientos intermedios en JavaScript que desean profundizar en el desarrollo backend y en aplicaciones en tiempo real. Aquí aprenderás a construir un sistema de chat en tiempo real utilizando Node.js, Express y Socket.io. Además, vamos a implementar la funcionalidad de salas de chat y a manejar eventos clave como conexiones y desconexiones.

Este tutorial está optimizado para SEO con palabras clave como: tutorial chat en tiempo real Node.js, Socket.io tutorial, crear sistema chat JavaScript, y aplicaciones realtime Node.js.

Índice

1. Configuración del entorno
2. Creación del servidor con Express
3. Integración de Socket.io para comunicación bidireccional
4. Implementación de salas de chat
5. Manejo de eventos de conexión y desconexión
6. Despliegue básico de la aplicación
Conclusión y buenas prácticas

1. Configuración del entorno

Para comenzar debes tener instalado lo siguiente en tu equipo:

Node.js (versión 12 o superior) y npm
Un editor de código, recomendamos Visual Studio Code

Paso 1. Inicializa el proyecto

Abre la terminal y crea una nueva carpeta para tu proyecto, luego inicializa npm:

mkdir realtime-chat-nodejs
cd realtime-chat-nodejs
npm init -y

mkdir realtime-chat-nodejs

cd realtime-chat-nodejs

npm init -y

Paso 2. Instala las dependencias necesarias

Vamos a necesitar express para nuestro servidor HTTP y socket.io para la comunicación en tiempo real:

npm install express socket.io

1 2	npm install express socket.io

2. Creación del servidor con Express

Ahora crearemos un servidor básico Express que servirá los archivos del cliente y escuchará peticiones.

Paso 3. Crea el archivo principal

Crea un archivo llamado server.js en la raíz del proyecto.

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// Servir archivos estáticos (ej. HTML, CSS, JS cliente)
app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

const express = require('express');

const path = require('path');

const app = express();

const PORT = process.env.PORT || 3000;

// Servir archivos estáticos (ej. HTML, CSS, JS cliente)

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {

console.log(`Servidor corriendo en http://localhost:${PORT}`);

});

Paso 4. Crea la carpeta `public` y el archivo `index.html`

Dentro de public, crea index.html que será la interfaz del chat:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat en Tiempo Real Node.js</title>
    <style>
      body { font-family: Arial, sans-serif; background: #f4f4f4; margin: 0; padding: 0; }
      #chat { max-width: 600px; margin: 30px auto; background: #fff; padding: 20px; border-radius: 5px; }
      #messages { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: scroll; }
      #messages li { padding: 5px 10px; border-bottom: 1px solid #eee; }
      #form { display: flex; margin-top: 10px; }
      #input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 3px; }
      #send { padding: 10px 15px; background: #007BFF; color: white; border: none; border-radius: 3px; margin-left: 10px; cursor: pointer; }
    </style>
</head>
<body>
    <div id="chat">
      <ul id="messages"></ul>
      <form id="form">
        <input id="input" autocomplete="off" placeholder="Escribe un mensaje..." />
        <button id="send">Enviar</button>
      </form>
    </div>

    <!-- Socket.io cliente -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="chat.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Chat en Tiempo Real Node.js</title>

<style>

body { font-family: Arial, sans-serif; background: #f4f4f4; margin: 0; padding: 0; }

#chat { max-width: 600px; margin: 30px auto; background: #fff; padding: 20px; border-radius: 5px; }

#messages { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: scroll; }

#messages li { padding: 5px 10px; border-bottom: 1px solid #eee; }

#form { display: flex; margin-top: 10px; }

#input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 3px; }

#send { padding: 10px 15px; background: #007BFF; color: white; border: none; border-radius: 3px; margin-left: 10px; cursor: pointer; }

</style>

</head>

<body>

<button id="send">Enviar</button>

</form>

</div>

</body>

</html>

3. Integración de Socket.io para comunicación bidireccional

Ahora vamos a agregar Socket.io en el servidor y en el cliente para permitir el intercambio de mensajes en tiempo real.

Paso 5. Configura Socket.io en el servidor

Modifica server.js para integrar Socket.io:

const express = require('express');
const http = require('http');
const path = require('path');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

// Escuchar conexiones de Socket.io
io.on('connection', (socket) => {
  console.log('Nuevo usuario conectado: ' + socket.id);

  // Escuchar mensajes desde clientes
  socket.on('chat message', (msg) => {
    // Emitir mensaje a todos los clientes conectados
    io.emit('chat message', msg);
  });

  // Evento desconexión
  socket.on('disconnect', () => {
    console.log('Usuario desconectado: ' + socket.id);
  });
});

server.listen(PORT, () => {
  console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

const express = require('express');

const http = require('http');

const path = require('path');

const { Server } = require('socket.io');

const app = express();

const server = http.createServer(app);

const io = new Server(server);

const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

// Escuchar conexiones de Socket.io

io.on('connection', (socket) => {

console.log('Nuevo usuario conectado: ' + socket.id);

// Escuchar mensajes desde clientes

socket.on('chat message', (msg) => {

// Emitir mensaje a todos los clientes conectados

io.emit('chat message', msg);

});

// Evento desconexión

socket.on('disconnect', () => {

console.log('Usuario desconectado: ' + socket.id);

});

server.listen(PORT, () => {

console.log(`Servidor corriendo en http://localhost:${PORT}`);

});

Paso 6. Crear el archivo cliente `chat.js` en `public/`

Ahora crea public/chat.js para conectarse a Socket.io y manejar los mensajes:

const socket = io();

const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (input.value) {
    socket.emit('chat message', input.value);
    input.value = '';
  }
});

// Mostrar mensajes recibidos
socket.on('chat message', (msg) => {
  const item = document.createElement('li');
  item.textContent = msg;
  messages.appendChild(item);
  messages.scrollTop = messages.scrollHeight;
});

const socket = io();

const form = document.getElementById('form');

const input = document.getElementById('input');

const messages = document.getElementById('messages');

form.addEventListener('submit', (e) => {

e.preventDefault();

if (input.value) {

socket.emit('chat message', input.value);

input.value = '';

}

});

// Mostrar mensajes recibidos

socket.on('chat message', (msg) => {

const item = document.createElement('li');

item.textContent = msg;

messages.appendChild(item);

messages.scrollTop = messages.scrollHeight;

});

4. Implementación de salas de chat

Para mejorar nuestro chat, vamos a permitir que los usuarios se unan a diferentes salas o canales, aislando la comunicación.

Paso 7. Ampliar la UI para elegir sala

Modifica index.html para incluir selección de sala y nombre de usuario:

<form id="join-form">
  <input id="username" placeholder="Tu nombre" required />
  <input id="room" placeholder="Nombre de la sala" required />
  <button>Unirse</button>
</form>

<div id="chat" style="display:none;">
  <!-- Contenidos actuales -->
</div>

<button>Unirse</button>

</form>

</div>

Paso 8. Lograr que usuario se una a una sala y solo reciba mensajes de ella

Actualiza chat.js para manejar el formulario de unión y mensajes por sala:

const socket = io();

const joinForm = document.getElementById('join-form');
const usernameInput = document.getElementById('username');
const roomInput = document.getElementById('room');
const chatDiv = document.getElementById('chat');
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');

let currentRoom = '';
let username = '';

joinForm.addEventListener('submit', (e) => {
  e.preventDefault();

  username = usernameInput.value.trim();
  currentRoom = roomInput.value.trim();

  if (username && currentRoom) {
    socket.emit('join room', { username, room: currentRoom });
    joinForm.style.display = 'none';
    chatDiv.style.display = 'block';
  }
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (input.value) {
    socket.emit('chat message', { room: currentRoom, message: input.value, username });
    input.value = '';
  }
});

socket.on('chat message', (data) => {
  const item = document.createElement('li');
  item.textContent = `${data.username}: ${data.message}`;
  messages.appendChild(item);
  messages.scrollTop = messages.scrollHeight;
});

const socket = io();

const joinForm = document.getElementById('join-form');

const usernameInput = document.getElementById('username');

const roomInput = document.getElementById('room');

const chatDiv = document.getElementById('chat');

const form = document.getElementById('form');

const input = document.getElementById('input');

const messages = document.getElementById('messages');

let currentRoom = '';

let username = '';

joinForm.addEventListener('submit', (e) => {

e.preventDefault();

username = usernameInput.value.trim();

currentRoom = roomInput.value.trim();

if (username && currentRoom) {

socket.emit('join room', { username, room: currentRoom });

joinForm.style.display = 'none';

chatDiv.style.display = 'block';

}

});

form.addEventListener('submit', (e) => {

e.preventDefault();

if (input.value) {

socket.emit('chat message', { room: currentRoom, message: input.value, username });

input.value = '';

}

});

socket.on('chat message', (data) => {

const item = document.createElement('li');

item.textContent = `${data.username}: ${data.message}`;

messages.appendChild(item);

messages.scrollTop = messages.scrollHeight;

});

Paso 9. Modificar servidor para manejar salas y mensajes específicos

En server.js actualiza los manejadores:

io.on('connection', (socket) => {
  console.log('Usuario conectado:', socket.id);

  socket.on('join room', ({ username, room }) => {
    socket.join(room);
    socket.username = username;
    socket.room = room;
    console.log(`${username} se unió a la sala ${room}`);

    // Notificar a otros en la sala
    socket.to(room).emit('chat message', {
      username: 'Sistema',
      message: `${username} se ha unido a la sala.`
    });
  });

  socket.on('chat message', ({ room, message, username }) => {
    // Emitir solo a la sala correspondiente
    io.to(room).emit('chat message', { username, message });
  });

  socket.on('disconnect', () => {
    if (socket.room && socket.username) {
      console.log(`${socket.username} desconectado de la sala ${socket.room}`);
      socket.to(socket.room).emit('chat message', {
        username: 'Sistema',
        message: `${socket.username} ha salido de la sala.`
      });
    }
  });
});

io.on('connection', (socket) => {

console.log('Usuario conectado:', socket.id);

socket.on('join room', ({ username, room }) => {

socket.join(room);

socket.username = username;

socket.room = room;

console.log(`${username} se unió a la sala ${room}`);

// Notificar a otros en la sala

socket.to(room).emit('chat message', {

username: 'Sistema',

message: `${username} se ha unido a la sala.`

});

socket.on('chat message', ({ room, message, username }) => {

// Emitir solo a la sala correspondiente

io.to(room).emit('chat message', { username, message });

});

socket.on('disconnect', () => {

if (socket.room && socket.username) {

console.log(`${socket.username} desconectado de la sala ${socket.room}`);

socket.to(socket.room).emit('chat message', {

username: 'Sistema',

message: `${socket.username} ha salido de la sala.`

});

}

});

5. Manejo de eventos de conexión y desconexión

Ya hemos visto cómo, cuando un usuario se conecta o desconecta, refrescamos la sala para mostrar mensajes del sistema indicando el evento. Esto mejora la experiencia del usuario y la interacción en el chat.

Resumen de eventos importantes:

connection: nuevo usuario conectado
join room: usuario solicita unirse a una sala
chat message: mensaje enviado dentro de una sala
disconnect: usuario sale de la conexión

Esto garantiza un flujo robusto para aplicaciones realtime Node.js.

6. Despliegue básico de la aplicación

Paso 10. Preparar para producción

Cualquier servicio que soporte Node.js puede usarse (Heroku, Vercel, Railway, etc.). Para fines de despliegue básico:

Asegúrate que en package.json exista el script:

"scripts": {
  "start": "node server.js"
}

"scripts": {

"start": "node server.js"

}

Si usas Heroku (ejemplo):

heroku create nombre-app-chat
git add .
git commit -m "Preparación para despliegue"
git push heroku master
heroku open

heroku create nombre-app-chat

git add .

git commit -m "Preparación para despliegue"

git push heroku master

heroku open

Nota: Confirma que socket.io funciona en el entorno destino, y configura variables de entorno si fueran necesarias.

Conclusión y buenas prácticas

En este tutorial aprendiste de forma clara y paso a paso a crear un sistema de chat en tiempo real usando Node.js, Express y Socket.io, incluyendo la implementación de múltiples salas, gestión de eventos y despliegue básico. Esta es una base sólida para construir aplicaciones realtime Node.js más complejas y personalizadas.

Buenas prácticas recomendadas:

Modulariza el código (separa rutas, sockets y lógica de negocio)
Valida entradas y evita inyección de código por parte de usuarios
Optimiza el manejo de salas y usuarios para escalabilidad
Implementa autenticación para usuarios
Maneja reconexiones y errores con cuidado

¡Ahora es tu turno!

Prueba añadir nuevas funcionalidades como mensajes privados, historial en base de datos o emojis. ¿Quieres seguir explorando aplicaciones realtime Node.js? Suscríbete y comparte este tutorial para ayudar a otros desarrolladores.

Tutorial completo para crear un sistema de chat en tiempo real con Node.js y Socket.io

Índice

1. Configuración del entorno

Paso 1. Inicializa el proyecto

Paso 2. Instala las dependencias necesarias

2. Creación del servidor con Express

Paso 3. Crea el archivo principal

Paso 4. Crea la carpeta public y el archivo index.html

3. Integración de Socket.io para comunicación bidireccional

Paso 5. Configura Socket.io en el servidor

Paso 6. Crear el archivo cliente chat.js en public/

4. Implementación de salas de chat

Paso 7. Ampliar la UI para elegir sala

Paso 8. Lograr que usuario se una a una sala y solo reciba mensajes de ella

Paso 9. Modificar servidor para manejar salas y mensajes específicos

5. Manejo de eventos de conexión y desconexión

Resumen de eventos importantes:

6. Despliegue básico de la aplicación

Paso 10. Preparar para producción

Conclusión y buenas prácticas

Buenas prácticas recomendadas:

¡Ahora es tu turno!

Paso 4. Crea la carpeta `public` y el archivo `index.html`

Paso 6. Crear el archivo cliente `chat.js` en `public/`