Einführung in WebSockets

WebSockets sind ein Kommunikationsprotokoll, das die Echtzeitkommunikation zwischen Client und Server ermöglicht. WebSockets halten die Verbindung aufrecht und ermöglichen eine bidirektionale Kommunikation. Dadurch eignen sich WebSockets für Chat- und Börsenanwendungen, Multiplayer-Spiele und Tools für die Zusammenarbeit.

In diesem Artikel schauen wir uns an, wie das WebSocket-Protokoll funktioniert und welche Vorteile es gegenüber HTTP bietet. Außerdem zeigen wir dir, wie du eine einfache Chat-Anwendung mit WebSockets im Frontend und Backend erstellst.

HTTP vs. WebSockets

HTTP wird häufig für Interaktionen zwischen Server und Client genutzt. Es eignet sich gut zum Abrufen von Daten und zum Erstellen von Ressourcen. Allerdings ist es unidirektional, was bedeutet, dass der Client alle Anfragen initiieren muss und der Server nicht von sich aus Daten senden kann. Diese Einschränkung macht es ineffizient für Anwendungen wie Börsenticker oder Multiplayer-Spiele, bei denen pro Minute Hunderte oder Tausende von Aktualisierungen zwischen Client und Server übertragen werden müssen. Für jede Aktualisierung muss der Client einen Anfrage-Antwort-Zyklus wiederholen, was viel Rechenleistung und Bandbreite beansprucht. Die Verwendung von HTTP für solche Anwendungen macht auch den Server ineffizient, da er mit neuen Anfragen überlastet wird, selbst wenn keine Aktualisierungen für die Clients verfügbar sind.

Um diese Einschränkung zu umgehen, kannst du HTTP-Long-Polling ausprobieren, bei dem der Server die Verbindung länger offen hält, während er darauf wartet, weitere Daten mit der Antwort zu senden. Sobald der Client die Antwort erhält, stellt er eine neue Anfrage, um weitere Daten anzufordern. Das funktioniert zwar gut, um Echtzeitverhalten nachzubilden, doch das Offenhalten einer lang andauernden Verbindung kann zu Server-Timeout-Problemen führen und die performance beeinträchtigen, wenn zu viele Clients den Server ständig abfragen, auch wenn keine neuen Aktualisierungen verfügbar sind. Da der Client zudem in vordefinierten Intervallen Anfragen stellt, erscheinen die Updates möglicherweise nicht sofort. Stell dir zum Beispiel ein Multiplayer-Videospiel vor, bei dem die Positionen und Punktestände der Spieler in Echtzeit synchronisiert werden müssen. HTTP müsste alle paar Sekunden eine neue Anfrage senden, um den aktuellen Spielstand abzurufen, was unnötigen Netzwerk-Overhead und Latenz verursacht.

WebSockets hingegen bieten eine deutlich geringere Latenz und weniger Netzwerk-Overhead, während sie einen bidirektionalen Kanal für die Echtzeitkommunikation aufrechterhalten. Durch die Verwendung einer Vollduplex-Verbindung können Client und Server interagieren und Nachrichten senden, ohne eine neue Verbindung herstellen zu müssen, was den Übertragungsaufwand reduziert, der mit dem Aufbau einer neuen Verbindung bei jeder Anfrage verbunden ist. Die dauerhafte Verbindung bei WebSockets minimiert die Bandbreitennutzung, da nicht bei jeder Nachricht die HTTP-Header mitgesendet werden. WebSockets verleihen Anwendungen zudem ein stärkeres Echtzeit-Gefühl, da sie keinem Polling-Zyklus folgen müssen. Daher kommen neue Daten sofort an, sobald sie verfügbar sind. All diese Vorteile machen WebSockets zu einer wesentlich praktischeren Option für Echtzeitanwendungen wie Chat- und Börsenanwendungen, Multiplayer-Spiele und Tools für die Zusammenarbeit.

Hier ist ein Diagramm, das den Zeitablauf von HTTP- und WebSockets-Verbindungen vergleicht:

Wenn du schon mal eine Chat-Funktion mit HTTP-Polling entwickelt hast, kennst du das Problem: Nutzer, die sich über verzögerte Nachrichten beschweren, Server, die unter ständigen Anfragen ächzen, und dieses mulmige Gefühl, wenn du merkst, dass deine „Echtzeit“-App eine Verzögerung von 5 Sekunden hat. WebSockets lösen das elegant, indem sie eine dauerhafte, bidirektionale Verbindung aufrechterhalten, die sich wirklich sofort anfühlt.

Grundlagen des WebSocket-Protokolls

Das WebSocket-Protokoll stellt eine dauerhafte Verbindung zwischen Client und Server für die bidirektionale Kommunikation her. Der Verbindungsaufbau beginnt mit einer HTTP-Anfrage, dem sogenannten Handshake, bei dem der Client den Server auffordert, die Verbindung auf das WebSocket-Protokoll umzustellen. Nach dem Handshake wechselt die Verbindung zum WebSocket-Protokoll. Das folgende Diagramm zeigt den Ablauf der Verbindung zwischen Client und Server.

So funktioniert die Verbindung über das WebSocket-Protokoll: Der Client sendet eine HTTP-Anfrage an den Server, um die Verbindung auf das WebSocket-Protokoll umzustellen. Die Anfrage enthält die Header „Upgrade: websocket“ und „Connection: Upgrade“, wie im folgenden Beispiel:

   GET /chat HTTP/1.1
    Host: example.com:8000
    Upgrade: websocket
    Connection: Upgrade

Der Server sendet eine Antwort an den Client mit einem 101 Statuscode, um anzuzeigen, dass die Verbindung auf das WebSocket-Protokoll umgestellt wurde. Die Antwort enthält Upgrade: websocket und Connection: Upgrade Header. Hier ein Beispiel:

    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade

Nach dem Handshake können Client und Server nun bidirektional kommunizieren, ohne dass weitere Anfragen nötig sind.

Sowohl der Client als auch der Server können die Verbindung jederzeit schließen.

WebSockets im Frontend nutzen

Als Nächstes zeigen wir dir, wie du mit WebSockets eine einfache Chat-Anwendung erstellst, mit der du Nachrichten senden und empfangen kannst. Die Frontend-Anwendung ermöglicht es den Nutzern, Nachrichten zu senden, und der Backend-Server leitet die Nachrichten an alle verbundenen Clients weiter.

Du kannst das Ganze anhand dieses GitHub-Repositorys nachverfolgen.

Erstelle zunächst in deinem Arbeitsverzeichnis einen Projektordner namens „websockets-js-node“, indem du in deiner Befehlszeile „mkdir websockets-js-node“ ausführst.

Erstelle im Projektordner ein Verzeichnis namens „frontend“, indem du in deiner Befehlszeile den Befehl „mkdir frontend“ ausführst.

Erstelle in dem frontend Verzeichnis erstellst du eine Datei mit dem Namen index.html , indem du touch index.html in deinem Befehlszeilen-Tool.

Füge in der Datei „index.html“ den folgenden Code ein, um eine einfache HTML-Seite mit Eingabefeldern für den Benutzernamen und die Nachricht, eine Schaltfläche zum Senden der Nachricht sowie ein `script`-Tag zum Einbinden der Skriptdatei „index.js“ zu rendern, die die Frontend-WebSocket-Logik implementiert:

   <!-- frontend/index.html -->

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>WebSocket Client</title>
     </head>
     <body>
       <h1>WebSocket Client</h1>
       <input type="text" id="username" placeholder="Your username" />
       <input type="text" id="messageInput" placeholder="Type your message" />
       <button onclick="sendMessage()">Send</button>
       <div id="messages"></div>

       <script src="index.js"></script>
     </body>
   </html>

Erstelle eine Datei mit dem Namen index.js , indem du touch index.js in deinem Befehlszeilen-Tool aus, und füge den folgenden Code hinzu, um die WebSocket-Verbindung zum Backend-Server zu konfigurieren:

   // frontend/script.js

   // Create a WebSocket connection to the server
   const socket = new WebSocket("ws://localhost:8080");

   // Display connection status
   socket.onopen = () => {
     console.log("Connected to the WebSocket server");
   };

   // Handle incoming messages from the server
   socket.onmessage = (event) => {
     const messageDiv = document.getElementById("messages");
     const newMessage = document.createElement("p");
     newMessage.textContent = event.data.toString();
     messageDiv.appendChild(newMessage);
   };

   // Handle connection closure
   socket.onclose = () => {
     console.log("Disconnected from the WebSocket server");
   };

   // Send a message to the server
   function sendMessage() {
     const usernameInput = document.getElementById("username");
     const messageInput = document.getElementById("messageInput");
     const message = messageInput.value;
     const username = usernameInput.value;
     if (message) {
       socket.send(`${username}: ${message}`);
       messageInput.value = "";
     }
   }

Das Programmiert-werden bewirkt Folgendes:

• Er stellt eine WebSocket-Verbindung zum Backend-Server her.
• Das Ereignis „socket.onopen“ wird ausgelöst, sobald die Verbindung hergestellt ist.
• Das Ereignis „socket.onmessage“ wird ausgelöst, wenn eine Nachricht vom Server empfangen wird. Es fügt die Nachricht an das „messages“-Div an.
• Das Ereignis „socket.onclose“ wird ausgelöst, wenn die Verbindung geschlossen wird.
• Die Funktion „sendMessage“ wird aufgerufen, wenn der Nutzer auf die Schaltfläche „Senden“ klickt. Sie ruft den Benutzernamen und die Nachricht aus den Eingabefeldern ab und sendet sie mithilfe der Methode „socket.send“ an den Server.

WebSockets im Backend nutzen

Da das Frontend nun fertig ist, erstellen wir einen Backend-Server, mit dem sich das Frontend verbinden kann, um Nachrichten zu senden und zu empfangen. Im folgenden Abschnitt erklären wir, wie man eine einfache Chat-Anwendung implementiert, die eingehende Nachrichten an alle verbundenen Clients weiterleitet.

Für die Backend-Implementierung verwendet dieses Beispiel das npm-Paket „ws“, eine bewährte Bibliothek zum Erstellen eines WebSocket-Servers in Node.js.

Beachte, dass die Beispiele zum Programmieren in diesem Tutorial mit Node.js Version 20 erstellt wurden. Wir empfehlen, für neue Projekte Node.js 22 (aktuelle LTS-Version) zu verwenden.

Erstelle im Projektordner ein neues Verzeichnis namens „backend“, indem du in deiner Befehlszeile „mkdir backend“ ausführst. Erstelle im Verzeichnis „backend“ eine Datei namens „server.js“, indem du in deiner Befehlszeile „touch server.js“ ausführst.

Führe den folgenden Befehl in deinem Befehlszeilen-Tool aus, um das Paket „ws“ zu installieren:

   npm install ws

Füge in der Datei „server.js“ den folgenden Code hinzu, um einen einfachen HTTP-Server und einen WebSocket-Server unter Verwendung des HTTP-Servers zu erstellen:

   // backend/server.js

   const http = require("http");
   const { WebSocketServer } = require("ws");

   // Create a simple HTTP server
   const server = http.createServer((req, res) => {
     res.writeHead(200, { "Content-Type": "text/plain" });
     res.end("WebSocket server is running.\n");
   });

   // Create a WebSocket server using the HTTP server
   const wss = new WebSocketServer({ server });

   wss.on("connection", (ws) => {
     console.log("New client connected");

     // Send a welcome message to the newly connected client
     ws.send("Server: Welcome to the WebSocket server!");

     // Listen for messages from the client
     ws.on("message", (message) => {
       // Broadcast the received message to all connected clients
       wss.clients.forEach((client) => {
         if (client.readyState === ws.OPEN) {
           client.send(message.toString());
         }
       });
     });

     // Handle client disconnection
     ws.on("close", () => {
       console.log("Client disconnected");
     });
   });

   // Start the HTTP and WebSocket server on port 8080
   server.listen(8080, () => {
     console.log("Server is running on http://localhost:8080");
   });

Der Servercode programmiert Folgendes:

• Das Ereignis „on("connection")“ wird ausgelöst, wenn sich ein neuer Client mit dem WebSocket-Server verbindet. Der Server sendet eine Begrüßungsnachricht an den neu verbundenen Client und wartet fortan auf Nachrichten vom Client.
• Das Ereignis „on("message")“ wird ausgelöst, wenn eine Nachricht von einem Client empfangen wird, und die Nachricht wird an alle verbundenen Clients gesendet.
• Das Ereignis „on("close")“ wird ausgelöst, wenn ein Client die Verbindung zum WebSocket-Server trennt.
• Die Methode „server.listen()“ dient dazu, den HTTP- und WebSocket-Server auf Port 8080 zu starten.

Um den Server zu starten, wechsle in das Verzeichnis „backend“ und führe in deiner Befehlszeile „node server.js“ aus. Dadurch wird der Server gestartet und ist für die Frontend-Anwendung unter http://localhost:8080 erreichbar.

Öffne die Datei „frontend/index.html“ in zwei Tabs deines Webbrowsers, um die Echtzeit-Chat-Anwendung zu testen. Gib die Benutzernamen ein und sende Nachrichten von einem Tab aus – diese erscheinen dann in Echtzeit im anderen Tab.

Das Endergebnis sollte so aussehen:

Überlegungen zur Produktionsumgebung

Während unser Beispiel für die Entwicklung hervorragend geeignet ist, erfordern WebSocket-Anwendungen in der Produktivumgebung zusätzliche Überlegungen wie Verbindungsmanagement, Authentifizierung und den Umgang mit Netzwerkunterbrechungen. Moderne Plattformen wie Upsun Cloud kümmern sich automatisch um viele dieser Aspekte, darunter den Lastausgleich bei WebSocket-Verbindungen und die Verwaltung der SSL-Terminierung.

Bring deine WebSocket-App in die Produktivumgebung

Eine WebSocket-Anwendung zu erstellen ist nur der Anfang; erst wenn sie in der Produktivumgebung zuverlässig läuft, wird es richtig interessant. Du musst die Skalierung bewältigen, wenn deine Chat-App viral geht, Probleme mit der Performance bei Echtzeitverbindungen beheben und neue Features testen, ohne das Live-Erlebnis für deine Nutzer zu beeinträchtigen.

Genau hier glänzt Upsun Cloud. Als entwicklerorientierte Plattform für moderne Anwendungen macht Upsun Cloud die Bereitstellung von WebSocket-Apps erfreulich unkompliziert. Jeder Git-Push erstellt automatisch eine vollständige Testumgebung, einschließlich deines WebSocket-Servers, deiner Datenbank und aller Abhängigkeiten, sodass du Echtzeit-Features mit echten Daten testen kannst, bevor sie in der Produktivumgebung eingesetzt werden. 

Außerdem kannst du dank integrierter Observability und Performance-Überwachung Verbindungsengpässe oder Probleme bei der Nachrichtenübermittlung erkennen, bevor deine Nutzer sie bemerken. Egal, ob du eine einfache Chat-App oder ein komplexes Echtzeit-Kollaborationstool entwickelst – Upsun Cloud kümmert sich um die Komplexität der Infrastruktur, sodass du dich darauf konzentrieren kannst, was deine Anwendung so besonders macht.

Bist du bereit zu sehen, wie einfach die Bereitstellung von WebSockets sein kann? Starte deine kostenlose Testversion und lass deine Echtzeit-App in wenigen Minuten laufen.