重學 JavaScript API - Broadcast Channel API

pingan8787發表於2023-05-18
JavaScriptAPIAST

當我們網頁需要在不同的瀏覽器視窗之間共享資料時，可能需要使用 WebSocket 或 WebRTC 等技術。但是，這些技術會過於複雜。而瀏覽器自帶的 Broadcast Channel API 可以讓我們輕鬆地在不同瀏覽器視窗之間共享資料，而無需使用複雜的技術。

本文將介紹 Broadcast Channel API 的基本和高階使用方法，並提供示例程式碼來幫助讀者更好地理解和使用該 API。

? 什麼是 Broadcast Channel API？

Broadcast Channel API 是一個瀏覽器 Web API，它允許我們建立一個能夠將資料廣播給多個文件或瀏覽器視窗的通道。透過該通道實現不同瀏覽器視窗之間的資料共享。我們可以向該頻道傳送訊息，其他視窗則可以監聽該頻道以接收訊息。

? 如何使用 Broadcast Channel API？

基礎使用方法

使用 Broadcast Channel API 的基本方法非常簡單。我們只需要建立一個 BroadcastChannel 例項，並使用 postMessage() 方法向該頻道傳送訊息。以下是一個簡單的例子：

// 建立一個名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");

// 向該頻道傳送訊息
myChannel.postMessage("Hello world!");

然後在其他視窗中監聽該頻道，以接收來自該頻道的訊息。以下是一個簡單的例子：

// 監聽名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");

// 監聽該頻道並處理訊息
myChannel.onmessage = function (event) {
  console.log(event.data);
};

BroadcastChannel 例項還提供了一些其他的方法和事件，例如 close() 方法和 close 事件。詳細介紹可以在 MDN Web Docs 上檢視完整文件。

高階使用方法

Broadcast Channel API 還提供了一些高階使用方法，例如使用 ArrayBuffer 和 Transferable Objects 傳遞大型資料，使用 MessageEvent.source 屬性來識別訊息的來源，以及使用 MessageEvent.ports 屬性透過 postMessage() 方法傳遞通訊通道。
以下是一個使用 ArrayBuffer 和 Transferable Objects 傳遞資料的例子：

// 建立一個名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");

// 建立一個 ArrayBuffer，其中包含您要傳送的資料
const buffer = new ArrayBuffer(1024);

// 向該頻道傳送包含 ArrayBuffer 的訊息
myChannel.postMessage(buffer, [buffer]);

然後在其他視窗中接收該訊息，並從 MessageEvent.data 屬性中獲取 ArrayBuffer：

// 監聽名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");

// 監聽該頻道並處理訊息
myChannel.onmessage = function (event) {
  const buffer = event.data;
  // ...
};

Broadcast Channel API 還提供了其他高階用法，詳細請檢視文件。

? 相容性情況

Broadcast Channel API 相容性良好，可以在大多數現代瀏覽器中使用。具體如下：

  • Chrome 54+ ✅
  • Firefox 38+ ✅
  • Safari 10+ ✅
  • Opera 41+ ✅
  • Edge 16+ ✅
  • iOS Safari 10.0-10.2+ ✅
  • Android Browser 67+ ✅
  • Chrome for Android 59+ ✅

⚠️ 需要注意的是，Broadcast Channel API 目前還不支援 Internet Explorer 瀏覽器。如果你的網站需要支援 IE 瀏覽器，可能需要使用其他技術或庫來實現資料共享。

詳細相容性情況可以在 Can I Use 網站上檢視。

? Broadcast Channel API 優缺點

其優點有以下幾個 ?：

  1. 傳遞資料：提供了一種可靠的方法，使獨立的 JavaScript 應用程式在同一瀏覽器同一站點內傳遞資料。
  2. 傳輸速度快：以高速連線，提供更快的資料傳輸速度。
  3. 實時性：提供了實時，低延遲的資料傳輸。
  4. 可靠性：能夠在小的資料包丟失或意外丟失時進行恢復。

不過，Broadcast Channel API 也存在以下缺點：

  1. 僅限同源：Broadcast Channel API 只能在同一瀏覽器同一站點內進行通訊。這意味著，雖然不同的站點可以在同一瀏覽器內開啟，但無法使用 Broadcast Channel API 進行通訊。
  2. 受瀏覽器支援限制：與大多數 Web API 一樣，Broadcast Channel API 受到不同瀏覽器和平臺的支援和相容性限制。
  3. 需要共性的 API 使用：不同的 JavaScript 應用程式需要知道如何使用 Broadcast Channel API 來共享資料。如果開發人員沒有必要的知識，那麼 API 就可能不如預期地使用。

? 實際開發案例

接下來舉一個實際開發案例。
案例需求：使用了 Broadcast Channel API 將相同來源的不同瀏覽器選項卡之間的訊息廣播到其他選項卡。所有選項卡都將顯示同樣的結果，並且如果有任何一種選項卡更改了結果，則其他選項卡也會顯示更改後的結果。
實現程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Broadcast Channel Example</title>
  </head>
  <body>
    <h2>Broadcast Channel Example</h2>
    <div id="result">Result: <span></span></div>

    <script>
      // Create a new Broadcast Channel with name
      const channel = new BroadcastChannel("resultChannel");
      const resultEl = document.querySelector("#result span");

      // Option 1 Base
      // Listen for messages from the channel
      channel.onmessage = (e) => {
        resultEl.innerText = e.data;
      };

      // Option 2 - Using addEventListener
      // channel.addEventListener('message', e => {
      //    resultEl.innerText = e.data;
      // });

      // Listen for changes on the input
      const inputEl = document.createElement("input");
      inputEl.type = "text";

      inputEl.addEventListener("input", (e) => {
        const val = e.target.value;

        // Broadcast the change to other tabs
        channel.postMessage(val);
        resultEl.innerText = val;
      });

      // Insert the input element
      document.body.appendChild(inputEl);
    </script>
  </body>
</html>

在上面示例程式碼中，我們建立了一個名為 resultChannel 的 Broadcast Channel ，並使用 channel.postMessage() 函式向所有瀏覽器選項卡廣播輸入框更改的值。 當有一種選項卡更改結果時，所有選項卡都會顯示更改後的結果。
此外，我們還演示了兩種不同的監聽訊息的方法（onmessage和addEventListener）以及如何將訊息傳送到 Broadcast Channel 中。

? 倉庫推薦

推薦幾個基於 Broadcast Channel API 封裝的 Github 開源專案：

  1. broadcast-channel - 該專案是一個簡單易用的 Broadcast Channel API 封裝，擁有 1500+ ⭐️。
  2. react-broadcast-channel - 該專案是一個 React 應用程式的 Broadcast Channel API 封裝，擁有 1300+ ⭐️。

? 總結和建議

Broadcast Channel API 是一種 Web API，能夠方便地在不同瀏覽器視窗之間共享資料。希望本文能夠幫助讀者更好地使用該 API。

相關文章