En Node.js, podemos utilizar la biblioteca ws (WebSocket) para implementar fácilmente Websockets en nuestras aplicaciones.
Los Websockets son un protocolo de comunicación bidireccional que permite establecer una conexión persistente entre el cliente y el servidor.
A diferencia del protocolo HTTP tradicional que es de naturaleza unidireccional (cliente hace una petición, servidor responde), los Websockets permiten una comunicación en tiempo real donde tanto el cliente como el servidor pueden enviar y recibir datos de forma simultánea.
- Comunicación Bidireccional: Permite enviar y recibir datos tanto desde el cliente como desde el servidor en cualquier momento
- Baja Latencia: Al mantener una conexión persistente, los Websockets reducen la latencia en comparación con las solicitudes HTTP tradicionales
- Eficiencia: Al evitar la sobrecarga de encabezados HTTP en cada solicitud, los Websockets son más eficientes para la comunicación continua
Los Websockets tienen una amplia gama de aplicaciones en el desarrollo web moderno, como por ejemplo, chat en tiempo real, juegos multijugador, o cualquier aplicaciones que requiera actualizaciones en vivo :::
Ejemplo de implementación de Websockets en Node.js
Vamos a ver un ejemplo básico de cómo crear un servidor WebSocket y cómo manejar eventos de conexión y mensajes.
Primero, necesitamos instalar la biblioteca ws en nuestro proyecto Node.js:
npm install wsCreación de un Servidor WebSocket
Ahora vamos a crear un servidor en WebSockets básico en Node.js, que gestione las comunicaciones entrantes de WebSockets.
// Importar el módulo 'ws'
import { WebSocketServer } from 'ws'
// Crear un nuevo servidor WebSocket que escuche en el puerto 3030
const wss = new WebSocketServer({ port: 3030 });
// Evento cuando un cliente se conecta al servidor WebSocket
wss.on('connection', function connection(ws) {
console.log('Cliente conectado');
// Evento para manejar mensajes recibidos del cliente
ws.on('message', function incoming(message) {
console.log('Mensaje recibido: %s', message);
// Enviar un mensaje de vuelta al cliente
ws.send('Mensaje recibido por el servidor: ' + message);
});
// Evento cuando se cierra la conexión con el cliente
ws.on('close', function close() {
console.log('Cliente desconectado');
});
});
console.log('Servidor WebSocket iniciado en ws://localhost:3030')En este ejemplo, creando un servidor WebSocket que escucha en el puerto 8080. Cuando un cliente se conecta (connection), mostramos un mensaje en la consola y configuramos dos manejadores de eventos: uno para mensajes entrantes (message) y otro para cierre de conexión (close).
Cliente Web WebSocket (Frontend)
Creación de un Cliente WebSocket básico
En el lado del cliente, podemos utilizar JavaScript para crear una conexión WebSocket y enviar y recibir mensajes.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cliente WebSocket</title>
</head>
<body>
<script>
const socket = new WebSocket('ws://localhost:3030');
socket.onopen = () => {
console.log('Conexión establecida');
socket.send('¡Hola desde el cliente!');
};
socket.onmessage = (event) => {
console.log('Mensaje recibido:', event.data);
};
socket.onclose = () => {
console.log('Conexión cerrada');
};
</script>
</body>
</html>En este ejemplo de cliente, estamos creando una conexión WebSocket con nuestro servidor en ws://localhost:8080. Cuando la conexión se establece (onopen), enviamos un mensaje al servidor. Luego, cuando recibimos un mensaje del servidor (onmessage), lo mostramos en la consola.
Creación de un Cliente WebSocket (Frontend)
Vamos a ver un ejemplo un pelín más complicado de cliente HTML. Esta página web tendrá un cuadro de entrada para enviar mensajes al servidor y mostrará los mensajes recibidos del servidor.
Aviso, no es la mejor forma de hacer una página web. Como página web sigue siendo muy simple, es sólo un ejemplo. Pero es suficiente para ilustrar el uso de Websockets.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Example</title>
</head>
<body>
<h1>WebSocket Example</h1>
<div id="messages"></div>
<form id="messageForm">
<input type="text" id="messageInput" placeholder="Enter message">
<button type="submit">Send</button>
</form>
<script>
const messages = document.getElementById('messages');
const messageForm = document.getElementById('messageForm');
const messageInput = document.getElementById('messageInput');
const socket = new WebSocket('ws://localhost:3030');
socket.addEventListener('open', () => {
console.log('Connected to WebSocket server');
});
socket.addEventListener('message', (event) => {
const message = event.data;
displayMessage(message);
});
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
});
function displayMessage(message) {
const messageElement = document.createElement('div');
messageElement.innerText = message;
messages.appendChild(messageElement);
}
</script>
</body>
</html>En este ejemplo:
- Esta página HTML contiene un formulario para enviar mensajes al servidor y un área donde se muestran los mensajes recibidos del servidor.
- Se crea una instancia de WebSocket que se conecta al servidor en
ws://localhost:3000. - Cuando se abre la conexión (
open), se imprime un mensaje en la consola. - Cuando llega un mensaje del servidor (
message), se agrega un nuevo elemento de mensaje al área de mensajes. - Cuando se envía el formulario (
submit), se obtiene el valor del campo de entrada, se envía al servidor y se limpia el campo de entrada.
Para probarlo:
- Asegúrate de tener el servidor de WebSockets (
websockets.mjs) ejecutándose en la terminal. - Abre el archivo
index.htmlen un navegador. - Deberías ver una página web con un cuadro de entrada y un botón “Send”.
- Escribe un mensaje en el cuadro de entrada y presiona “Send”.
- Verás que el mensaje se envía al servidor y luego se muestra en la página web como un nuevo mensaje
Descarga el código
Todo el código de esta entrada está disponible para su descarga en Github 