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

Cómo usar Socket.IO con Node.js

Socket.IO es una biblioteca de JavaScript que permite la comunicación bidireccional en tiempo real entre clientes web y servidores.

Utiliza WebSockets bajo el capó cuando están disponibles, y proporciona una capa de abstracción para manejar la comunicación en tiempo real de manera muy sencilla para el desarrollador.

Configuración del Servidor Socket.IO

Comencemos configurando nuestro servidor Socket.IO. Utilizaremos Node.js y Express.js para crear el servidor.

Primero, necesitamos instalar las dependencias necesarias. Ejecute el siguiente comando en el terminal para instalar Express.js y Socket.IO:

npm install express socket.io

Configurar el servidor

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

server.js

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

const server = createServer();
const io = new SocketIOServer(server, { cors: { origin: '*' } }); // cors ¡solo para test en el desarrollo!

// 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, creamos un servidor HTTP y luego configuramos Socket.IO para manejar conexiones de clientes, mensajes y desconexiones.

Creación del Cliente Web

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

index.html

Creamos un archivo HTML para la interfaz de usuario del chat.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Chat en Tiempo Real 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>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Chat en Tiempo Real con Socket.IO</h1>
  <ul id="messages"></ul>
  <input type="text" id="message" placeholder="Escribe un mensaje...">
  <button onclick="sendMessage()">Enviar</button>

  <script src="client.js"></script>
</body>
</html>

styles.css

Creamos un archivo CSS para estilizar nuestra interfaz de usuario (styles.css):

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

input[type="text"] {
  width: 200px;
  padding: 5px;
  margin-right: 5px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

client.js

Finalmente, creamos un archivo JavaScript para implementar la lógica del cliente (client.js):

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 ejecute el archivo server.js en su terminal:

node server.js

Luego, abrimos el archivo index.html en un navegador web. Ahora debería poder enviar y recibir mensajes en tiempo real en su chat.

¡Felicidades! Has creado con éxito un chat en tiempo real utilizando Socket.IO. ¿A que ha sido fácil?

Descarga el código

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