Broadcast Channel API
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die Broadcast Channel API ermöglicht grundlegende Kommunikation zwischen Browsing-Kontexten (das heißt Fenster, Tabs, Frames oder iFrames) und Workern auf demselben Origin.
Hinweis: Genau genommen ist die Kommunikation zwischen Browsing-Kontexten erlaubt, die denselben Speicherpartition verwenden. Speicher wird zuerst entsprechend der Top-Level-Sites partitioniert. Wenn Sie also eine Seite bei a.com geöffnet haben, die ein iframe von b.com einbettet, und eine andere Seite auf b.com geöffnet ist, kann das iframe trotz technischem Same-Origin nicht mit der zweiten Seite kommunizieren. Wenn die erste Seite jedoch auch auf b.com ist, kann das iframe mit der zweiten Seite kommunizieren.
Durch die Erstellung eines BroadcastChannel-Objekts können Sie Nachrichten empfangen, die an den Kanal gesendet werden. Sie müssen keine Referenz zu den Frames oder Workern, mit denen Sie kommunizieren möchten, pflegen: Diese können sich durch den Bau ihres eigenen BroadcastChannel mit demselben Namen auf einen bestimmten Kanal "abonnieren" und bidirektionale Kommunikation zwischen all diesen erhalten.
Broadcast Channel-Schnittstelle
Erstellen oder Beitreten eines Kanals
Ein Client tritt einem Broadcast-Kanal bei, indem er ein BroadcastChannel-Objekt erstellt. Der Konstruktor nimmt einen einzigen Parameter: den Namen des Kanals. Wenn es der erste Verbindungspunkt zu diesem Broadcast-Kanalnamen ist, wird der zugrundeliegende Kanal erstellt.
// Connection to a broadcast channel
const bc = new BroadcastChannel("test_channel");
Eine Nachricht senden
Es reicht aus, die Methode postMessage() am erstellten BroadcastChannel-Objekt aufzurufen, das jedes Objekt als Argument nimmt. Ein Beispiel für eine Zeichenkette:
// Example of sending of a very simple message
bc.postMessage("This is a test message.");
Daten, die an den Kanal gesendet werden, werden mithilfe des Structured Clone Algorithmus serialisiert. Das bedeutet, dass Sie eine Vielzahl von Datenobjekten sicher senden können, ohne sie selbst serialisieren zu müssen.
Die API ordnet Nachrichten keine Semantik zu, daher muss der Code wissen, welche Art von Nachrichten erwartet und was damit gemacht werden soll.
Eine Nachricht empfangen
Wenn eine Nachricht gesendet wird, wird ein message-Ereignis an jedes BroadcastChannel-Objekt gesendet, das mit diesem Kanal verbunden ist. Eine Funktion kann für dieses Ereignis mit dem onmessage-Ereignishandler ausgeführt werden:
// A handler that only logs the event to the console:
bc.onmessage = (event) => {
console.log(event);
};
Einen Kanal trennen
Um einen Kanal zu verlassen, rufen Sie die Methode close() am Objekt auf. Dies trennt das Objekt vom zugrundeliegenden Kanal, sodass es Müll gesammelt werden kann.
// Disconnect the channel
bc.close();
Fazit
Die selbstständige Schnittstelle der Broadcast Channel API ermöglicht die Kommunikation über verschiedene Kontexte hinweg. Sie kann verwendet werden, um Benutzeraktionen in anderen Tabs innerhalb desselben Origin zu erkennen, wie zum Beispiel, wenn sich der Benutzer ein- oder ausloggt.
Das Nachrichtenprotokoll ist nicht definiert und die verschiedenen Browsing-Kontexte müssen es selbst implementieren; es gibt keine Verhandlung oder Anforderung seitens der Spezifikation.
Schnittstellen
BroadcastChannel-
Repräsentiert einen benannten Kanal, zu dem sich jeder Browsing-Kontext eines bestimmten Origin anmelden kann.
Spezifikationen
| Specification |
|---|
| HTML Standard # broadcasting-to-other-browsing-contexts |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
BroadcastChannel, die Implementierungsschnittstelle.