WebSockets en TypeScript: Creando aplicaciones en tiempo real desde cero

¿Por qué WebSockets es la magia del tiempo real?

Imagina que abres un chat de soporte, envías un mensaje y... esperas. Un segundo, dos, cinco. ¿Te suena familiar? Es la clásica solicitud HTTP: tú pides, el servidor responde. ¿Y si el servidor quiere decir algo por sí mismo? Por ejemplo, un nuevo pedido en el CRM o un movimiento en un juego en línea. Aquí HTTP falla: necesita un ping-pong constante.

WebSockets resuelve este problema de forma radical. Crea un canal bidireccional permanente entre el cliente y el servidor. Un único "apretón de manos" y los datos vuelan en ambas direcciones al instante. Sin tráfico innecesario, sin demoras. Solo la magia pura del tiempo real.

En este artículo, construiremos una aplicación completa en tiempo real con TypeScript. Aprenderemos a trabajar con un servidor WebSocket en Node.js, configuraremos el cliente e incluso añadiremos manejo de errores. Al final, podrás escribir tu propio chat, sistema de notificaciones o juego multijugador.

¿Qué son WebSockets y para qué sirven?

WebSocket es un protocolo sobre TCP que proporciona una conexión permanente entre el navegador y el servidor. A diferencia de HTTP, donde cada solicitud abre y cierra la conexión, WebSocket la mantiene abierta.

¿Dónde es crítico?

\n
• Chats y mensajería — los mensajes llegan sin demora.
\n
• Juegos en línea — las posiciones de los jugadores se actualizan en tiempo real.
\n
• Cotizaciones bursátiles — los precios cambian cada milisegundo.
\n
• Edición colaborativa — como Google Docs.
\n

TypeScript añade a esto una tipificación estricta. No enviarás accidentalmente una cadena en lugar de un número: el compilador detectará el error en la etapa de desarrollo. Esto evita errores en producción.

Configuración del proyecto: Node.js + TypeScript + WebSocket

Empecemos con la inicialización. Asegúrate de tener instalados Node.js (versión 18+) y npm.

mkdir websocket-ts-chat\ncd websocket-ts-chat\nnpm init -y\nnpm install ws @types/ws typescript ts-node @types/node\nnpx tsc --init

En tsconfig.json, activa el modo estricto y especifica outDir: "./dist". Esto es la base para cualquier proyecto TypeScript.

Escribiendo el servidor WebSocket en TypeScript

Crea el archivo server.ts. Aquí levantaremos el servidor WebSocket en el puerto 8080.

import { WebSocketServer, WebSocket } from 'ws';\n\nconst wss = new WebSocketServer({ port: 8080 });\n\ninterface CustomWebSocket extends WebSocket {\n    id: string;\n    username?: string;\n}\n\nwss.on('connection', (ws: CustomWebSocket) => {\n    ws.id = generateId();\n    console.log(`Cliente conectado: ${ws.id}`);\n\n    ws.on('message', (data: Buffer) => {\n        const message = data.toString();\n        console.log(`Recibido: ${message}`);\n\n        // Reenviar a todos excepto al remitente\n        wss.clients.forEach((client) => {\n            if (client !== ws && client.readyState === WebSocket.OPEN) {\n                client.send(`[${ws.id}]: ${message}`);\n            }\n        });\n    });\n\n    ws.on('close', () => {\n        console.log(`Cliente desconectado: ${ws.id}`);\n    });\n\n    ws.send('¡Bienvenido al chat!');\n});\n\nfunction generateId(): string {\n    return Math.random().toString(36).substring(2, 9);\n}\n\nconsole.log('Servidor iniciado en ws://localhost:8080');

Analicemos los puntos clave:

\n
• WebSocketServer — crea el servidor.
\n
• connection — evento al conectar un nuevo cliente.
\n
• message — recibimos datos del cliente.
\n
• send — enviamos datos de vuelta.
\n

Ejecuta el servidor con el comando npx ts-node server.ts. Escuchará en el puerto 8080.

Parte del cliente: conectándose al WebSocket

Ahora crearemos client.ts. Será un script simple que se conecta al servidor y envía un