Broadcast Channel API

Baseline 已廣泛支援

此特性已經十分成熟,可在許多裝置和瀏覽器版本上使用。自 2022 年 3 月起,它已在各瀏覽器中可用。

注意:此功能在 Web Workers 中可用。

Broadcast Channel API 允許在同一 上的 瀏覽上下文(即 視窗標籤頁框架iframe)與 worker 之間進行基本通訊。

注意: 確切地說,通訊允許在使用相同 儲存分割槽的瀏覽上下文之間進行。儲存首先根據頂級站點進行分割槽——因此,例如,如果您有一個在 a.com 上開啟的頁面,其中嵌入了一個來自 b.com 的 iframe,而另一個頁面開啟到 b.com,則該 iframe 無法與第二個頁面通訊,儘管它們在技術上是同源的。但是,如果第一個頁面也在 b.com 上,則 iframe 可以與第二個頁面通訊。

透過建立 BroadcastChannel 物件,您可以接收發布到該物件的任何訊息。您不必維護與您希望通訊的幀或 worker 的引用:它們可以透過使用相同的名稱構造自己的 BroadcastChannel 來“訂閱”特定的頻道,並在它們之間實現雙向通訊。

The principle of the Broadcast Channel API

Broadcast Channel 介面

建立或加入頻道

客戶端透過建立 BroadcastChannel 物件來加入廣播頻道。其 建構函式接受一個引數:頻道的 名稱。如果它是第一個連線到該廣播頻道名稱的客戶端,則會建立底層頻道。

js
// Connection to a broadcast channel
const bc = new BroadcastChannel("test_channel");

傳送訊息

在建立的 BroadcastChannel 物件上呼叫 postMessage() 方法就足夠了,該方法接受任何物件作為引數。例如字串訊息

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

傳送到頻道的資料使用 結構化克隆演算法進行序列化。這意味著您可以安全地傳送各種資料物件,而無需自己進行序列化。

API 不會為訊息關聯任何語義,因此程式碼需要知道要接收哪種訊息以及如何處理它們。

接收訊息

當釋出訊息時,會向連線到該頻道的每個 BroadcastChannel 物件分派一個 message 事件。可以使用 onmessage 事件處理程式為該事件執行一個函式。

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

斷開頻道連線

要離開頻道,請在該物件上呼叫 close() 方法。這會將物件與底層頻道斷開連線,允許垃圾回收。

js
// Disconnect the channel
bc.close();

總結

Broadcast Channel API 的自包含介面允許跨上下文通訊。它可以用來檢測同一源下其他標籤頁中的使用者操作,例如使用者登入或登出。

訊息協議未定義,不同的瀏覽上下文需要自己實現;規範中沒有協商或要求。

介面

BroadcastChannel

表示任何給定 瀏覽上下文都可以訂閱的命名頻道。

規範

規範
HTML
# broadcasting-to-other-browsing-contexts

瀏覽器相容性

另見