📅 Sáb, 27 Abr 2024 ⏲️ ~ 3 minutos Intermedio

Cómo usar Socket.IO y Express.js con Node.js

Ya hemos visto cómo usar express.js y socket.iop por separado. La buena noticia es que ambas piezas encajan perfectamente en tu proyecto.

Así que ahora vamos a ver cómo combinar Express.js y Socket.IO. Como ejemplo, vamos a crear un chat en tiempo real.

Utilizaremos Express para servir la aplicación web y Socket.IO para la comunicación bidireccional entre clientes y servidor.

Cómo usar Express junto Socket.IO

Comenzaremos configurando nuestro servidor utilizando Express.js y Socket.IO. Primero, necesitamos instalar las dependencias necesarias.

Ejecutamos el siguiente comando en la terminal para instalar Express.js, Socket.IO y otras dependencias necesarias:

npm install express socket.io http

Configuración del Servidor

A continuación, crearemos un archivo server.js para configurar nuestro servidor Express con Socket.IO:

server.js

import express from 'express';
import http from 'http';
import { Server as SocketIOServer } from 'socket.io';

const app = express();
const server = http.createServer(app);
const io = new SocketIOServer(server, { cors: { origin: '*' } }); // cors solo para test en el ejemplo!

// Servir archivos estáticos desde la carpeta 'public'
app.use(express.static('public'));

// Manejar conexiones de clientes
io.on('connection', (socket) => {
  console.log('Cliente conectado');

  // Manejar mensajes del cliente
  socket.on('message', (message) => {
    console.log('Mensaje recibido:', message);
    
    // Enviar mensaje a todos los clientes, incluido el que envió el mensaje
    io.emit('message', message);
  });

  // Manejar desconexiones
  socket.on('disconnect', () => {
    console.log('Cliente desconectado');
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Servidor Socket.IO iniciado en http://localhost:${PORT}`);
});

En este código, configuramos un servidor Express y creamos un servidor HTTP utilizando el módulo http. Luego, configuramos un servidor Socket.IO en la misma instancia de servidor HTTP.

Además, utilizamos Express para servir archivos estáticos desde la carpeta public.

Creación del cliente Web

Ahora, crearemos el cliente web para nuestro chat utilizando HTML, CSS y JavaScript.

Paso 1: Crear la Interfaz de Usuario

Creamos un página web sencillita, para la interfaz de usuario del chat. Todos los ficheros los guardaremos en la carpeta public del proyecto.

index.html

Por un lado, creamos un archivo HTML para la interfaz de usuario del chat.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat con Socket.IO</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js" integrity="sha512-luMnTJZ7oEchNDZAtQhgjomP1eZefnl82ruTH/3Oj/Yu5qYtwL7+dVRccACS/Snp1lFXq188XFipHKYE75IaQQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="client.js"></script>
</head>
<body>
  <h1>Chat con Socket.IO</h1>
  <ul id="messages"></ul>
  <input type="text" id="message" placeholder="Escribe un mensaje...">
  <button onclick="sendMessage()">Enviar</button>
</body>
</html>

client.js

Finalmente, creamos un archivo JavaScript para implementar la lógica del cliente. En este código, establecemos una conexión con el servidor Socket.IO y definimos funciones para enviar y recibir mensajes del servidor.

const socket = io.connect('http://localhost:3000');

// Enviar mensaje al servidor
function sendMessage() {
  const message = document.getElementById('message').value;
  socket.emit('message', message);
  document.getElementById('message').value = '';
}

// Recibir mensajes del servidor
socket.on('message', function(message) {
  const newMessage = document.createElement('li');
  newMessage.textContent = message;
  document.getElementById('messages').appendChild(newMessage);
});

Ejecutar la Aplicación

Para ejecutar la aplicación, simplemente ejecutamos el archivo server.js en la terminal.

node server.js

Por otro lado, abrimos el navegador web y metemos como direcciónhttp://localhost:3000 para acceder al chat.

Express.js nos servirá la página web que tenemos en public. A través de socket.io podemos enviar y recibir mensajes en tiempo real en su chat.

Descarga el código

Todo el código de esta entrada está disponible para su descarga en Github