WebSocket-Bibliotheken für TypeScript: ws, Socket.IO, uWebSockets.js

WebSocket-Bibliotheken für TypeScript: vollständiger Überblick und praktische Beispiele

In der modernen Webentwicklung ist die WebSocket-Technologie zum Standard für die Erstellung von Echtzeit-Anwendungen (Real-Time) geworden. Dank der permanenten bidirektionalen Verbindung zwischen Client und Server eignet sich WebSocket ideal für Chats, Online-Spiele, Börsenhändler, Überwachungssysteme und alle anderen Projekte, die eine sofortige Datenübertragung erfordern. In diesem Artikel betrachten wir im Detail die drei wichtigsten WebSocket-Bibliotheken für TypeScript: ws, Socket.IO und uWebSockets.js, einschließlich ihrer Installation, Konfiguration und Codebeispiele.

1. Die Bibliothek ws – leicht und schnell für Node.js

Die Bibliothek ws ist die beliebteste und minimalistischste Implementierung des WebSocket-Protokolls für Node.js. Sie fügt keine zusätzlichen Abstraktionen hinzu, arbeitet direkt mit dem nativen Protokoll und bietet maximale Leistung. TypeScript wird über Typen unterstützt, die separat installiert werden können.

Installation

npm install wsnpm install -D @types/ws

Beispiel eines einfachen Servers in TypeScript

import { WebSocketServer, WebSocket } from 'ws';

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

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

  ws.on('message', (message: Buffer) => {    console.log('Nachricht erhalten:', message.toString());    // Antwort an alle verbundenen Clients senden    wss.clients.forEach((client) => {      if (client.readyState === WebSocket.OPEN) {        client.send(`Echo: ${message.toString()}`);      }    });  });

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

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

Client-Code (Browser)

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);};

Vorteile: minimaler Overhead, vollständige Kontrolle über das Protokoll, ideal für hochbelastete Systeme.

Nachteile: keine integrierte Unterstützung für Räume, automatische Wiederverbindung oder Fallback auf HTTP-Transport.

2. Socket.IO – universelle Lösung mit umfangreicher API

Socket.IO ist nicht nur ein WebSocket, sondern ein vollwertiges Framework für Echtzeit-Kommunikation. Es verwendet WebSocket als primären Transport, wechselt aber automatisch auf HTTP Long-Polling, wenn WebSocket nicht verfügbar ist (z. B. hinter einem Proxy oder in älteren Browsern). Socket.IO bietet fertige Mechanismen: Räume, Namensräume (Namespaces), automatische Wiederverbindung, Bestätigung des Nachrichtenempfangs (Acknowledgements) und vieles mehr.

Installation

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

Beispiel eines Servers mit Räumen in TypeScript

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

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

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

  // Beitritt zu einem Raum  socket.on('join_room', (roomName: string) => {    socket.join(roomName);    socket.to(roomName).emit('user_joined', socket.id);  });

  // Nachricht an einen Raum senden  socket.on('room_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: socket.id,      text: data.message    });  });

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

server.listen(3000, () => {  console.log('Socket.IO-Server gestartet auf Port