快捷導(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)頁(yè)需要在不同的瀏覽器窗口之間共享數(shù)據(jù)時(shí)，可能需要使用 WebSocket 或 WebRTC 等技術(shù)。但是，這些技術(shù)會(huì)過(guò)于復(fù)雜。而瀏覽器自帶的 Broadcast Channel API 可以讓我們輕松地在不同瀏覽器窗口之間共享數(shù)據(jù)，而無(wú)需使用復(fù)雜的技術(shù)。

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

?? 什么是 Broadcast Channel API？

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

?? 如何使用 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)聽(tīng)該頻道，以接收來(lái)自該頻道的消息。以下是一個(gè)簡(jiǎn)單的例子：

// 監(jiān)聽(tīng)名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");
// 監(jiān)聽(tīng)該頻道并處理消息
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 屬性來(lái)識(shí)別消息的來(lái)源，以及使用 MessageEvent.ports 屬性通過(guò) 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)聽(tīng)名為 "my_channel" 的廣播頻道
const myChannel = new BroadcastChannel("my_channel");
// 監(jiān)聽(tīng)該頻道并處理消息
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ù)或庫(kù)來(lái)實(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ù)。

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

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

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

接下來(lái)舉一個(gè)實(shí)際開(kāi)發(fā)案例。
案例需求：使用了 Broadcast Channel API 將相同來(lái)源的不同瀏覽器選項(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)聽(tīng)消息的方法（onmessage和addEventListener）以及如何將消息發(fā)送到 Broadcast Channel 中。

?? 倉(cāng)庫(kù)推薦

推薦幾個(gè)基于 Broadcast Channel API 封裝的 Github 開(kāi)源項(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+ ??。