WebSocket en TypeScript: creando aplicaciones en tiempo real

WebSocket en TypeScript: Creando aplicaciones en tiempo real

Las aplicaciones web modernas requieren cada vez más una transferencia instantánea de datos entre el cliente y el servidor. La tecnología WebSocket se ha convertido en el estándar para crear aplicaciones en tiempo real, desde chats y notificaciones hasta juegos en línea y plataformas de trading. En este artículo, analizaremos cómo usar WebSocket en TypeScript y mostraremos ejemplos de código para crear una aplicación completa en tiempo real.

¿Qué es WebSocket y por qué TypeScript?

WebSocket es un protocolo que proporciona una conexión bidireccional permanente entre el cliente y el servidor. A diferencia de HTTP, donde el cliente envía una solicitud y recibe una respuesta, WebSocket permite que ambas partes inicien la transferencia de datos en cualquier momento. Esto es ideal para aplicaciones en tiempo real donde la baja latencia es crucial.

TypeScript añade tipado estático a JavaScript, lo cual es crítico para proyectos con WebSocket. Los tipos ayudan a evitar errores al procesar mensajes y hacen que el código sea más predecible. Por ejemplo, puedes definir una interfaz para los mensajes entrantes y salientes:

interface ChatMessage {
    type: 'message' | 'join' | 'leave';
    user: string;
    text?: string;
    timestamp: number;
}

interface ServerResponse {
    status: 'ok' | 'error';
    data?: ChatMessage;
    error?: string;
}

Este enfoque simplifica enormemente la depuración y el mantenimiento del código.

Configuración del servidor WebSocket en TypeScript

Para crear el servidor, usaremos la librería ws, una implementación popular de WebSocket para Node.js. Instalemos las dependencias:

npm init -y
npm install ws @types/ws typescript @types/node
npx tsc --init

Creemos el archivo server.ts:

import { WebSocketServer, WebSocket } from 'ws';

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

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

    // Enviamos un mensaje de bienvenida
    ws.send(JSON.stringify({
        type: 'system',
        message: '¡Bienvenido al chat!'
    }));

    // Procesamos los mensajes entrantes
    ws.on('message', (data: Buffer) => {
        try {
            const message = JSON.parse(data.toString());
            console.log('Recibido:', message);

            // Reenviamos el mensaje a todos los clientes conectados
            wss.clients.forEach((client) => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(JSON.stringify({
                        type: 'broadcast',
                        user: message.user,
                        text: message.text,
                        timestamp: Date.now()
                    }));
                }
            });
        } catch (error) {
            ws.send(JSON.stringify({
                type: 'error',
                message: 'Formato de mensaje incorrecto'
            }));
        }
    });

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

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

Ejecuta el servidor con el comando npx ts-node server.ts. El servidor está listo para aceptar conexiones y transmitir mensajes.

Cliente WebSocket en TypeScript

Ahora creemos la parte del cliente. TypeScript funciona muy bien en el navegador, por lo que escribiremos un cliente en TypeScript puro que se compilará a JavaScript.

Archivo client.ts:

interface ChatMessage {
    type: string;
    user?: string;
    text?: string;
    message?: string;
    timestamp?: number;
}

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

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