Biblioteca WebSocket en TypeScript: ws, Socket.IO y SockJS

Biblioteca WebSocket TypeScript: descripción completa para un sitio educativo

WebSocket es un protocolo que permite la comunicación bidireccional en tiempo real entre el cliente y el servidor. En el ecosistema de TypeScript existen varias bibliotecas populares que facilitan el trabajo con WebSocket. En este artículo, analizaremos tres herramientas principales: ws, Socket.IO y SockJS, y mostraremos cómo integrarlas en un proyecto educativo con TypeScript.

¿Por qué es importante WebSocket para la educación?

En los sitios educativos a menudo se requieren funciones en tiempo real: chats, edición colaborativa de código, notificaciones, transmisiones en vivo. WebSocket evita la necesidad de sondear constantemente el servidor y garantiza una transmisión instantánea de datos. TypeScript añade tipado, lo cual es fundamental para el mantenimiento de proyectos grandes.

1. Biblioteca ws — WebSocket minimalista para Node.js

ws es la biblioteca WebSocket más simple y rápida para el lado del servidor en Node.js. Es ideal para casos donde se necesita un WebSocket puro sin funcionalidades adicionales.

Instalación

npm install wsnpm install @types/ws --save-dev

Ejemplo de servidor en TypeScript

import { WebSocketServer } from 'ws';

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

wss.on('connection', (ws) => {  console.log('Nueva conexión');

  ws.send('¡Bienvenido al sitio educativo!');

  ws.on('message', (data) => {    console.log(`Recibido: ${data}`);    ws.send(`Eco: ${data}`);  });

  ws.on('close', () => {    console.log('Cliente desconectado');  });});

console.log('Servidor WebSocket iniciado en ws://localhost:8080');

Ejemplo de cliente en TypeScript

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

ws.onopen = () => {  console.log('Conectado al servidor');  ws.send('¡Hola, servidor!');};

ws.onmessage = (event) => {  console.log('Mensaje del servidor:', event.data);};

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

Ventajas: tamaño mínimo, alto rendimiento, control total.
Desventajas: no tiene reconexión automática, no admite salas.

2. Socket.IO — potente biblioteca para aplicaciones en tiempo real

Socket.IO es el estándar de facto para aplicaciones en tiempo real. Proporciona reconexión automática, salas, espacios de nombres y soporte para transportes alternativos (por ejemplo, long polling).

Instalación

npm install socket.io socket.io-clientnpm install @types/socket.io --save-dev

Ejemplo de servidor en TypeScript

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);

  socket.on('join_room', (roomName: string) => {    socket.join(roomName);    socket.to(roomName).emit('user_joined', socket.id);  });

  socket.on('send_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: 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');});

Ejemplo de cliente en TypeScript

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

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

socket.on('connect', () => {  console.log('Conectado al servidor, ID:', socket.id);  socket.emit('join_room', 'javascript-lesson');});

socket.on('new_message', (data) => {  console.log(`${data.user}: ${