EventSource: open — Ereignis · JavaScript-Referenz

Signatur

eventSource.addEventListener("open", handler)

Beschreibung

Das open-Event eines EventSource-Objekts wird ausgelöst, wenn die HTTP-Verbindung zum Server steht und dieser mit dem Inhaltstyp text/event-stream antwortet. Zu diesem Zeitpunkt springt readyState auf EventSource.OPEN (1).

Einen Handler registrierst du wahlweise mit addEventListener("open", handler) oder über die Eigenschaft onopen. Übergeben wird ein ganz normales Event-Objekt ohne zusätzliche Daten. Das Event blubbert nicht (kein Bubbling) und lässt sich nicht abbrechen.

Wichtig: open kommt nicht nur beim ersten Verbindungsaufbau. Bricht die Verbindung ab, verbindet sich der Browser automatisch neu und löst nach jedem Erfolg wieder open aus. Das Event eignet sich deshalb gut, um einen Verbindungsstatus in der Oberfläche anzuzeigen, einen Zähler für Wiederverbindungen zurückzusetzen oder nach einem Neuaufbau Daten nachzuladen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Event-Typ, hier immer `"open"`.
$handler Pflicht	(event: Event) => void		Die Rückruffunktion. Sie erhält ein einfaches `Event`-Objekt; `event.target` ist die `EventSource`.
$options	boolean \| AddEventListenerOptions	false	Optionale Einstellungen wie `once` oder `signal`, zum Beispiel um den Listener über einen `AbortController` zu entfernen.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück (undefined).

Beispiele

Verbindungsstatus per addEventListener anzeigen

const source = new EventSource('/api/stream');

source.addEventListener('open', (event) => {
  console.log('Verbunden, readyState =', event.target.readyState);
});

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

Verbunden, readyState = 1

onopen-Eigenschaft und Wiederverbindungen zählen

const source = new EventSource('/api/notifications');
let connects = 0;

source.onopen = () => {
  connects += 1;
  console.log(connects === 1 ? 'Erstverbindung' : `Wiederverbunden (#${connects - 1})`);
};

source.onerror = () => {
  if (source.readyState === EventSource.CONNECTING) {
    console.log('Verbindung verloren, Browser verbindet neu …');
  }
};

Erstverbindung

Listener wieder entfernen mit removeEventListener

const source = new EventSource('/api/stream');

const handleOpen = () => {
  console.log('Stream bereit');
  // Nur einmal reagieren, danach Listener entfernen
  source.removeEventListener('open', handleOpen);
};

source.addEventListener('open', handleOpen);

// Alternativ: source.addEventListener('open', handleOpen, { once: true });

Stream bereit

Auf die offene Verbindung mit einem Promise warten

const waitForOpen = (url, timeoutMs = 5000) =>
  new Promise((resolve, reject) => {
    const source = new EventSource(url);
    const timer = setTimeout(() => {
      source.close();
      reject(new Error('Timeout beim Verbindungsaufbau'));
    }, timeoutMs);

    source.addEventListener('open', () => {
      clearTimeout(timer);
      resolve(source);
    }, { once: true });
  });

const source = await waitForOpen('/api/stream');
console.log('Offen:', source.readyState === EventSource.OPEN);

Offen: true

// Wichtig · Fallstricke

Mehrfaches Auslösen: open feuert nach jeder automatischen Wiederverbindung erneut. Code, der nur einmal laufen soll, schützt du mit { once: true } oder einem eigenen Merker.
Listener zu spät registriert: Hängst du den Handler asynchron an, zum Beispiel erst nach einem await, kann das erste open schon vorbei sein. Registriere Listener direkt nach new EventSource() oder prüfe zusätzlich readyState === EventSource.OPEN.
Falscher Inhaltstyp: Antwortet der Server nicht mit Content-Type: text/event-stream oder mit einem HTTP-Status ungleich 200, gibt es kein open. Stattdessen feuert error und die Verbindung wird endgültig geschlossen (readyState = 2).
CORS: Für Quellen von anderen Domains muss der Server passende CORS-Header senden. Cookies werden nur mit new EventSource(url, { withCredentials: true }) mitgeschickt.
Verbindungslimit: Über HTTP/1.1 erlauben Browser nur etwa 6 gleichzeitige Verbindungen pro Domain, und zwar über alle Tabs hinweg. Zu viele offene EventSources können dazu führen, dass open ausbleibt. Mit HTTP/2 tritt das Problem nicht auf.
Kompatibilität: Alle modernen Browser unterstützen das Event, der Internet Explorer nicht. In Web Workern ist EventSource ebenfalls verfügbar, in Service Workern nicht zuverlässig.

Siehe auch

EventSource EventSource.readyState EventSource.prototype.close() DevicePosture: change EventSource: error