WebSocket in JavaScript: Echtzeit-Anwendungen mit Node.js erstellen

WebSocket auf JavaScript: Erstellen von Real-Time-Anwendungen mit Node.js

Das moderne Web erfordert sofortige Reaktion. Benutzer erwarten, dass Chat-Nachrichten in Millisekunden zugestellt werden, Aktienkurse sich ohne Seitenneuladen aktualisieren und Benachrichtigungen in Echtzeit eintreffen. Die Technologie WebSocket auf JavaScript löst diese Aufgabe, indem sie eine permanente bidirektionale Verbindung zwischen Client und Server bereitstellt. In diesem Artikel werden wir untersuchen, wie man WebSocket in der Node.js-Umgebung nutzt, um schnelle und skalierbare Real-Time-Anwendungen zu erstellen.

Was ist WebSocket und warum wird es benötigt?

Das traditionelle HTTP-Protokoll arbeitet nach dem "Anfrage-Antwort"-Prinzip: Der Client sendet eine Anfrage, der Server antwortet, die Verbindung wird geschlossen. Um neue Daten zu erhalten, muss der Client den Server ständig abfragen (Polling) oder lange HTTP-Anfragen (Long Polling) verwenden. Das ist ineffizient, erzeugt unnötige Last und erhöht die Latenz.

WebSocket (RFC 6455) ist ein Protokoll, das eine permanente Duplex-Verbindung über einen einzigen TCP-Kanal herstellt. Nach dem Handshake über HTTP können Server und Client jederzeit Daten ohne zusätzliche Header senden. Dies macht WebSocket zur idealen Lösung für:

• Chats und Messenger
• Online-Spiele und gemeinsame Bearbeitung
• Börsenkurse und Finanz-Dashboards
• Push-Benachrichtigungen und Monitoring
• Daten-Streaming (IoT, Logs)

Installation und Konfiguration eines WebSocket-Servers auf Node.js

Für die Arbeit mit WebSocket auf der Serverseite verwenden wir die Bibliothek ws – die beliebteste und zuverlässigste Implementierung für Node.js. Installieren wir sie über npm:

npm install ws

Erstellen wir einen einfachen WebSocket-Server. Zuerst importieren wir das Modul und erstellen eine Serverinstanz auf Port 8080:

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {    console.log('Neuer Client verbunden');

    // Sende eine Willkommensnachricht an den Client    ws.send('Willkommen auf dem WebSocket-Server!');

    // Verarbeite eingehende Nachrichten    ws.on('message', function incoming(message) {        console.log('Empfangen: %s', message);        // Antworte allen verbundenen Clients        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`Echo: ${message}`);            }        });    });

    // Verarbeite die Trennung des Clients    ws.on('close', function close() {        console.log('Client getrennt');    });

    // Verarbeite Fehler    ws.on('error', function error(err) {        console.error('WebSocket-Fehler:', err);    });});

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

Dieser Code erstellt einen einfachen Echo-Server: Jede vom Client gesendete Nachricht wird an alle verbundenen Benutzer weitergeleitet. Beachten Sie die Überprüfung von readyState – sie stellt sicher, dass wir nicht versuchen, Daten an eine geschlossene Verbindung zu senden.

Clientseitiger WebSocket im Browser

Auf der Clientseite (Browser) ist WebSocket ein eingebautes Objekt – es sind keine zusätzlichen Bibliotheken erforderlich. Stellen wir eine Verbindung zu unserem Server her und implementieren wir einen einfachen Chat:

// WebSocket-Verbindung erstellenconst socket = new WebSocket('ws://localhost:8080');

// Event-Handler für Verbindungsaufbausocket.addEventListener('open', function (event) {    console.log('Verbindung hergestellt');    socket.send('Hallo, Server!');});

// Event-Handler für Nachrichtenempfangsocket.addEventListener('message', function (event) {    const messagesDiv = document.getElementById('messages');    const messageElement = document.createElement('div');