WebSocket in JavaScript: Echtzeitanwendungen von A bis Z

Einführung in WebSocket in JavaScript: Was ist Echtzeit-Kommunikation?

Im modernen Web sind Benutzer an sofortige Aktualisierungen gewöhnt: Nachrichten in Chats kommen ohne Seitenneuladung an, Aktienkurse ändern sich in Echtzeit, und in Online-Spielen sind die Aktionen der Gegner sofort sichtbar. All dies wurde durch die Technologie WebSocket möglich – ein Protokoll, das eine dauerhafte bidirektionale Verbindung zwischen Client und Server gewährleistet.

Im Gegensatz zu klassischen HTTP-Anfragen, bei denen der Client eine Anfrage sendet und auf eine Antwort wartet, ermöglicht WebSocket dem Server, jederzeit eigenständig Daten an den Client zu senden. Dies eröffnet grenzenlose Möglichkeiten für die Erstellung von Echtzeitanwendungen in JavaScript. In diesem Artikel behandeln wir WebSocket von den Grundlagen bis zur Erstellung eines vollwertigen Chats mit Node.js.

Grundlagen von WebSocket: Wie das Protokoll funktioniert

Was ist WebSocket und wie unterscheidet es sich von HTTP?

WebSocket ist ein Kommunikationsprotokoll, das über TCP arbeitet. Es beginnt als HTTP-Anfrage (Handshake), woraufhin die Verbindung auf WebSocket "upgegradet" wird und Daten ohne zusätzliche Header in beide Richtungen übertragen werden. Dies macht es ideal für Anwendungen, bei denen geringe Latenz wichtig ist.

Die wichtigsten Vorteile von WebSocket gegenüber traditionellen Methoden (Polling, Long Polling):

• Dauerhafte Verbindung – es muss keine neue HTTP-Anfrage für jede Aktualisierung erstellt werden
• Geringe Latenz – Daten werden sofort übertragen, sobald sie auf dem Server erscheinen
• Datenverkehrseinsparung – minimale Framegröße (nur 2 Bytes Steuerdaten)
• Bidirektionale Kommunikation – der Server kann das Senden von Daten initiieren

Verbindungsaufbau: Handshake

Der Prozess beginnt mit einer HTTP-Anfrage vom Client, die den Header Upgrade: websocket enthält. Der Server, der WebSocket unterstützt, antwortet mit dem Status 101 Switching Protocols. Danach gilt die Verbindung als hergestellt.

// Beispiel einer HTTP-Anfrage zum Aufbau einer WebSocket-VerbindungGET /chat HTTP/1.1Host: example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13

Erstellung eines WebSocket-Servers mit Node.js

Installation und Konfiguration der ws-Bibliothek

Für die Arbeit mit WebSocket auf der Serverseite verwenden wir die beliebte Bibliothek ws. Sie ist leichtgewichtig, schnell und entspricht vollständig der Protokollspezifikation.

// Installation der Bibliothek// npm install ws

Wir erstellen einen einfachen WebSocket-Server:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {    console.log('Neuer Client verbunden');        ws.on('message', (message) => {        console.log('Nachricht erhalten:', message.toString());        // Sende Antwort an alle verbundenen Clients        wss.clients.forEach((client) => {            if (client.readyState === WebSocket.OPEN) {                client.send(`Echo: ${message}`);            }        });    });        ws.send('Willkommen auf dem WebSocket-Server!');});

console.log('WebSocket-Server gestartet auf Port 8080');

Client-Verbindung mit JavaScript

Auf der Client-Seite (Browser) wird das integrierte WebSocket-Objekt verwendet:

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

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

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

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

socket.onerror = (error) => {    console.error('WebSocket-Fehler:', error);};

Erstellung eines Echtzeit-Chats mit JavaScript und