Um Nachrichten zwischen Browsing-Kontexten wie Fenstern, Tabs, Frames oder Iframes innerhalb desselben Ursprungs zu senden, können wir die Broadcast-Kanal-API.

In diesem Artikel erfahren Sie, wie Sie damit Nachrichten senden und empfangen.

Um die API zu verwenden, müssen wir ein BroadcastChannel Objekt erstellen, das den zugrunde liegenden Kanal abhört.

Dann können wir alle Nachrichten empfangen, die an sie gesendet wurden. Wir müssen keinen Verweis auf Iframes oder Worker pflegen, mit denen wir kommunizieren möchten.

Alles innerhalb desselben Ursprungs kann einen bestimmten Kanal abonnieren, indem ein BroadcasChannel und dann haben sie Vollduplex-Kommunikation zwischen allen von ihnen.

Wir können es wie folgt verwenden:

const bc = new BroadcastChannel("test_channel");
bc.postMessage("test");
bc.onmessage = ev => {
console.log(ev.data);
};
bc.close();

Im obigen Code haben wir eine BroadcastChannel Instanz erstellt und dann postMessage aufgerufen und die Eigenschaft onmessage gesetzt, um gesendete Nachrichten abzuhören.

Auf die Daten wird mit der Eigenschaft data zugegriffen.

Wir können dann close aufrufen, um den Kanal zu schließen, wenn wir fertig sind.

Wir können jede Art von Objekt senden und nicht nur einen String.

Message Event

Der ev Parameter im onmessage Handler ist das MessageEvent Objekt.

Es hat einige schreibgeschützte Eigenschaften, auf die wir zugreifen können:

• data — die vom Nachrichtenemitter gesendeten Daten. Dies ist der Inhalt, den wir übergeben haben postMessage
• origin — eine Zeichenfolge, die den Ursprung der ausgegebenen Nachricht darstellt
• lastEventId — eine Zeichenfolge, die eine eindeutige ID für das Ereignis darstellt
• source — ein MessageEventSource Objekt (das ein WindowProxyMessagePort oder ServiceWorker Objekt sein kann), das den Nachrichtenemitter darstellt
• ports — ein Array von MessagePort Objekt, das die ports, die dem Kanal zugeordnet sind, über den die Nachricht gesendet wird.

Fehlerbehandlung

Um Fehler beim Senden von Nachrichten zu behandeln, können wir einen Ereignishandler auf die Eigenschaft onmessageerror des Broadcast Channel-Objekts setzen.

Zum Beispiel können wir schreiben:

bc.onmessageerror = e => console.log(e);

Dann können wir alle auftretenden Fehler protokollieren.

Name

Wir können den Namen des Kanals mit der name Eigenschaft erhalten.

Dazu können wir schreiben:

const bc = new BroadcastChannel("test_channel");
console.log(bc.name);

Dann können wir sehen, dass der Name unseres Broadcast-Kanals test_channel aus dem console.log .

Fazit

Die Broadcast Channel API ist eine sehr einfache API, mit der wir kontextübergreifend kommunizieren können.

Es kann verwendet werden, um Benutzeraktionen in den anderen Registerkarten innerhalb der Ursprungsumgebung derselben Site zu erkennen, z. B. wenn sich ein Benutzer bei einem Konto anmeldet.

Es gibt kein Messaging-Protokoll und verschiedene Dokumente in verschiedenen Kontexten müssen es selbst implementieren.

Außerdem gibt es auch keine Verhandlung und es ist nicht von der Spezifikation erforderlich.