【3分鐘速覽】前端廣播式通訊：Broadcast Channel

Broadcast Channel 是什麼？

在前端，咱們常常會用postMessage來實現頁面間的通訊，但這種方式更像是點對點的通訊。對於一些須要廣播（讓全部頁面知道）的消息，用postMessage不是很是天然。Broadcast Channel 就是用來彌補這個缺陷的。

顧名思義，Broadcast Channel 會建立一個全部同源頁面均可以共享的（廣播）頻道，所以其中某一個頁面發送的消息能夠被其餘頁面監聽到。

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

如何使用？

Broadcast Channel 的 API 很是簡單易用。

建立

首先咱們會使用構造函數建立一個實例：

const bc = new BroadcastChannel('alienzhou');
複製代碼

能夠接受一個DOMString做爲 name，用以標識這個 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
複製代碼

監聽消息

Broadcast Channel 建立完成後，就能夠在頁面監聽廣播的消息：

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

對於錯誤也能夠綁定監聽：

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

除了爲.onmessage賦值這種方式，也可使用addEventListener來添加'message'監聽。

發送消息

Broadcast Channel 實例也有一個對應的postMessage用於發送消息：

bc.postMessage('hello')
複製代碼

關閉

能夠看到，上述短短几行代碼就能夠實現多個頁面間的廣播通訊，很是方便。而有時咱們但願取消當前頁面的廣播監聽：

• 一種方式是取消或者修改相應的'message'事件監聽
• 另外一種簡單的方式就是使用 Broadcast Channel 實例爲咱們提供的close方法。

bc.close();
複製代碼

二者是有區別的：

取消'message'監聽只是讓頁面不對廣播消息進行響應，Broadcast Channel 仍然存在；而調用close方法這會切斷與 Broadcast Channel 的鏈接，瀏覽器纔可以嘗試回收該對象，由於此時瀏覽器纔會知道用戶已經不須要使用廣播頻道了。

在關閉後調用postMessage會出現以下報錯

若是以後又再須要廣播，則能夠從新建立一個相同 name 的 Broadcast Channel。

Demo 效果

能夠戳這裏查看在線 Demo >>

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

兼容性如何？

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

好在咱們還有些其餘方案能夠做爲補充（或者做爲polyfill），其餘的前端跨頁面通訊能夠參考個人另外一篇文章《前端跨頁面通訊的方法》。

對文章感興趣的同窗歡迎關注 個人博客 >> https://github.com/alienzhou/blog