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

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

Moderne Webanwendungen erfordern einen sofortigen Datenaustausch zwischen Client und Server. Das traditionelle HTTP-Protokoll, das auf Anfrage-Antwort basiert, ist für Aufgaben, bei denen Geschwindigkeit wichtig ist, schlecht geeignet: Online-Chats, Börsenkurse, Multiplayer-Spiele oder Benachrichtigungssysteme. Genau hier kommt das WebSocket-Protokoll ins Spiel. In diesem Artikel werden wir uns ansehen, wie WebSocket in JavaScript funktioniert, und eine einfache Echtzeit-Anwendung mit Node.js erstellen.

Was ist WebSocket und warum wird es benötigt?

WebSocket ist ein Protokoll für die Vollduplex-Kommunikation (full-duplex) über eine TCP-Verbindung. Im Gegensatz zu HTTP, bei dem der Client immer eine Anfrage initiiert, ermöglicht WebSocket dem Server, jederzeit eigenständig Daten an den Client zu senden. Dies wird durch die Einrichtung eines permanenten bidirektionalen Kanals nach dem anfänglichen Handshake erreicht.

Die wichtigsten Vorteile von WebSocket gegenüber HTTP:

• Niedrige Latenz — Daten werden sofort ohne wiederholte HTTP-Header übertragen.
• Datenverkehrsersparnis — minimaler Overhead nach dem Verbindungsaufbau.
• Permanente Verbindung — kein Polling oder Long-Polling erforderlich.
• Bidirektionale Kommunikation — der Server kann das Senden von Daten initiieren.

WebSocket ist ideal für Echtzeit-Anwendungen: Chats, Benachrichtigungen, gemeinsame Dokumentenbearbeitung, Finanzterminals und Online-Spiele.

Installation und Konfiguration eines WebSocket-Servers mit Node.js

Für die Arbeit mit WebSocket in Node.js verwenden wir die beliebte Bibliothek ws. Sie ist leichtgewichtig, zuverlässig und gut dokumentiert.

Beginnen wir mit der Installation:

npm init -ynpm install ws

Jetzt erstellen wir einen einfachen WebSocket-Server, der Verbindungen annimmt und auf Nachrichten antwortet:

// server.jsconst WebSocket = require('ws');

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

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

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

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

    // Verarbeite das Schließen der Verbindung    ws.on('close', function close() {        console.log('Client getrennt');    });});

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

Starten Sie den Server mit dem Befehl node server.js. Der Server ist bereit, Verbindungen anzunehmen.

Erstellung des Client-Teils in JavaScript

Der Client-Teil läuft direkt im Browser. Die WebSocket-API ist in alle modernen Browser integriert, daher sind keine zusätzlichen Bibliotheken erforderlich.

Erstellen wir eine HTML-Seite mit einer einfachen Oberfläche:

<!DOCTYPE html><html><head>    <title>WebSocket Chat</title>    <style>        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }        #input { width: 300px; }    </style></head><body>    <h2>Echtzeit-Chat</h2>    <div id="messages"></div>    <input type="text" id="input" placeholder="Nachricht eingeben..." />    <button onclick="sendMessage()">Senden</button>

    <script>        // Verbinde zum WebSocket-Server        const socket = new WebSocket('ws://localhost:8080');

        // Handler f