WebSocket auf TypeScript: Echtzeit-Anwendungen erstellen

WebSocket auf TypeScript: Echtzeit-Anwendungen erstellen

Moderne Webanwendungen erfordern zunehmend eine sofortige Datenübertragung zwischen Client und Server. Die WebSocket-Technologie hat sich zum Standard für die Erstellung von Echtzeit-Anwendungen entwickelt – von Chats und Benachrichtigungen bis hin zu Online-Spielen und Handelsplattformen. In diesem Artikel werden wir untersuchen, wie man WebSocket auf TypeScript verwendet, und Codebeispiele für die Erstellung einer vollwertigen Echtzeit-Anwendung zeigen.

Was ist WebSocket und warum TypeScript?

WebSocket ist ein Protokoll, das eine permanente bidirektionale Verbindung zwischen Client und Server bereitstellt. Im Gegensatz zu HTTP, bei dem der Client eine Anfrage sendet und eine Antwort erhält, ermöglicht WebSocket beiden Seiten, jederzeit die Datenübertragung zu initiieren. Dies ist ideal für Echtzeit-Anwendungen, bei denen eine niedrige Latenz wichtig ist.

TypeScript fügt JavaScript eine statische Typisierung hinzu, was für Projekte mit WebSocket entscheidend ist. Typen helfen, Fehler bei der Nachrichtenverarbeitung zu vermeiden und machen den Code vorhersagbarer. Beispielsweise können Sie eine Schnittstelle für eingehende und ausgehende Nachrichten definieren:

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

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

Dieser Ansatz vereinfacht das Debugging und die Wartung des Codes erheblich.

Einrichtung eines WebSocket-Servers auf TypeScript

Zum Erstellen des Servers verwenden wir die Bibliothek ws – eine beliebte WebSocket-Implementierung für Node.js. Installieren wir die Abhängigkeiten:

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

Erstellen wir die Datei server.ts:

import { WebSocketServer, WebSocket } from 'ws';

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

wss.on('connection', (ws: WebSocket, req) => {    console.log('Neuer Client verbunden');

    // Sende eine Willkommensnachricht    ws.send(JSON.stringify({        type: 'system',        message: 'Willkommen im Chat!'    }));

    // Verarbeite eingehende Nachrichten    ws.on('message', (data: Buffer) => {        try {            const message = JSON.parse(data.toString());            console.log('Empfangen:', message);

            // Sende die Nachricht an alle verbundenen Clients            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: 'Ungültiges Nachrichtenformat'            }));        }    });

    ws.on('close', () => {        console.log('Client getrennt');    });});

console.log('WebSocket-Server gestartet auf ws://localhost:8080');

Starten Sie den Server mit dem Befehl npx ts-node server.ts. Der Server ist bereit, Verbindungen anzunehmen und Nachrichten zu übertragen.

WebSocket-Client auf TypeScript

Jetzt erstellen wir den Client-Teil. TypeScript funktioniert hervorragend im Browser, daher schreiben wir den Client in reinem TypeScript, der in JavaScript kompiliert wird.

Datei 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);        this.socket.onopen = () => {            console.log('Verbindung zum Server hergestellt');        };

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

        this.socket.onerror = (error: Event) => {            console.error('WebSocket-Fehler:', error);        };

        this.socket.onclose = () => {            console.log('Verbindung geschlossen');        };    }

    sendMessage(message: ChatMessage): void {        if (this.socket.readyState === WebSocket.OPEN) {            this.socket.send(JSON.stringify(message));        } else {            console.error('Verbindung nicht offen');        }    }

    close(): void {        this.socket.close();    }}

// Verwendungconst client = new WebSocketClient('ws://localhost:8080');client.sendMessage({    type: 'message',    user: 'Benutzer1',    text: 'Hallo zusammen!',    timestamp: Date.now()});

Dieser Client stellt eine Verbindung zum Server her, empfängt Nachrichten und kann Nachrichten senden. TypeScript stellt sicher, dass alle Nachrichten der ChatMessage-Schnittstelle entsprechen, was Fehler zur Laufzeit reduziert.