Echtzeit-Apps mit WebSockets entwickeln
Polling ist schlecht für deine App.
Ich habe einmal ein Chat-Widget mit AJAX-Polling gebaut. Ich habe die App so eingestellt, dass sie jede Sekunde den Server nach neuen Nachrichten fragt. Es funktionierte, aber es war langsam. Die Benutzeroberfläche fühlte sich verzögert an. Der Server musste zu hart arbeiten. Die meisten Anfragen lieferten leere Daten zurück. Es fühlte sich an, als würde man versuchen, eine Badewanne mit einem Teelöffel zu füllen.
WebSockets ändern das.
Anstatt ständiger Anfragen öffnest du eine einzige, dauerhafte Verbindung. Dies ermöglicht einen bidirektionalen Datenfluss. Der Server kann Daten sofort an den Client pushen. Der Client kann Daten sofort an den Server senden.
Warum WebSockets verwenden?
• Die Latenz sinkt von Hunderten von Millisekunden auf wenige Millisekunden. • Die Serverlast wird vorhersehbar. • Du sparst Bandbreite, indem du wiederholte HTTP-Header entfernst. • Es eignet sich für Chat, Live-Benachrichtigungen und Multiplayer-Spiele.
So funktioniert es:
Die Verbindung beginnt mit einem HTTP-Upgrade-Request. Wenn der Server zustimmt, sendet er den Statuscode 101. Danach verwendest du ein reines Binär- oder Textprotokoll. Es gibt keine Cookies oder Header mehr, die dich ausbremsen.
Häufige Fallen, die man vermeiden sollte:
- Verbindungsabbrüche: Netzwerke fallen aus. Du musst eine Retry-Strategie wie „Exponential Backoff“ implementieren.
- Memory Leaks: Schließe deine Sockets immer, wenn ein Nutzer die Seite verlässt. Zombie-Verbindungen verbrauchen den Arbeitsspeicher des Servers.
- Nachrichten-Schleifen: Überspringe beim Broadcast den ursprünglichen Absender. Andernfalls sieht der Nutzer seine eigene Nachricht doppelt.
- Inaktive Verbindungen: Einige Proxys schließen stille Verbindungen. Nutze ein Ping/Pong-Heartbeat, um den Socket am Leben zu halten.
Hör auf, den Server zu fragen, ob sich etwas geändert hat. Halte stattdessen eine Leitung offen, damit du jederzeit kommunizieren kannst.
Deine Herausforderung:
Nimm ein einfaches Chat-Beispiel. Füge einen „schreibt gerade...“-Indikator hinzu. Deploye es auf einem Host wie Render oder Fly.io. Sobald du siehst, wie sich dieser Indikator in Echtzeit ohne Polling bewegt, hast du das nächste Level erreicht.