WebSockets in TypeScript: Echtzeitanwendungen von Grund auf erstellen

Warum WebSockets die Magie der Echtzeit sind?

Stellen Sie sich vor, Sie öffnen einen Support-Chat, senden eine Nachricht und... warten. Eine Sekunde, zwei, fünf. Kommt Ihnen bekannt vor? Das ist die klassische HTTP-Anfrage: Sie fragen, der Server antwortet. Aber was, wenn der Server selbst etwas sagen möchte? Zum Beispiel eine neue Bestellung im CRM oder eine Stimme in einem Online-Spiel? Hier versagt HTTP – es benötigt ein ständiges Ping-Pong.

WebSockets lösen dieses Problem grundlegend. Sie schaffen einen permanenten bidirektionalen Kanal zwischen Client und Server. Einmaliger „Handschlag“ – und die Daten fliegen sofort in beide Richtungen. Kein unnötiger Traffic, keine Verzögerungen. Nur pure Echtzeit-Magie.

In diesem Artikel bauen wir mit TypeScript eine vollwertige Echtzeitanwendung. Wir lernen, wie man mit einem WebSocket-Server auf Node.js arbeitet, richten den Client ein und fügen sogar eine Fehlerbehandlung hinzu. Am Ende können Sie Ihren eigenen Chat, ein Benachrichtigungssystem oder ein Mehrspieler-Spiel schreiben.

Was sind WebSockets und warum werden sie benötigt?

WebSocket ist ein Protokoll über TCP, das eine dauerhafte Verbindung zwischen Browser und Server herstellt. Im Gegensatz zu HTTP, bei dem jede Anfrage eine Verbindung öffnet und schließt, hält WebSocket sie offen.

Wo ist das kritisch?

\n
• Chats und Messenger – Nachrichten kommen ohne Verzögerung an.
\n
• Online-Spiele – Spielerpositionen werden in Echtzeit aktualisiert.
\n
• Börsenkurse – Preise ändern sich jede Millisekunde.
\n
• Gemeinsames Bearbeiten – wie Google Docs.
\n

TypeScript fügt dem eine strenge Typisierung hinzu. Sie senden nicht versehentlich einen String statt einer Zahl – der Compiler fängt den Fehler bereits in der Entwicklungsphase. Das schützt vor Bugs in der Produktion.

Projekteinrichtung: Node.js + TypeScript + WebSocket

Beginnen wir mit der Initialisierung. Stellen Sie sicher, dass Node.js (Version 18+) und npm installiert sind.

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

Aktivieren Sie in der tsconfig.json den strikten Modus und geben Sie outDir: "./dist" an. Das ist die Basis für jedes TypeScript-Projekt.

WebSocket-Server in TypeScript schreiben

Erstellen Sie die Datei server.ts. Hier starten wir den WebSocket-Server auf Port 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(`Client verbunden: ${ws.id}`);\n\n    ws.on('message', (data: Buffer) => {\n        const message = data.toString();\n        console.log(`Empfangen: ${message}`);\n\n        // An alle außer dem Absender senden\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(`Client getrennt: ${ws.id}`);\n    });\n\n    ws.send('Willkommen im Chat!');\n});\n\nfunction generateId(): string {\n    return Math.random().toString(36).substring(2, 9);\n}\n\nconsole.log('Server gestartet auf ws://localhost:8080');

Lassen Sie uns die wichtigsten Punkte durchgehen:

\n
• WebSocketServer – erstellt den Server.
\n
• connection – Ereignis beim Verbinden eines neuen Clients.
\n
• message – empfängt Daten vom Client.
\n
• send – sendet Daten zurück.
\n

Starten Sie den Server mit dem Befehl npx ts-node server.ts. Er lauscht auf Port 8080.

Clientseite: Verbindung zum WebSocket herstellen

Jetzt erstellen wir client.ts. Dies wird ein einfaches Skript, das sich mit dem Server verbindet und Nachrichten sendet.