Was sind WebSockets und wie funktionieren sie

Einführung in das WebSocket-Protokoll

WebSocket ist ein Kommunikationsprotokoll, das eine bidirektionale (Full-Duplex) Kommunikation zwischen einem Webbrowser und einem Server über eine einzige TCP-Verbindung ermöglicht. Im Gegensatz zum klassischen HTTP-Protokoll, bei dem der Client eine Anfrage senden muss, um eine Antwort zu erhalten, ermöglicht WebSocket dem Server, dem Client Daten zu senden, wann immer er etwas Neues zu liefern hat, ohne auf eine Anfrage zu warten. Dies ist revolutionär für Webanwendungen, die Echtzeit-Updates erfordern.

Vor WebSocket verwendeten Entwickler Techniken wie Polling, bei dem der Browser periodisch Anfragen an den Server sendet, zum Beispiel alle 2 Sekunden mit der Frage, ob es neue Daten gibt, oder Long Polling, bei dem der Server die Verbindung offen hält, bis er neue Daten erhält. Beide Techniken sind ineffizient, weil sie Bandbreite für HTTP-Header verbrauchen und den Server mit unnötigen Anfragen belasten. WebSocket löst diese Probleme, indem es eine dauerhafte Verbindung mit minimalem Overhead aufbaut.

Wie WebSocket funktioniert

Handshake-Prozess

Eine WebSocket-Verbindung beginnt als gewöhnliche HTTP-Verbindung durch einen Prozess, der als Handshake bekannt ist. Der Client sendet eine HTTP-Anfrage mit speziellen Headern Connection: Upgrade und Upgrade: websocket, die dem Server den Wunsch zum Wechsel auf das WebSocket-Protokoll signalisieren. Der Server antwortet mit dem Statuscode 101 Switching Protocols, wenn er WebSocket unterstützt, womit die HTTP-Verbindung auf WebSocket aufgewertet wird. Ab diesem Zeitpunkt können beide Seiten frei Daten ohne HTTP-Overhead senden.

Framing und Datenübertragung

Nach Aufbau der Verbindung werden Daten durch WebSocket-Frames ausgetauscht, die wesentlich kleiner sind als HTTP-Pakete. Jeder Frame enthält nur 2 bis 14 Byte Overhead im Vergleich zu Hunderten von Bytes in HTTP-Headern. WebSocket unterstützt Textnachrichten im UTF-8-Format und Binärdaten. Nachrichten können in mehrere Frames zur Übertragung großer Daten fragmentiert werden. Steuerungs-Frames wie Ping und Pong werden zur Prüfung verwendet, ob die Verbindung noch aktiv ist.

Verbindungsschluss

Jede Seite kann das Schließen der WebSocket-Verbindung durch Senden eines Close-Frames initiieren. Der Schließprozess umfasst den Austausch von Close-Frames, wobei die Seite, die einen Close-Frame empfängt, mit ihrem eigenen Close-Frame antwortet und die TCP-Verbindung danach geschlossen wird. Die Client-Seite implementiert normalerweise automatische Wiederverbindung im Falle unerwarteter Verbindungsunterbrechungen mit exponentieller Verzögerung zwischen den Versuchen, um den Server nicht zu überlasten.

Anwendungen von WebSocket in der Praxis

Chat-Anwendungen

Chat ist die offensichtlichste Anwendung von WebSocket. Wenn ein Nutzer eine Nachricht sendet, erscheint sie sofort bei allen Konversationsteilnehmern ohne Seiten-Aktualisierung. Moderne Chat-Anwendungen wie Slack, Discord und Facebook Messenger verwenden WebSocket zur Echtzeit-Zustellung von Nachrichten. Neben Text ermöglicht WebSocket das Senden von Tippindikatoren, Gelesen-Status, Online- und Offline-Status der Nutzer und Benachrichtigungen über neue Nachrichten. Die Implementierung von Chat mit Polling würde Tausende von HTTP-Anfragen pro Minute erfordern, während WebSocket das mit einer einzigen offenen Verbindung erledigt.

Echtzeit-Benachrichtigungen

Benachrichtigungssysteme auf Plattformen wie GitHub, Trello oder Projektmanagement-Tools verwenden WebSocket, um Nutzern Benachrichtigungen zu liefern, sobald eine relevante Aktivität auftritt. Wenn jemand Ihren Pull Request kommentiert, liefert WebSocket sofort eine Benachrichtigung im Browser, ohne dass Sie die Seite aktualisieren müssen. Dies ist besonders wichtig für Kollaborationstools, in denen mehrere Nutzer gleichzeitig am selben Projekt arbeiten, da jede Änderung allen Teilnehmern in Echtzeit sichtbar sein muss.

Live-Dashboards und Monitoring

Dashboards, die Echtzeit-Metriken anzeigen, wie Website-Traffic-Tracking, Server-Monitoring, Finanzdaten oder IoT-Sensoren, verwenden WebSocket zur kontinuierlichen Aktualisierung von Diagrammen und Werten. Anstatt das Dashboard alle 5 Sekunden die ganze Seite zu aktualisieren, liefert WebSocket nur geänderte Daten, was die Server- und Bandbreitenlast erheblich reduziert. Tools wie Grafana und Kibana verwenden WebSocket zum Live-Streaming von Metriken.

Kollaboratives Editieren

Google Docs, Figma und ähnliche Tools ermöglichen mehreren Nutzern, dasselbe Dokument gleichzeitig zu bearbeiten, dank WebSocket. Jede Änderung eines Nutzers wird sofort an alle anderen Nutzer propagiert. Dies erfordert ausgeklügelte Algorithmen zur Konfliktlösung wie Operational Transformation oder CRDT-Algorithmen, die die Dokumentenkonsistenz gewährleisten, selbst wenn zwei Nutzer denselben Textteil gleichzeitig bearbeiten.

WebSocket in verschiedenen Programmiersprachen

JavaScript und Node.js

Im Browser ist die WebSocket-API integriert und wird direkt ohne zusätzliche Bibliotheken verwendet. Das Erstellen einer Verbindung ist mit der new-WebSocket-Konstruktion einfach, der die Server-URL übergeben wird. Auf der Serverseite umfassen beliebte Node.js-Bibliotheken ws, das minimalistisch und schnell ist, Socket.IO, das automatisches Fallback auf Polling hinzufügt, wenn WebSocket nicht verfügbar ist, plus Räume für Gruppen-Nachrichtenversand und automatische Wiederverbindung. Socket.IO ist die beliebteste Wahl für JavaScript-Projekte, weil es Komplexität abstrahiert und zuverlässig auch in Netzwerken mit restriktiven Firewalls funktioniert.

Python und PHP

Python-Entwickler verwenden Bibliotheken wie websockets für asynchronen Zugriff oder Django Channels, das WebSocket-Unterstützung zum Django-Framework hinzufügt. Flask-SocketIO ist eine beliebte Option für Flask-Anwendungen. PHP ist traditionell nicht ideal für WebSocket, weil es für das Request-Response-Modell konzipiert ist, aber die Ratchet-Bibliothek und die Swoole-Erweiterung ermöglichen WebSocket-Server in PHP. Laravel verwendet Laravel Echo mit Pusher oder Socket.IO für Echtzeit-Funktionen mit Laravel Reverb als selbstgehosteter Lösung.

Hosting-Anforderungen für WebSocket-Anwendungen

Server-Konfiguration

WebSocket-Anwendungen haben spezifische Hosting-Anforderungen. Shared Hosting unterstützt WebSocket normalerweise nicht, weil es langlaufende Verbindungen erfordert, die eine Shared-Umgebung nicht effizient verwalten kann. Ein Hosting auf einem virtuellen Server oder dedizierten Server ist das Minimum für die Produktion. Der Webserver muss für WebSocket-Proxying konfiguriert sein – Nginx verwendet proxy_pass mit Upgrade-Headern, Apache verwendet mod_proxy_wstunnel. Die Firewall muss WebSocket-Traffic erlauben, der typischerweise die Ports 80 für ws und 443 für wss verwendet.

Skalierung von WebSocket-Anwendungen

Die Skalierung von WebSocket ist komplexer als die Skalierung von HTTP-Anwendungen, weil jede Verbindung Speicher auf dem Server belegt. Ein Server kann je nach Hardware und Anwendung 10.000 bis 100.000 gleichzeitige WebSocket-Verbindungen aufrechterhalten. Für mehr Nutzer wird horizontale Skalierung mit Redis Pub/Sub oder einem ähnlichen Message Broker zur Nachrichtensynchronisation zwischen Server-Instanzen verwendet. Der Load Balancer muss Sticky Sessions oder IP-Hash unterstützen, damit die WebSocket-Verbindung auf demselben Backend-Server bleibt.

WebSocket-Sicherheit

WSS-Verschlüsselung

Genauso wie HTTP HTTPS hat, hat WebSocket WSS (WebSocket Secure), das TLS-Verschlüsselung verwendet. Verwenden Sie in der Produktion immer WSS, weil unverschlüsselte WebSocket-Verbindungen abgefangen werden können. Die meisten modernen Browser blockieren ws-Verbindungen von Seiten, die über HTTPS geladen werden, daher ist WSS praktisch obligatorisch. Das SSL-Zertifikat, das Sie für HTTPS verwenden, deckt automatisch auch WSS-Verbindungen auf derselben Domain ab.

Authentifizierung und Autorisierung

WebSocket unterstützt keine HTTP-Header nach dem ersten Handshake, daher wird die Authentifizierung in der Regel durch Senden eines Tokens als Query-Parameter beim Verbindungsaufbau oder durch Senden einer Authentifizierungsnachricht sofort nach der Verbindung gelöst. JWT-Tokens sind eine beliebte Wahl, weil der Server die Identität des Nutzers ohne Datenbankabfrage verifizieren kann. Die Autorisierung bestimmt, welche Kanäle oder Räume der Nutzer abhören und welche Nachrichten er senden kann. Auf BeoHosting-VPS-Plänen haben Sie volle Kontrolle über die Server-Konfiguration, was eine optimale Einrichtung von WebSocket-Anwendungen mit ordnungsgemäßer Sicherheit und Leistung ermöglicht.

Fazit

Das WebSocket-Protokoll ist eine grundlegende Technologie für moderne Webanwendungen, die Echtzeit-Kommunikation erfordern. Von Chat-Systemen und Benachrichtigungen bis zu Kollaborationstools und Live-Dashboards ermöglicht WebSocket Erlebnisse, die klassisches HTTP einfach nicht bieten kann. Das Verständnis, wie WebSocket funktioniert, wann es eingesetzt werden sollte und wie es ordnungsgemäß zu implementieren ist, ist eine Schlüsselkompetenz für jeden Webentwickler, der dynamische und interaktive Anwendungen erstellen möchte.