0Pricing
Frontend Academy · Lektion

Server-Sent Events für unidirektionales Streaming

Verwenden Sie EventSource, um einen Stream serverseitig gesendeter Ereignisse zu empfangen, Ereignistypen und Daten zu analysieren und bei Netzwerkunterbrechungen automatisch die Verbindung wiederherzustellen.

Server-Sent Events für unidirektionales Streaming ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Server-Sent Events?

SSE ist ein standardisiertes HTTP-basiertes Protokoll, mit dem der Server Ereignisse über eine einzige langlebige Verbindung an den Browser sendet. Einweg: nur vom Server → zum Client. Einfacher als WebSockets, wenn Sie nichts zurücksenden müssen.

EventSource-API

Die browserseitige EventSource-API verbindet sich mit einer URL und empfängt Ereignisse. Sie ist standardisiert und integriert; eine Bibliothek ist nicht erforderlich.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Format der Serverantwort

Der Server sendet einen Klartext-Stream mit Content-Type: text/event-stream. Jede Nachricht beginnt mit data: und endet mit einer Leerzeile.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Benannte Ereignisse

Der Server kann Ereignisse mit event: benennen. Der Browser löst sie unter diesem Namen aus.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Automatische Wiederverbindung

EventSource stellt bei einer Trennung automatisch die Verbindung wieder her (nach etwa 3 Sekunden). Der Server kann mit retry: 5000 eine Wartezeit vorgeben.

// Server:
retry: 5000\n
data: hello\n\n

Ereignis-IDs und Fortsetzung

Der Server sendet mit jedem Ereignis eine id:. Nach der Wiederverbindung sendet der Browser die zuletzt empfangene ID im Header Last-Event-ID – der Server kann an dieser Stelle fortsetzen.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

JSON parsen

event.data ist immer eine Zeichenkette. Parsen Sie JSON selbst.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Verbindung schließen

Rufen Sie es.close() auf, um die Verbindung zu beenden. Beim Schließen des Tabs beenden Browser sie ebenfalls.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Anwendungsfälle

Live-Dashboards (Metriken, Überwachung). Benachrichtigungen (neue E-Mails, Warnungen). Börsenkurs-Ticker. KI-Chat-Vervollständigungen (jedes Token = ein Ereignis). Live-Sportergebnisse. Statusaktualisierungen lang laufender Jobs.

Konkretes Beispiel: KI-Streaming

OpenAI/Anthropic-Vervollständigungen werden als SSE gestreamt. Jedes Token trifft als data-Ereignis ein – rendern Sie es schrittweise für einen Tippeffekt.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE vs. WebSocket vs. Polling

SSE: HTTP-basiert, nur vom Server zum Client, automatische Wiederverbindung, einfach. WebSocket: Vollduplex, geringerer Overhead pro Nachricht, komplexer. Polling: am einfachsten, höchste Latenz und Last. Wählen Sie SSE für einseitiges Streaming und WS für eine chatähnliche bidirektionale Kommunikation.

Browserlimits und Proxys

Browser begrenzen die Anzahl gleichzeitiger SSE-Verbindungen pro Origin (etwa 6). Einige Unternehmens-Proxys und ältere Load-Balancer puffern Antworten und beeinträchtigen dadurch SSE – testen Sie in den Zielumgebungen. Verwenden Sie HTTPS, um die meisten Proxy-Pufferungen zu umgehen.

CORS für SSE

EventSource berücksichtigt CORS. Der Server muss Access-Control-Allow-Origin senden. Für Anmeldedaten übergeben Sie { withCredentials: true } an den EventSource-Konstruktor und setzen serverseitig Access-Control-Allow-Credentials: true.

Kurze Wissensprüfung

Was ist der entscheidende Unterschied zwischen Server-Sent Events und WebSockets?

Zusammenfassung: Server-Sent Events

EventSource öffnet einen HTTP-Stream mit text/event-stream-Ereignissen. Der Server sendet „data:“-Nachrichten mit optionalem event:-Namen und id:. Automatische Wiederverbindung mit Fortsetzung über Last-Event-ID. Einwegkommunikation (Server → Client). Ideal für Live-Dashboards, KI-Streaming und Benachrichtigungen. Einfacher als WebSocket, wenn keine bidirektionale Kommunikation erforderlich ist. Beachten Sie Limits für gleichzeitige Verbindungen und das Puffern durch Proxys.

Häufig gestellte Fragen

Ist die Lektion „Server-Sent Events für unidirektionales Streaming“ kostenlos?

Ja — der vollständige Text von „Server-Sent Events für unidirektionales Streaming“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Server-Sent Events für unidirektionales Streaming“?

Verwenden Sie EventSource, um einen Stream serverseitig gesendeter Ereignisse zu empfangen, Ereignistypen und Daten zu analysieren und bei Netzwerkunterbrechungen automatisch die Verbindung wiederher… Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Server-Sent Events für unidirektionales Streaming“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. WebSocket API: open, message, close und error
  2. Socket.io-Client-Integration
  3. Server-Sent Events für unidirektionales Streaming
  4. Muster für Echtzeit-UIs
← Zurück zu Frontend Academy