Server-Sent Events in JavaScript: Echtzeit ohne WebSocket

Was sind Server-Sent Events und warum brauchen Sie sie?

\n\n

Stellen Sie sich vor: Sie haben eine Website mit Wechselkursen geöffnet, und der Dollarkurs ändert sich direkt vor Ihren Augen – ohne Seitenaktualisierung, ohne Tastendruck. Oder Sie warten auf das Ergebnis der Verarbeitung einer großen Datei auf dem Server, und plötzlich erscheint die Zeile: „Zu 70% fertig“. Wie funktioniert das? Eine der elegantesten Methoden sind Server-Sent Events (SSE).

\n\n

SSE ist eine Technologie, die es dem Server ermöglicht, Daten eigenständig an den Client zu senden, sobald sie verfügbar sind. Im Gegensatz zu WebSocket arbeitet SSE nur in eine Richtung – vom Server zum Client. Aber genau darin liegt seine Superkraft: Es ist unglaublich einfach, effizient und ideal für Aufgaben geeignet, bei denen der Client nur Updates empfangen muss.

\n\n

In diesem Artikel werden wir uns ansehen, wie man Server-Sent Events in JavaScript verwendet, funktionierenden Code schreiben und verstehen, wann SSE die beste Wahl ist und wann man besser zu WebSocket greifen sollte. Bereit? Los geht's!

\n\n

Wie funktionieren Server-Sent Events (SSE)?

\n\n

Technisch gesehen ist SSE einfach eine HTTP-Verbindung, die der Server nach dem Senden der Antwort nicht schließt. Stattdessen sendet er Daten in Teilen unter Verwendung des speziellen Formats text/event-stream. Der Client (Browser) hört auf diese Verbindung über das EventSource-Objekt und generiert Ereignisse beim Empfang jeder neuen Nachricht.

\n\n

So sieht eine typische Serverantwort aus:

\n\n

data: {"message": "Hallo!", "timestamp": 1700000000}\n\ndata: {"message": "Neue Benachrichtigung", "timestamp": 1700000001}

\n\n

Jede Nachricht beginnt mit data:, gefolgt von einem Leerzeichen und dem eigentlichen Inhalt. Nachrichten werden durch zwei Zeilenumbrüche \\n\\n getrennt. Der Server kann auch IDs (id:) und Ereignistypen (event:) senden, aber der minimale Satz ist data.

\n\n

Die Client-Seite ist noch einfacher:

\n\n

const eventSource = new EventSource('/events');\n\neventSource.onmessage = (e) => {\n    console.log('Daten empfangen:', e.data);\n};\n\neventSource.onerror = (e) => {\n    console.error('Verbindungsfehler', e);\n};

\n\n

Fertig! Keine komplizierten Handshakes, keine Bibliotheken – der Browser verbindet sich bei einem Verbindungsabbruch automatisch neu und behandelt den Verbindungsverlust selbst. Das ist die wahre Magie von Server-Sent Events.

\n\n

SSE vs WebSocket: Wann wählt man was?

\n\n

Anfänger denken oft: „Da SSE einfacher ist, ist es immer besser.“ Aber das stimmt nicht. Jede Technologie hat ihre Nische. Vergleichen wir sie.

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Eigenschaft	SSE	WebSocket
Datenrichtung	Nur Server → Client	Bidirektional
Einfachheit der Implementierung	Sehr einfach (nativ im Browser)	Mittel (Bibliothek erforderlich)
Automatische Wiederverbindung	Integriert	Muss manuell implementiert werden
Browserunterstützung	Alle modernen (außer IE)	Blogs onBackPressed() ist veraltet: So behandeln Sie die "Zurück"-Taste in Android richtig C++ Bibliotheken 2024: Leitfaden zu leistungsstarken Tools für Profis Kotlin in realen Projekten: Anwendungsfälle von Google bis zu deinem Startup Buchempfehlungen GraphQL in PHP: Erstellen Sie flexible APIs der nächsten Generation Parallelität in PHP: Asynchronität, Parallelverarbeitung und Multithreading in der Praxis Erstelle dein eigenes Angular: Eintauchen in die Mechanik des Frameworks C# und die .NET-Plattform Lesen Sie auch Funktionale Programmierung in Java: Von Lambdas bis zur Stream API Clean Code in Java: Prinzipien und Beispiele für Anfänger So verbinden Sie eine lokale Rust-Crate vor der Veröffentlichung: Schritt-für-Schritt-Anleitung Open Source für JS-Entwickler: So startest du mit Beiträgen, ohne dich zu übernehmen Docker und Kotlin: Containerisierung von Anwendungen für Entwickler 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые