WebSocket-Bibliothek in TypeScript: ws, Socket.IO und SockJS

WebSocket-Bibliothek TypeScript: vollständiger Überblick für eine Bildungswebsite

WebSocket ist ein Protokoll, das eine bidirektionale Kommunikation in Echtzeit zwischen Client und Server ermöglicht. Im TypeScript-Ökosystem gibt es mehrere beliebte Bibliotheken, die die Arbeit mit WebSocket vereinfachen. In diesem Artikel betrachten wir drei Hauptwerkzeuge: ws, Socket.IO und SockJS, und zeigen, wie man sie in ein Bildungsprojekt mit TypeScript integriert.

Warum ist WebSocket für die Bildung wichtig?

Auf Bildungswebsites werden oft Echtzeitfunktionen benötigt: Chats, gemeinsames Bearbeiten von Code, Benachrichtigungen, Live-Übertragungen. WebSocket vermeidet ständiges Polling des Servers und ermöglicht eine sofortige Datenübertragung. TypeScript fügt Typisierung hinzu, was für die Wartung großer Projekte entscheidend ist.

1. Bibliothek ws – minimalistischer WebSocket für Node.js

ws ist die einfachste und schnellste WebSocket-Bibliothek für die serverseitige Node.js-Entwicklung. Sie eignet sich hervorragend für Fälle, in denen ein reiner WebSocket ohne zusätzliche Funktionen benötigt wird.

Installation

npm install wsnpm install @types/ws --save-dev

Beispielserver in TypeScript

import { WebSocketServer } from 'ws';

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

wss.on('connection', (ws) => {  console.log('Neue Verbindung');

  ws.send('Willkommen auf der Bildungswebsite!');

  ws.on('message', (data) => {    console.log(`Empfangen: ${data}`);    ws.send(`Echo: ${data}`);  });

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

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

Beispielclient in TypeScript

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

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

ws.onmessage = (event) => {  console.log('Nachricht vom Server:', event.data);};

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

Vorteile: minimale Größe, hohe Leistung, vollständige Kontrolle.
Nachteile: keine automatische Wiederverbindung, keine Unterstützung für Räume.

2. Socket.IO – leistungsstarke Bibliothek für Echtzeitanwendungen

Socket.IO ist der De-facto-Standard für Echtzeitanwendungen. Es bietet automatische Wiederverbindung, Räume, Namensräume und Unterstützung für Fallback-Transporte (z. B. Long Polling).

Installation

npm install socket.io socket.io-clientnpm install @types/socket.io --save-dev

Beispielserver in TypeScript

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

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

  socket.on('send_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: socket.id,      message: data.message    });  });

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

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

Beispielclient in TypeScript

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

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

socket.on('connect', () => {  console.log('Mit Server verbunden, ID:', socket.id);  socket.emit('join_room', 'javascript-lesson');});

socket.on('new_message', (data) => {  console.log(`${data.user}: ${