【3分鐘速覽】前端廣播式通訊：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' 監聽。
關閉
可以看到，上述短短几行程式碼就可以實現多個頁面間的廣播通訊，非常方便。而有時我們希望取消當前頁面的廣播監聽：
'message' close
bc.close(); 複製程式碼
兩者是有區別的：
取消 'message' 監聽只是讓頁面不對廣播訊息進行響應，Broadcast Channel 仍然存在；而呼叫 close 方法這會切斷與 Broadcast Channel 的連線，瀏覽器才能夠嘗試回收該物件，因為此時瀏覽器才會知道使用者已經不需要使用廣播頻道了。
在關閉後呼叫 postMessage 會出現如下報錯
如果之後又再需要廣播，則可以重新建立一個相同 name 的 Broadcast Channel。