WebSocket en TypeScript: Creación de Aplicaciones en Tiempo Real

WebSocket en TypeScript: creación de aplicaciones en tiempo real

Las aplicaciones web modernas requieren un intercambio instantáneo de datos entre el cliente y el servidor. El protocolo WebSocket proporciona una conexión bidireccional permanente, lo que lo hace ideal para crear chats, sistemas de notificaciones, juegos en línea y otros servicios en tiempo real. En este artículo, analizaremos en detalle cómo trabajar con WebSocket en TypeScript, desde la configuración del servidor hasta la implementación del cliente.

¿Qué es WebSocket y para qué sirve?

WebSocket es un protocolo de comunicación que proporciona un canal full-duplex sobre una única conexión TCP. A diferencia del HTTP tradicional, donde el cliente envía una solicitud y espera una respuesta, WebSocket permite que el servidor inicie de forma independiente el envío de datos al cliente.

Principales ventajas de WebSocket:

• Conexión permanente — no es necesario establecer una nueva conexión para cada solicitud
• Baja latencia — los datos se transmiten instantáneamente sin la sobrecarga de los encabezados HTTP
• Comunicación bidireccional — el servidor puede enviar datos sin una solicitud del cliente
• Eficiencia — menos tráfico en comparación con las soluciones de polling

WebSocket se utiliza ampliamente en aplicaciones financieras (cotizaciones bursátiles), redes sociales (me gusta, comentarios en tiempo real), juegos multijugador, sistemas de monitoreo e IoT.

Configuración del servidor WebSocket en TypeScript

Para crear el servidor, utilizaremos la popular biblioteca ws. Instálela a través de npm:

npm init -ynpm install wsnpm install -D typescript @types/ws @types/nodenpx tsc --init

Creemos el archivo server.ts:

import { WebSocketServer, WebSocket } from 'ws';

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

interface CustomMessage {  type: string;  payload: any;}

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

  // Enviamos un mensaje de bienvenida  const welcomeMessage: CustomMessage = {    type: 'welcome',    payload: { message: '¡Bienvenido al servidor!' }  };  ws.send(JSON.stringify(welcomeMessage));

  // Procesamiento de mensajes entrantes  ws.on('message', (data: Buffer) => {    try {      const message: CustomMessage = JSON.parse(data.toString());            switch (message.type) {        case 'chat':          // Reenviamos el mensaje a todos los clientes conectados          broadcast(message, ws);          break;        case 'ping':          ws.send(JSON.stringify({ type: 'pong', payload: {} }));          break;        default:          console.log('Tipo de mensaje desconocido:', message.type);      }    } catch (error) {      console.error('Error al procesar el mensaje:', error);    }  });

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

  ws.on('error', (error: Error) => {    console.error('Error de WebSocket:', error);  });});

function broadcast(message: CustomMessage, sender: WebSocket) {  wss.clients.forEach((client) => {    if (client !== sender && client.readyState === WebSocket.OPEN) {      client.send(JSON.stringify(message));    }  });}

console.log(`Servidor WebSocket iniciado en ws://localhost:${PORT}`);

Ejecute el servidor con el comando npx ts-node server.ts. El servidor escuchará en el puerto 8080 y procesará las conexiones entrantes.

Creación del cliente WebSocket en TypeScript

La parte del cliente se puede implementar tanto para el navegador como para Node.js. Veamos ambas opciones.

Cliente para navegador

Creemos el archivo client.ts para usar en una aplicación web:

class WebSocketClient {  private socket: WebSocket;  private url: string;

  constructor(url: string) {    this.url = url;    this.socket = new WebSocket(url);  }

  connect() {    this.socket.onopen = () => {      console.log('Conectado al servidor WebSocket');    };

    this.socket.onmessage = (event: MessageEvent) => {      const message = JSON.parse(event.data);      console.log('Mensaje recibido:', message);    };

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

    this.socket.onerror = (error: Event) => {      console.error('Error en la conexión:', error);    };  }

  send(message: object) {    if (this.socket.readyState === WebSocket.OPEN) {      this.socket.send(JSON.stringify(message));    }  }

  disconnect() {    this.socket.close();  }}

// Ejemplo de usoconst client = new WebSocketClient('ws://localhost:8080');client.connect();client.send({ type: 'chat', payload: { text: '¡Hola desde el cliente!' } });

Cliente para Node.js

Para Node.js, también usamos la biblioteca ws:

import WebSocket from 'ws';

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

ws.on('open', () => {  console.log('Conectado al servidor');    // Enviar un mensaje  ws.send(JSON.stringify({    type: 'chat',    payload: { text: '¡Hola desde Node.js!' }  }));});

ws.on('message', (data: WebSocket.Data) => {  const message = JSON.parse(data.toString());  console.log('Mensaje recibido:', message);});

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

ws.on('error', (error: Error) => {  console.error('Error:', error);});

Manejo de errores y reconexión

En aplicaciones reales, es importante manejar los errores y la reconexión automática. Aquí hay un ejemplo de un cliente con reconexión:

class ReconnectingClient {  private ws: WebSocket | null = null;  private url: string;  private reconnectInterval: number = 3000;

  constructor(url: string) {    this.url = url;  }

  connect() {    this.ws = new WebSocket(this.url);

    this.ws.onopen = () => {      console.log('Conectado');    };

    this.ws.onclose = () => {      console.log('Conexión perdida. Reconectando...');      setTimeout(() => this.connect(), this.reconnectInterval);    };

    this.ws.onerror = (error: Event) => {      console.error('Error:', error);      this.ws?.close();    };

    this.ws.onmessage = (event: MessageEvent) => {      console.log('Datos:', event.data);    };  }

  send(data: string) {    if (this.ws?.readyState === WebSocket.OPEN) {      this.ws.send(data);    }  }}

Conclusión

WebSocket en TypeScript proporciona una forma potente y flexible de crear aplicaciones en tiempo real. Con la configuración adecuada del servidor y el cliente, puede implementar fácilmente chats, notificaciones y otros servicios interactivos. TypeScript agrega seguridad de tipos, lo que reduce la probabilidad de errores y mejora la mantenibilidad del código.

Para proyectos más complejos, considere usar bibliotecas como Socket.IO, que proporcionan funciones adicionales como salas, espacios de nombres y reconexión automática. Sin embargo, para aplicaciones que requieren un control total sobre el protocolo, WebSocket puro con TypeScript es la mejor opción.