EventSource.close() — Methode · JavaScript-Referenz

Signatur

EventSource.prototype.close()

Beschreibung

Die Methode close() beendet eine bestehende oder gerade aufgebaute Verbindung zu einem Server-Sent-Events-Endpunkt (SSE). Danach steht EventSource.readyState auf 2 (EventSource.CLOSED). Es kommen keine message-Ereignisse und keine eigenen Ereignisse mehr an.

Wichtig ist der Unterschied zum normalen Verbindungsabbruch: Bricht die Verbindung durch einen Netzwerkfehler ab, versucht EventSource selbst, sich neu zu verbinden (gesteuert über das retry-Feld des Servers). Nach close() gibt es keine automatische Wiederverbindung. Das Objekt lässt sich nicht wieder öffnen. Wer später neu verbinden möchte, muss eine neue Instanz mit new EventSource(url) anlegen.

Typische Einsätze sind: das Aufräumen beim Verlassen einer Seite oder beim Entfernen einer Komponente (z. B. im Cleanup von React-useEffect), das Beenden eines Streams, sobald der Server ein „Fertig“-Ereignis schickt, und das bewusste Abbrechen nach wiederholten Fehlern, damit der Browser nicht endlos neu verbindet.

Beispiele

Verbindung schließen und Zustand prüfen

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

source.addEventListener('open', () => {
  console.log('Verbunden, readyState:', source.readyState);
  source.close();
  console.log('Nach close(), readyState:', source.readyState);
  console.log(source.readyState === EventSource.CLOSED);
});

Verbunden, readyState: 1 Nach close(), readyState: 2 true

Stream beenden, wenn der Server „done“ meldet

const source = new EventSource('/api/build-log?id=42');
const log = document.querySelector('#log');

source.addEventListener('message', (event) => {
  log.textContent += `${event.data}\n`;
});

// Eigenes Ereignis vom Server: "event: done\ndata: ok\n\n"
source.addEventListener('done', () => {
  source.close(); // verhindert die automatische Wiederverbindung
  console.log('Build-Log vollständig empfangen.');
});

Build-Log vollständig empfangen.

Nach mehreren Fehlern aufgeben

const MAX_ERRORS = 3;
let errorCount = 0;
const source = new EventSource('/api/ticker');

source.onmessage = (event) => {
  errorCount = 0; // erfolgreicher Empfang setzt den Zähler zurück
  console.log('Kurs:', JSON.parse(event.data).price);
};

source.onerror = () => {
  errorCount += 1;
  console.warn(`Verbindungsfehler ${errorCount}/${MAX_ERRORS}`);
  if (errorCount >= MAX_ERRORS) {
    source.close();
    console.error('Ticker deaktiviert – bitte Seite neu laden.');
  }
};

Verbindungsfehler 1/3 Verbindungsfehler 2/3 Verbindungsfehler 3/3 Ticker deaktiviert – bitte Seite neu laden.

Aufräumen in einer React-Komponente

import { useEffect, useState } from 'react';

export const Notifications = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const source = new EventSource('/api/notifications', { withCredentials: true });
    source.onmessage = (e) => setItems((prev) => [...prev, JSON.parse(e.data)]);

    // Cleanup: Verbindung schließen, wenn die Komponente entfernt wird
    return () => source.close();
  }, []);

  return <ul>{items.map((n) => <li key={n.id}>{n.text}</li>)}</ul>;
};

// Wichtig · Fallstricke

Kein Wiederöffnen: Eine geschlossene EventSource bleibt geschlossen. Für eine neue Verbindung braucht man eine neue Instanz.
Kein error- oder close-Ereignis: close() löst kein Ereignis aus. Einen close-Event gibt es bei EventSource nicht. Aufräumlogik schreibt man also direkt neben den Aufruf.
Mehrfacher Aufruf ist harmlos: Ist die Verbindung schon geschlossen, bewirkt close() nichts und wirft keinen Fehler.
Server merkt es erst verzögert: Der Server erfährt vom Schließen nur über die abgebrochene TCP-/HTTP-Verbindung. Je nach Proxy oder Load-Balancer kann das dauern. Serverseitig sollte man daher auf Verbindungsabbrüche achten (z. B. req.on('close') in Node.js).
Verbindungslimit: Über HTTP/1.1 erlauben Browser nur etwa 6 gleichzeitige Verbindungen pro Domain. Nicht geschlossene EventSource-Instanzen, z. B. in mehreren Tabs, können dieses Limit ausschöpfen. Deshalb nicht mehr benötigte Streams immer schließen.
Endlose Wiederverbindung: Antwortet der Server mit HTTP 204 oder mit einem falschen Content-Type, schließt der Browser die Verbindung selbst. Bei Netzwerkfehlern verbindet er dagegen unbegrenzt neu. Soll das enden, muss man close() selbst aufrufen.
Kompatibilität: Wird in allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge ab Version 79), nicht aber im Internet Explorer. In Node.js gibt es EventSource erst in neueren Versionen (experimentell ab 22). Sonst braucht man ein Paket wie eventsource.

Siehe auch

EventSource EventSource.readyState WebSocket.close() VideoFrame.close() HIDDevice.close()