WebSocket-Bibliotheken für TypeScript: ws und Socket.IO – vollständiger Leitfaden

WebSocket-Bibliotheken für TypeScript: ws und Socket.IO

WebSocket ist ein Protokoll, das eine bidirektionale Echtzeitkommunikation zwischen Client und Server ermöglicht. Im TypeScript/Node.js-Ökosystem sind die beliebtesten Bibliotheken für die Arbeit mit WebSocket ws (leichtgewichtig) und Socket.IO (mit zusätzlichen Funktionen). In diesem Artikel werden wir beide Bibliotheken, ihre Installation, grundlegende Verwendung und Codebeispiele in TypeScript im Detail betrachten.

1. Die ws-Bibliothek

ws ist eine minimalistische und schnelle WebSocket-Bibliothek für Node.js, die vollständig mit TypeScript kompatibel ist. Sie bietet eine reine WebSocket-API ohne überflüssige Abstraktionen.

Installation

npm install wsnpm install -D @types/ws

Erstellen eines WebSocket-Servers in TypeScript

import { WebSocketServer, WebSocket } from 'ws';

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

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

  // Nachricht an den Client senden  ws.send('Willkommen!');

  // Eingehende Nachrichten verarbeiten  ws.on('message', (data: Buffer) => {    const message = data.toString();    console.log(`Empfangen: ${message}`);

    // Antwort an alle verbundenen Clients senden    wss.clients.forEach((client) => {      if (client.readyState === WebSocket.OPEN) {        client.send(`Echo: ${message}`);      }    });  });

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

console.log('WebSocket-Server läuft auf Port 8080');

Client-Code in TypeScript

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

ws.onopen = () => {  console.log('Verbindung hergestellt');  ws.send('Hallo, Server!');};

ws.onmessage = (event: MessageEvent) => {  console.log(`Antwort vom Server: ${event.data}`);};

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

2. Die Socket.IO-Bibliothek

Socket.IO ist eine höherwertige Bibliothek, die auf WebSocket aufbaut. Sie fügt hinzu:

• Automatische Wiederverbindung bei Verbindungsabbruch
• Unterstützung für Räume und Namensräume (namespaces)
• Fallback-Mechanismus (Wechsel zu HTTP long-polling, wenn WebSocket nicht verfügbar ist)
• Integrierte Ereignisunterstützung (events)

Installation

npm install socket.io socket.io-clientnpm install -D @types/socket.io @types/socket.io-client

Server in TypeScript mit Socket.IO

import { Server } from 'socket.io';import http from 'http';

const server = http.createServer();const io = new Server(server, {  cors: {    origin: '*',    methods: ['GET', 'POST']  }});

io.on('connection', (socket) => {  console.log(`Benutzer verbunden: ${socket.id}`);

  // Raum beitreten  socket.on('join_room', (room: string) => {    socket.join(room);    console.log(`Socket ${socket.id} ist Raum ${room} beigetreten`);  });

  // Benutzerdefiniertes Ereignis verarbeiten  socket.on('chat_message', (data: { room: string; message: string }) => {    // Nachricht an alle im Raum senden, außer an den Absender    socket.to(data.room).emit('chat_message', {      userId: socket.id,      message: data.message    });  });

  socket.on('disconnect', () => {    console.log(`Benutzer getrennt: ${socket.id}`);  });});

server.listen(3000, () => {  console.log('Socket.IO-Server läuft auf Port 3000');});

Client in TypeScript mit Socket.IO

import { io, Socket } from 'socket.io-client';

const socket: Socket = io('http://localhost:3000');

socket.on('connect', () => {  console.log('Mit Server verbunden');

  // Raum beitreten  socket.emit('join_room', 'room_1');});

socket.on('chat_message', (data: { us