Socket.io für JavaScript (Node.js): Vollständiger Leitfaden mit Beispielen

Was ist Socket.io und wozu wird es benötigt?

Socket.io ist eine leistungsstarke JavaScript-Bibliothek, die eine Echtzeit (Real-time) bidirektionale Kommunikation zwischen Client (Browser) und Server (Node.js) ermöglicht. Im Gegensatz zum traditionellen HTTP-Protokoll, bei dem der Client eine Anfrage sendet und auf eine Antwort wartet, erlaubt Socket.io dem Server, jederzeit eigenständig Daten an den Client zu senden, und umgekehrt.

Wozu wird das benötigt? Stellen Sie sich eine Chat-Anwendung, ein Online-Spiel, ein Dashboard mit Live-Diagrammen oder ein System zur gemeinsamen Dokumentenbearbeitung vor. In all diesen Szenarien müssen Daten sofort aktualisiert werden, ohne die Seite neu zu laden. HTTP ist dafür ungeeignet, da es nach dem "Anfrage-Antwort"-Prinzip funktioniert. Socket.io löst dieses Problem, indem es eine dauerhafte Verbindung (in der Regel über WebSocket) herstellt, über die Daten jederzeit in beide Richtungen übertragen werden können.

Wichtige Funktionen von Socket.io:

\n
• Bidirektionalität: Server und Client können sich gegenseitig Nachrichten senden.
\n
• Echtzeit: Nachrichten werden sofort (mit minimaler Verzögerung) zugestellt.
\n
• Automatische Wiederverbindung: Wenn die Verbindung abbricht, versucht Socket.io selbstständig, sie wiederherzustellen.
\n
• Räume (Rooms): Möglichkeit, Clients zu gruppieren und Nachrichten nur an eine bestimmte Gruppe zu senden.
\n
• Namensräume (Namespaces): Aufteilung der Anwendung in unabhängige Kommunikationskanäle.
\n
• Zuverlässigkeit: Wenn WebSocket nicht unterstützt wird, wechselt Socket.io automatisch auf andere Methoden (Long-Polling, FlashSocket usw.).
\n

Installation von Socket.io

Socket.io besteht aus zwei Teilen: dem Server-Teil (für Node.js) und dem Client-Teil (für den Browser). Beide werden über npm installiert.

Installation des Server-Teils

Öffnen Sie ein Terminal im Ordner Ihres Projekts und führen Sie den Befehl aus:

npm install socket.io

Installation des Client-Teils

Das Client-Skript kann auf zwei Arten eingebunden werden:

1. Über CDN (am einfachsten für den Anfang):

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

2. Über npm (für Projekte mit Bundlern wie Webpack):

npm install socket.io-client

Schnellstart: Erster Chat

Lassen Sie uns einen einfachen Chat erstellen, bei dem Nachrichten eines Clients von allen anderen gesehen werden.

Schritt 1: Server (Datei server.js)

// server.js\nconst http = require('http');\nconst { Server } = require("socket.io");\n\n// 1. HTTP-Server erstellen\nconst server = http.createServer((req, res) => {\n    res.writeHead(200, { 'Content-Type': 'text/plain' });\n    res.end('Socket.io-Server läuft');\n});\n\n// 2. Socket.io-Instanz erstellen, an den Server gebunden\nconst io = new Server(server);\n\n// 3. Handler für die Verbindung eines neuen Clients\nio.on('connection', (socket) => {\n    console.log('Neuer Benutzer verbunden:', socket.id);\n\n    // 4. Auf das Ereignis 'chat message' vom Client hören\n    socket.on('chat message', (msg) => {\n        console.log('Nachricht:', msg);\n        // 5. Nachricht an ALLE verbundenen Clients senden (einschließlich des Absenders)\n        io.emit('chat message', msg);\n    });\n\n    // 6. Handler für die Trennung des Clients\n    socket.on('disconnect', () => {\n        console.log('Benutzer getrennt:', socket.id);\n    });\n});\n\n// 7. Server auf Port 3000 starten\nserver.listen(3000, () => {\n    console.log('Server gestartet auf http://localhost:3000');\n});\n

Schritt 2: Client (Datei index.html)

<!DOCTYPE html>\n<html>\n<head>\n    <title>Socket.io Chat</title>\n    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>