WebSocket in TypeScript: Erstellung von Echtzeit-Anwendungen

WebSocket auf TypeScript: Erstellung von Echtzeit-Anwendungen

Moderne Webanwendungen erfordern einen sofortigen Datenaustausch zwischen Client und Server. Das WebSocket-Protokoll stellt eine permanente bidirektionale Verbindung her, was es ideal für die Erstellung von Chats, Benachrichtigungssystemen, Online-Spielen und anderen Echtzeit-Diensten macht. In diesem Artikel werden wir detailliert besprechen, wie man mit WebSocket auf TypeScript arbeitet – von der Serverkonfiguration bis zur Client-Implementierung.

Was ist WebSocket und warum wird es benötigt?

WebSocket ist ein Kommunikationsprotokoll, das einen Vollduplex-Kanal über eine einzige TCP-Verbindung bereitstellt. Im Gegensatz zu traditionellem HTTP, bei dem der Client eine Anfrage sendet und auf eine Antwort wartet, ermöglicht WebSocket dem Server, eigenständig das Senden von Daten an den Client zu initiieren.

Die wichtigsten Vorteile von WebSocket:

• Permanente Verbindung – es muss keine neue Verbindung für jede Anfrage aufgebaut werden
• Niedrige Latenz – Daten werden sofort ohne den Overhead von HTTP-Headern übertragen
• Bidirektionale Kommunikation – der Server kann Daten ohne Anfrage vom Client senden
• Effizienz – weniger Datenverkehr im Vergleich zu Polling-Lösungen

WebSocket wird häufig in Finanzanwendungen (Börsenkurse), sozialen Netzwerken (Likes, Echtzeit-Kommentare), Mehrspieler-Spielen, Überwachungssystemen und IoT eingesetzt.

Einrichtung eines WebSocket-Servers auf TypeScript

Für die Erstellung des Servers verwenden wir die beliebte Bibliothek ws. Installieren Sie sie über npm:

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

Erstellen wir die Datei 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('Neuer Client hat sich verbunden');

  // Sende eine Willkommensnachricht  const welcomeMessage: CustomMessage = {    type: 'welcome',    payload: { message: 'Willkommen auf dem Server!' }  };  ws.send(JSON.stringify(welcomeMessage));

  // Verarbeitung eingehender Nachrichten  ws.on('message', (data: Buffer) => {    try {      const message: CustomMessage = JSON.parse(data.toString());            switch (message.type) {        case 'chat':          // Sende die Nachricht an alle verbundenen Clients          broadcast(message, ws);          break;        case 'ping':          ws.send(JSON.stringify({ type: 'pong', payload: {} }));          break;        default:          console.log('Unbekannter Nachrichtentyp:', message.type);      }    } catch (error) {      console.error('Fehler bei der Verarbeitung der Nachricht:', error);    }  });

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

  ws.on('error', (error: Error) => {    console.error('WebSocket-Fehler:', 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(`WebSocket-Server gestartet auf ws://localhost:${PORT}`);

Starten Sie den Server mit dem Befehl npx ts-node server.ts. Der Server hört auf Port 8080 und verarbeitet eingehende Verbindungen.

Erstellung eines WebSocket-Clients auf TypeScript

Die Client-Seite kann sowohl für den Browser als auch für Node.js implementiert werden. Betrachten wir beide Varianten.

Browser-Client

Erstellen wir die Datei client.ts für die Verwendung in einer Webanwendung:

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

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

  connect(): void {    this.socket.onopen = () => {      console.log('Verbindung zum Server hergestellt');    };

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

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

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

  sendMessage(type: string, payload: any): void {    const message = { type, payload };    this.socket.send(JSON.stringify(message));  }

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

// Verwendungconst client = new WebSocketClient('ws://localhost:8080');client.connect();client.sendMessage('chat', { text: 'Hallo Server!' });

Node.js-Client

Für Node.js installieren Sie die Bibliothek ws und erstellen Sie die Datei node-client.ts:

import WebSocket from 'ws';

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

ws.on('open', () => {  console.log('Mit Server verbunden');    // Sende eine Nachricht  ws.send(JSON.stringify({ type: 'chat', payload: { text: 'Hallo vom Node.js-Client!' } }));});

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

ws.on('close', () => {  console.log('Verbindung geschlossen');});

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

Führen Sie den Node.js-Client mit npx ts-node node-client.ts aus.

Fehlerbehandlung und Wiederherstellung der Verbindung

In realen Anwendungen ist es wichtig, Verbindungsabbrüche zu behandeln. Fügen Sie dem Client eine automatische Wiederverbindungslogik hinzu:

class ReconnectingWebSocketClient {  private socket: WebSocket | null = null;  private url: string;  private reconnectInterval: number = 3000;

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

  connect(): void {    this.socket = new WebSocket(this.url);

    this.socket.onopen = () => {      console.log('Verbunden');    };

    this.socket.onclose = () => {      console.log('Verbindung getrennt. Versuche erneute Verbindung in ' + this.reconnectInterval + 'ms...');      setTimeout(() => this.connect(), this.reconnectInterval);    };

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

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

  send(data: string): void {    if (this.socket && this.socket.readyState === WebSocket.OPEN) {      this.socket.send(data);    } else {      console.error('Socket ist nicht verbunden');    }  }}

Fazit

WebSocket auf TypeScript bietet eine leistungsstarke und typsichere Möglichkeit, Echtzeitanwendungen zu erstellen. Die Kombination aus der TypeScript-Typprüfung und der Effizienz von WebSocket macht diese Technologie zu einer ausgezeichneten Wahl für moderne interaktive Webdienste. Experimentieren Sie mit verschiedenen Nachrichtentypen, implementieren Sie Räume für Gruppenchats und fügen Sie Authentifizierung hinzu, um die Funktionalität Ihrer Anwendung zu erweitern.