BroadcastChannel.close() — Methode · JavaScript-Referenz

Signatur

BroadcastChannel.prototype.close()

Beschreibung

close() trennt ein BroadcastChannel-Objekt dauerhaft vom benannten Kanal. Danach werden keine message-Ereignisse mehr an dieses Objekt zugestellt. Außerdem kann das Objekt vom Garbage Collector freigegeben werden, auch wenn noch Ereignis-Listener registriert sind.

Solange ein Kanal offen ist und Listener hat, hält der Browser das Objekt am Leben. Wer also nicht ausdrücklich close() aufruft, behält den Kanal oft länger als gewollt, zum Beispiel nach dem Aushängen einer UI-Komponente in React, Vue oder Svelte. Rufe close() daher auf, sobald die Kommunikation nicht mehr gebraucht wird, etwa beim Abmelden, beim Verlassen einer Ansicht oder in der Aufräumfunktion eines Effekts.

Der Aufruf betrifft nur das jeweilige Objekt. Andere BroadcastChannel-Instanzen mit demselben Namen, egal ob im selben Tab, in anderen Tabs oder in Workern, bleiben verbunden und kommunizieren weiter. Ein geschlossener Kanal lässt sich nicht wieder öffnen. Dafür erzeugst du einfach eine neue Instanz mit new BroadcastChannel(name).

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Kanal nach Gebrauch schließen

const channel = new BroadcastChannel('app-status');

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

channel.postMessage({ type: 'ping' });

// Kommunikation wird nicht mehr benötigt
channel.close();
console.log('Kanal geschlossen');

Kanal geschlossen

Aufräumen in einem React-Effekt

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const channel = new BroadcastChannel('cart');
    channel.onmessage = (event) => setItems(event.data.items);

    // Beim Aushängen der Komponente den Kanal schließen
    return () => channel.close();
  }, []);

  return items;
};

Abmeldung an alle Tabs senden und dann schließen

const logout = async () => {
  await fetch('/api/logout', { method: 'POST' });

  const channel = new BroadcastChannel('auth');
  channel.postMessage({ type: 'logout' });
  channel.close(); // die Nachricht ist bereits eingereiht

  location.href = '/login';
};

postMessage nach close() wirft einen Fehler

const channel = new BroadcastChannel('demo');
channel.close();

try {
  channel.postMessage('Hallo');
} catch (err) {
  console.log(err.name);
}

InvalidStateError

// Wichtig · Fallstricke

Nicht umkehrbar: Nach close() wirft postMessage() eine DOMException vom Typ InvalidStateError. Für neue Kommunikation erzeugst du eine neue Instanz.
Nur lokal wirksam: Andere Instanzen mit demselben Kanalnamen werden nicht geschlossen und auch nicht benachrichtigt. Eine Abmeldung musst du bei Bedarf selbst als Nachricht senden.
Speicherlecks: Ohne close() bleibt ein Kanal mit registrierten Listenern aktiv. Das gilt besonders in Single-Page-Apps, in denen Komponenten oft ein- und ausgehängt werden.
Mehrfaches Aufrufen von close() ist harmlos und wirft keinen Fehler.
Nachrichten, die vor close() mit postMessage() gesendet wurden, werden noch an die anderen Instanzen zugestellt. Beim Schließen des Tabs oder beim Neuladen schließt der Browser den Kanal automatisch.
Kompatibilität: Chrome 54+, Firefox 38+, Safari 15.4+, Edge 79+. Der Internet Explorer unterstützt die API nicht.

Siehe auch

BroadcastChannel BroadcastChannel.postMessage() BroadcastChannel.name MessagePort.close() FileSystemHandle.remove() new RTCDataChannelEvent()