WebSockets: Echtzeit-Kommunikation im Web

Klassisches HTTP funktioniert nach dem Frage-Antwort-Prinzip: Der Browser fragt, der Server antwortet, fertig. Für Chats, Live-Tickers oder Multiplayer-Spiele ist das zu langsam. Hier kommen WebSockets ins Spiel. Sie halten eine dauerhafte Verbindung offen, über die beide Seiten jederzeit Nachrichten senden können. In diesem Beitrag zeige ich dir, wie das funktioniert.

Warum reicht HTTP nicht?

Bei HTTP muss immer der Client die Initiative ergreifen. Der Server kann nicht von sich aus Daten schicken. Wenn du also wissen willst, ob es etwas Neues gibt, musst du ständig nachfragen (Polling). Das verschwendet Ressourcen und fühlt sich träge an.

Ein WebSocket dagegen ist eine bidirektionale Verbindung. Einmal aufgebaut, bleibt sie offen, und beide Seiten können jederzeit Nachrichten senden. Genau das brauchst du für echte Echtzeit-Anwendungen.

Ein WebSocket-Server mit Node.js

Mit der Bibliothek ws baust du in wenigen Zeilen einen WebSocket-Server. Er reagiert auf neue Verbindungen und eingehende Nachrichten:

const { WebSocketServer } = require("ws");
const wss = new WebSocketServer({ port: 8080 });

wss.on("connection", (socket) => {
  console.log("Neuer Client verbunden");

  socket.on("message", (daten) => {
    console.log("Empfangen:", daten.toString());
    socket.send("Antwort vom Server");
  });

  socket.on("close", () => console.log("Client getrennt"));
});

Das Ereignis connection wird bei jedem neuen Client ausgelöst. Über socket.send schickst du Daten zurück, ganz ohne dass der Client erneut fragen muss.

Der Client im Browser

Im Browser ist WebSocket fest eingebaut. Du erzeugst eine Verbindung und reagierst auf Ereignisse:

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

socket.addEventListener("open", () => {
  socket.send("Hallo Server");
});

socket.addEventListener("message", (event) => {
  console.log("Nachricht vom Server:", event.data);
});

Sobald die Verbindung steht (open), kannst du senden. Eingehende Nachrichten landen im message-Ereignis. Die Verbindung bleibt die ganze Zeit bestehen.

Nachrichten an alle senden (Broadcast)

Für einen Chat willst du eine Nachricht nicht nur an einen Client zurückschicken, sondern an alle verbundenen. Das nennt man Broadcast:

wss.on("connection", (socket) => {
  socket.on("message", (daten) => {
    // Nachricht an alle offenen Clients verteilen
    wss.clients.forEach((client) => {
      if (client.readyState === client.OPEN) {
        client.send(daten.toString());
      }
    });
  });
});

Hier durchläufst du alle verbundenen Clients und sendest die Nachricht weiter. So sehen alle Teilnehmer sofort, was geschrieben wurde.

Strukturierte Nachrichten mit JSON

In echten Anwendungen schickst du selten reinen Text. Stattdessen nutzt du JSON, um Typ und Inhalt zu trennen:

// Senden
socket.send(JSON.stringify({ typ: "chat", text: "Hallo", user: "Anna" }));

// Empfangen
socket.addEventListener("message", (event) => {
  const nachricht = JSON.parse(event.data);
  if (nachricht.typ === "chat") {
    console.log(`${nachricht.user}: ${nachricht.text}`);
  }
});

Mit einem typ-Feld kannst du verschiedene Ereignisse unterscheiden, etwa Chat-Nachrichten, Tippen-Anzeigen oder Statusmeldungen.

Worauf du achten solltest

WebSockets sind mächtig, bringen aber eigene Herausforderungen mit:

• Verbindungen können abreißen, plane eine automatische Wiederverbindung im Client ein.
• Über viele Server hinweg brauchst du oft einen zusätzlichen Mechanismus wie Redis Pub/Sub, um Nachrichten zu verteilen.
• Validiere und authentifiziere eingehende Nachrichten, sonst öffnest du Angreifern Tür und Tor.

Fazit

WebSockets bringen echte Echtzeit ins Web. Statt ständig nachzufragen, hältst du eine offene Verbindung, über die Server und Client jederzeit kommunizieren. Mit der ws-Bibliothek und dem eingebauten Browser-WebSocket baust du in kurzer Zeit Chats oder Live-Updates. Probiere einen kleinen Chat aus, dann verstehst du das Prinzip am schnellsten.