Broadcast Channel 是什么？

在前端，我們經(jīng)常會用postMessage來實現(xiàn)頁面間的通信，但這種方式更像是點對點的通信。對于一些需要廣播（讓所有頁面知道）的消息，用postMessage不是非常自然。Broadcast Channel 就是用來彌補這個缺陷的。

顧名思義，Broadcast Channel 會創(chuàng)建一個所有同源頁面都可以共享的（廣播）頻道，因此其中某一個頁面發(fā)送的消息可以被其他頁面監(jiān)聽到。

下面就來速覽一下它的使用方法。

如何使用？

Broadcast Channel 的 API 非常簡單易用。

創(chuàng)建

首先我們會使用構(gòu)造函數(shù)創(chuàng)建一個實例：

const bc = new BroadcastChannel('alienzhou');

可以接受一個DOMString作為 name，用以標(biāo)識這個 channel。在其他頁面，可以通過傳入相同的 name 來使用同一個廣播頻道。用 MDN 上的話來解釋就是：

There is one single channel with this name for all browsing contexts with the same origin.

該 name 值可以通過實例的.name屬性獲得

console.log(bc.name);
// alienzhou

監(jiān)聽消息

Broadcast Channel 創(chuàng)建完成后，就可以在頁面監(jiān)聽廣播的消息：

bc.onmessage = function(e) {
    console.log('receive:', e.data);
};

對于錯誤也可以綁定監(jiān)聽：

bc.onmessageerror = function(e) {
    console.warn('error:', e);
};

除了為.onmessage賦值這種方式，也可以使用addEventListener來添加'message'監(jiān)聽。

關(guān)閉

可以看到，上述短短幾行代碼就可以實現(xiàn)多個頁面間的廣播通信，非常方便。而有時我們希望取消當(dāng)前頁面的廣播監(jiān)聽：

• 一種方式是取消或者修改相應(yīng)的'message'事件監(jiān)聽
• 另一種簡單的方式就是使用 Broadcast Channel 實例為我們提供的close方法。

bc.close();

兩者是有區(qū)別的：

取消'message'監(jiān)聽只是讓頁面不對廣播消息進行響應(yīng)，Broadcast Channel 仍然存在；而調(diào)用close方法這會切斷與 Broadcast Channel 的連接，瀏覽器才能夠嘗試回收該對象，因為此時瀏覽器才會知道用戶已經(jīng)不需要使用廣播頻道了。

在關(guān)閉后調(diào)用postMessage會出現(xiàn)如下報錯

image

如果之后又再需要廣播，則可以重新創(chuàng)建一個相同 name 的 Broadcast Channel。

Demo 效果

可以戳這里查看在線 Demo >>

下面是 Broadcast Channel Demo 的演示效果：

image

兼容性如何？

Broadcast Channel 是一個非常好用的多頁面消息同步 API，然而兼容性卻不是很樂觀。

image

好在我們還有些其他方案可以作為補充（或者作為polyfill），其他的前端跨頁面通信可以參考我的另一篇文章《前端跨頁面通信的方法》。