WebSockets in JavaScript: Echtzeit-Anwendungen von Grund auf erstellen

WebSockets in JavaScript: Wenn eine „lebendige“ Website keine Magie, sondern Code ist

Haben Sie sich jemals gefragt, wie Online-Chats, Echtzeit-Börsenkurse oder Multiplayer-Browserspiele funktionieren? Das Geheimnis ist einfach und elegant – WebSockets in JavaScript. Diese Technologie verwandelt eine statische Website in einen lebendigen Organismus, der sofort auf die Aktionen anderer Benutzer reagiert.

In diesem Artikel werden wir nicht nur die Theorie behandeln. Wir werden einen echten Chat von Grund auf schreiben, lernen, wie man Fehler behandelt, und verstehen, warum Echtzeit-Anwendungen mit WebSockets schneller arbeiten als das gute alte AJAX mit Polling. Schnallen Sie sich an – es wird interessant.

Warum HTTP für Echtzeit ungeeignet ist (Kurze Einführung)

Normales HTTP funktioniert nach dem Prinzip „Anfrage-Antwort“. Der Client fragt – der Server antwortet. Wenn der Server selbst etwas sagen möchte (z. B. „eine neue Nachricht ist eingetroffen“), muss er warten, bis der Client erneut fragt. Das erinnert an eine Korrespondenz mit Brieftauben – langsam und ineffizient.

Entwickler haben Workarounds entwickelt:

\n
• Polling – Der Client fragt den Server alle 5 Sekunden: „Na, gibt es Neuigkeiten?“
\n
• Long Polling – Der Server hält die Verbindung offen, bis eine Antwort verfügbar ist (aber das ist immer noch ein unidirektionaler Kanal).
\n

Und dann betreten WebSockets die Bühne. Stellen Sie sich vor, Sie öffnen eine Telefonleitung zwischen dem Browser und dem Server. Beide können jederzeit und gleichzeitig sprechen, ohne Verzögerungen durch „Abheben des Hörers“. Das ist die Magie der JavaScript WebSocket API.

Wie WebSocket funktioniert: Protokoll, Handshake, Nachrichten

Technisch gesehen ist WebSocket ein eigenständiges Protokoll (ws:// oder wss:// für verschlüsselte Verbindungen). Alles beginnt mit einem HTTP-Handshake:

\n
1. Der Client sendet eine normale HTTP-Anfrage mit dem Header Upgrade: websocket.
\n
2. Der Server antwortet: „101 Switching Protocols“ – und die Verbindung wird auf WebSocket „upgegradet“.
\n
3. Danach – Vollduplex: Daten fließen in beide Richtungen als Frames (Text oder binäre Daten).
\n

Im Browser wird für die Arbeit mit WebSocket das integrierte Objekt WebSocket verwendet. Es werden keine zusätzlichen Bibliotheken benötigt – reines JavaScript WebSocket funktioniert out-of-the-box in allen modernen Browsern.

Den ersten Echtzeit-Chat in JavaScript schreiben

Lassen Sie uns einen einfachen Chat erstellen. Den Serverteil schreiben wir in Node.js mit der Bibliothek ws (der beliebtesten für WebSocket Node.js), den Client in reinem JavaScript.

Schritt 1: Serverinstallation

npm init -y\nnpm install ws

Schritt 2: Servercode (server.js)

const WebSocket = require('ws');\n\nconst wss = new WebSocket.Server({ port: 8080 });\n\nwss.on('connection', function connection(ws) {\n    console.log('Neuer Benutzer hat sich verbunden');\n\n    // Sende eine Begrüßung an den neuen Client\n    ws.send(JSON.stringify({\n        type: 'system',\n        message: 'Willkommen im Chat!'\n    }));\n\n    // Empfange Nachrichten vom Client\n    ws.on('message', function incoming(data) {\n        const message = JSON.parse(data);\n        console.log('Erhalten:', message);\n\n        // Sende die Nachricht an alle verbundenen Clients\n        wss.clients.forEach(function each(client) {\n            if (client.readyState === WebSocket.OPEN) {\n                client.send(JSON.stringify({\n                    type: 'message',\n                    user: message.user,\n                    text: message.text,\n                    time: new Date().toLocaleTimeString()\n                }));\n            }\n        });\n    });\n\n    // Behandle die Trennung\n    ws.on('close', function() {\n        console.log('Benutzer hat die Verbindung getrennt');\n    });\n});\n\nconsole.log('Server gestartet auf ws://localhost:8080');

Schritt 3: Client