Broadcast Channel API

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Hinweis: Diese Funktion ist inWeb Workers verfügbar.

DieBroadcast Channel API ermöglicht eine grundlegende Kommunikation zwischenBrowsing-Kontexten (alsoFenstern,Tabs,Frames oderIframes) und Workern auf demselbenOrigin.

Hinweis:Genauer gesagt, ist die Kommunikation zwischen Browsing-Kontexten mit derselbenStorage-Partition erlaubt. Der Speicher wird zuerst entsprechend den obersten Seiten partitioniert — wenn Sie beispielsweise eine geöffnete Seite beia.com haben, die ein iframe vonb.com einbettet, und eine andere Seite geöffnet ist beib.com, dann kann das iframe nicht mit der zweiten Seite kommunizieren, obwohl sie technisch gesehen denselben Ursprung haben. Wenn jedoch die erste Seite ebenfalls aufb.com ist, kann das iframe mit der zweiten Seite kommunizieren.

Indem Sie einBroadcastChannel-Objekt erstellen, können Sie alle Nachrichten empfangen, die an diesen gesendet werden. Sie müssen keine Referenz zu den Frames oder Workern pflegen, mit denen Sie kommunizieren möchten: Sie können sich durch das Erstellen eines eigenenBroadcastChannel mit demselben Namen auf einen bestimmten Kanal "abonnieren" und eine bidirektionale Kommunikation zwischen allen führen.

Das Prinzip der Broadcast Channel API

Broadcast Channel-Schnittstelle

Erstellen oder Beitreten eines Kanals

Ein Client tritt einem Broadcast Channel bei, indem er einBroadcastChannel-Objekt erstellt. DerKonstruktor nimmt einen einzigen Parameter: denNamen des Kanals. Wenn es das erste ist, das sich mit diesem Broadcast-Kanalnamen verbindet, wird der zugrunde liegende Kanal erstellt.

// Connection to a broadcast channelconst bc = new BroadcastChannel("test_channel");

Senden einer Nachricht

Es genügt, die MethodepostMessage() auf dem erstelltenBroadcastChannel-Objekt aufzurufen, welches jedes Objekt als Argument akzeptiert. Ein Beispiel für eine Textnachricht:

// Example of sending of a very simple messagebc.postMessage("This is a test message.");

Daten, die an den Kanal gesendet werden, werden mit demStructured Clone Algorithmus serialisiert. Das bedeutet, dass Sie eine breite Palette von Datenobjekten sicher senden können, ohne sie selbst serialisieren zu müssen.

Die API ordnet den Nachrichten keine Semantik zu, daher liegt es an Ihrem Code, zu wissen, welche Art von Nachrichten zu erwarten sind und was damit zu tun ist.

Empfang einer Nachricht

Wenn eine Nachricht gepostet wird, wird einmessage-Ereignis an jedesBroadcastChannel-Objekt gesendet, das mit diesem Kanal verbunden ist. Eine Funktion kann für dieses Ereignis mit demonmessage-Ereignishandler ausgeführt werden:

// A handler that only logs the event to the console:bc.onmessage = (event) => {  console.log(event);};

Trennen eines Kanals

Um einen Kanal zu verlassen, rufen Sie dieclose()-Methode auf dem Objekt auf. Dies trennt das Objekt vom zugrunde liegenden Kanal und ermöglicht die Speicherbereinigung.

// Disconnect the channelbc.close();

Fazit

Das selbstenthaltende Interface der Broadcast Channel API ermöglicht die Kommunikation zwischen verschiedenen Kontexten. Es kann verwendet werden, um Benutzeraktionen in anderen Tabs innerhalb desselben Origin zu erkennen, wie wenn der Benutzer sich an- oder abmeldet.

Das Nachrichtenprotokoll ist nicht definiert und die verschiedenen Browsing-Kontexte müssen es selbst implementieren; es gibt keine Aushandlung oder Anforderung von der Spezifikation.