快捷導(dǎo)航

JavaScript?Broadcast?Channel?API使用學(xué)習(xí)

更新時(shí)間：2023年05月19日 08:42:42 作者：pingan8787

這篇文章主要為大家介紹了JavaScript的api學(xué)習(xí)之Broadcast?Channel?API使用方法詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

當(dāng)我們網(wǎng)頁需要在不同的瀏覽器窗口之間共享數(shù)據(jù)時(shí)，可能需要使用 WebSocket 或 WebRTC 等技術(shù)。但是，這些技術(shù)會(huì)過于復(fù)雜。而瀏覽器自帶的 Broadcast Channel API 可以讓我們輕松地在不同瀏覽器窗口之間共享數(shù)據(jù)，而無需使用復(fù)雜的技術(shù)。

本文將介紹 Broadcast Channel API 的基本和高級(jí)使用方法，并提供示例代碼來幫助讀者更好地理解和使用該 API。

?? 什么是 Broadcast Channel API？

Broadcast Channel API 是一個(gè)瀏覽器 Web API，它允許我們創(chuàng)建一個(gè)能夠?qū)?shù)據(jù)廣播給多個(gè)文檔或?yàn)g覽器窗口的通道。通過該通道實(shí)現(xiàn)不同瀏覽器窗口之間的數(shù)據(jù)共享。我們可以向該頻道發(fā)送消息，其他窗口則可以監(jiān)聽該頻道以接收消息。

?? 如何使用 Broadcast Channel API？

基礎(chǔ)使用方法

使用 Broadcast Channel API 的基本方法非常簡(jiǎn)單。我們只需要?jiǎng)?chuàng)建一個(gè) BroadcastChannel 實(shí)例，并使用 postMessage() 方法向該頻道發(fā)送消息。以下是一個(gè)簡(jiǎn)單的例子：

// 創(chuàng)建一個(gè)名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");
// 向該頻道發(fā)送消息
myChannel.postMessage("Hello world!");

然后在其他窗口中監(jiān)聽該頻道，以接收來自該頻道的消息。以下是一個(gè)簡(jiǎn)單的例子：

// 監(jiān)聽名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");
// 監(jiān)聽該頻道并處理消息
myChannel.onmessage = function (event) {
  console.log(event.data);
};

BroadcastChannel 實(shí)例還提供了一些其他的方法和事件，例如 close() 方法和 close 事件。詳細(xì)介紹可以在 MDN Web Docs 上查看完整文檔。

高級(jí)使用方法

Broadcast Channel API 還提供了一些高級(jí)使用方法，例如使用 ArrayBuffer 和 Transferable Objects 傳遞大型數(shù)據(jù)，使用 MessageEvent.source 屬性來識(shí)別消息的來源，以及使用 MessageEvent.ports 屬性通過 postMessage() 方法傳遞通信通道。
以下是一個(gè)使用 ArrayBuffer 和 Transferable Objects 傳遞數(shù)據(jù)的例子：

// 創(chuàng)建一個(gè)名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");

// 創(chuàng)建一個(gè) ArrayBuffer，其中包含您要發(fā)送的數(shù)據(jù)
const buffer = new ArrayBuffer(1024);

// 向該頻道發(fā)送包含 ArrayBuffer 的消息
myChannel.postMessage(buffer, [buffer]);

然后在其他窗口中接收該消息，并從 MessageEvent.data 屬性中獲取 ArrayBuffer：

// 監(jiān)聽名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");
// 監(jiān)聽該頻道并處理消息
myChannel.onmessage = function (event) {
  const buffer = event.data;
  // ...
};

Broadcast Channel API 還提供了其他高級(jí)用法，詳細(xì)請(qǐng)查看文檔。

?? 兼容性情況

Broadcast Channel API 兼容性良好，可以在大多數(shù)現(xiàn)代瀏覽器中使用。具體如下：

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 瀏覽器。如果你的網(wǎng)站需要支持 IE 瀏覽器，可能需要使用其他技術(shù)或庫來實(shí)現(xiàn)數(shù)據(jù)共享。

詳細(xì)兼容性情況可以在 Can I Use 網(wǎng)站上查看。

?? Broadcast Channel API 優(yōu)缺點(diǎn)

其優(yōu)點(diǎn)有以下幾個(gè) ??：

傳遞數(shù)據(jù)：提供了一種可靠的方法，使獨(dú)立的 JavaScript 應(yīng)用程序在同一瀏覽器同一站點(diǎn)內(nèi)傳遞數(shù)據(jù)。
傳輸速度快：以高速連接，提供更快的數(shù)據(jù)傳輸速度。
實(shí)時(shí)性：提供了實(shí)時(shí)，低延遲的數(shù)據(jù)傳輸。
可靠性：能夠在小的數(shù)據(jù)包丟失或意外丟失時(shí)進(jìn)行恢復(fù)。

不過，Broadcast Channel API 也存在以下缺點(diǎn)：

僅限同源：Broadcast Channel API 只能在同一瀏覽器同一站點(diǎn)內(nèi)進(jìn)行通信。這意味著，雖然不同的站點(diǎn)可以在同一瀏覽器內(nèi)打開，但無法使用 Broadcast Channel API 進(jìn)行通信。
受瀏覽器支持限制：與大多數(shù) Web API 一樣，Broadcast Channel API 受到不同瀏覽器和平臺(tái)的支持和兼容性限制。
需要共性的 API 使用：不同的 JavaScript 應(yīng)用程序需要知道如何使用 Broadcast Channel API 來共享數(shù)據(jù)。如果開發(fā)人員沒有必要的知識(shí)，那么 API 就可能不如預(yù)期地使用。

?? 實(shí)際開發(fā)案例

接下來舉一個(gè)實(shí)際開發(fā)案例。
案例需求：使用了 Broadcast Channel API 將相同來源的不同瀏覽器選項(xiàng)卡之間的消息廣播到其他選項(xiàng)卡。所有選項(xiàng)卡都將顯示同樣的結(jié)果，并且如果有任何一種選項(xiàng)卡更改了結(jié)果，則其他選項(xiàng)卡也會(huì)顯示更改后的結(jié)果。
實(shí)現(xiàn)代碼如下：

<!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>

在上面示例代碼中，我們創(chuàng)建了一個(gè)名為 resultChannel 的 Broadcast Channel ，并使用 channel.postMessage() 函數(shù)向所有瀏覽器選項(xiàng)卡廣播輸入框更改的值。當(dāng)有一種選項(xiàng)卡更改結(jié)果時(shí)，所有選項(xiàng)卡都會(huì)顯示更改后的結(jié)果。

此外，我們還演示了兩種不同的監(jiān)聽消息的方法（onmessage和addEventListener）以及如何將消息發(fā)送到 Broadcast Channel 中。

?? 倉庫推薦

推薦幾個(gè)基于 Broadcast Channel API 封裝的 Github 開源項(xiàng)目：

broadcast-channel - 該項(xiàng)目是一個(gè)簡(jiǎn)單易用的 Broadcast Channel API 封裝，擁有 1500+ ??。
react-broadcast-channel - 該項(xiàng)目是一個(gè) React 應(yīng)用程序的 Broadcast Channel API 封裝，擁有 1300+ ??。