Bibliotecas WebSocket TypeScript: ws y Socket.IO – guía completa

Bibliotecas WebSocket TypeScript: ws y Socket.IO

WebSocket es un protocolo que proporciona comunicación bidireccional en tiempo real entre cliente y servidor. En el ecosistema TypeScript/Node.js, las bibliotecas más populares para trabajar con WebSocket son ws (ligera) y Socket.IO (con funcionalidades adicionales). En este artículo, analizaremos en detalle ambas bibliotecas, su instalación, uso básico y ejemplos de código en TypeScript.

1. Biblioteca ws

ws es una biblioteca WebSocket minimalista y rápida para Node.js, totalmente compatible con TypeScript. Proporciona una API WebSocket limpia sin abstracciones innecesarias.

Instalación

npm install wsnpm install -D @types/ws

Creación de un servidor WebSocket en TypeScript

import { WebSocketServer, WebSocket } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws: WebSocket) => {  console.log('Cliente conectado');

  // Enviar mensaje al cliente  ws.send('¡Bienvenido!');

  // Manejar mensajes entrantes  ws.on('message', (data: Buffer) => {    const message = data.toString();    console.log(`Recibido: ${message}`);

    // Enviar respuesta a todos los clientes conectados    wss.clients.forEach((client) => {      if (client.readyState === WebSocket.OPEN) {        client.send(`Eco: ${message}`);      }    });  });

  // Manejar cierre de conexión  ws.on('close', () => {    console.log('Cliente desconectado');  });});

console.log('Servidor WebSocket iniciado en el puerto 8080');

Código del cliente en TypeScript

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {  console.log('Conexión establecida');  ws.send('¡Hola, servidor!');};

ws.onmessage = (event: MessageEvent) => {  console.log(`Respuesta del servidor: ${event.data}`);};

ws.onclose = () => {  console.log('Conexión cerrada');};

2. Biblioteca Socket.IO

Socket.IO es una biblioteca de más alto nivel construida sobre WebSocket. Añade:

• Reconexión automática en caso de pérdida de conexión
• Soporte para salas y espacios de nombres (namespaces)
• Mecanismo de fallback (cambio a HTTP long-polling si WebSocket no está disponible)
• Soporte integrado para eventos (events)

Instalación

npm install socket.io socket.io-clientnpm install -D @types/socket.io @types/socket.io-client

Servidor en TypeScript con Socket.IO

import { Server } from 'socket.io';import http from 'http';

const server = http.createServer();const io = new Server(server, {  cors: {    origin: '*',    methods: ['GET', 'POST']  }});

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

  // Unirse a una sala  socket.on('join_room', (room: string) => {    socket.join(room);    console.log(`Socket ${socket.id} se unió a la sala ${room}`);  });

  // Manejar evento personalizado  socket.on('chat_message', (data: { room: string; message: string }) => {    // Enviar mensaje a todos en la sala excepto al remitente    socket.to(data.room).emit('chat_message', {      userId: socket.id,      message: data.message    });  });

  socket.on('disconnect', () => {    console.log(`Usuario desconectado: ${socket.id}`);  });});

server.listen(3000, () => {  console.log('Servidor Socket.IO iniciado en el puerto 3000');});

Cliente en TypeScript con Socket.IO

import { io, Socket } from 'socket.io-client';

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

socket.on('connect', () => {  console.log('Conectado al servidor');

  // Unirse a una sala  socket.emit('join_room', 'room_1');});

socket.on('chat_message', (data: { us