資訊專欄INFORMATION COLUMN
摘要：是什么在前端，我們經常會用來實現頁面間的通信，但這種方式更像是點對點的通信。而有時我們希望取消當前頁面的廣播監聽一種方式是取消或者修改相應的事件監聽另一種簡單的方式就是使用實例為我們提供的方法。
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"事件監聽
另一種簡單的方式就是使用 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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109302.html
摘要：一同源頁面間的跨頁面通信以下各種方式的在線可以戳這里瀏覽器的同源策略在下述的一些跨頁面通信方法中依然存在限制。因此，我們先來看看，在滿足同源策略的情況下，都有哪些技術可以用來實現跨頁面通信。 引言 在瀏覽器中，我們可以同時打開多個Tab頁，每個Tab頁可以粗略理解為一個獨立的運行環境，即使是全局對象也不會在多個Tab間共享。然而有些時候，我們希望能在這些獨立的Tab頁面之間同步頁面的數...
摘要：本文會用簡單的代碼展示一個事件廣播的過程。定義一個被廣播的事件根據文檔的說明，想讓事件被廣播，必須讓類實現一個接口，并且實現一個方法。返回一個數組，包含了事件發送到的頻道。觸發事件打開另一個頁面。 事件廣播 簡介 Laravel 5.1 之中新加入了事件廣播的功能，作用是把服務器中觸發的事件通過websocket服務通知客戶端，也就是瀏覽器，客戶端js根據接受到的事件，做出相應動作...
摘要：靜態注冊廣播的方法動態注冊廣播在中動態注冊廣播，通常格式如下動態注冊廣播動態注冊監聽滅屏點亮屏幕的廣播在廣播中動態注冊廣播請注意一定要使用，防止為空，引起空指針異常。綁定模式此模式通過綁定組件等調用啟動此服務隨綁定組件的消亡而解除綁定。 showImg(https://segmentfault.com/img/remote/1460000019975019?w=157&h=54); 極...
摘要：一前言之前在項目中需要使用的事件廣播，而且項目打算使用作為驅動，但發現網上的資料大部分都是驅動的，只能自己摸索著搭建了一下服務。 一、前言 之前在項目中需要使用laravel的事件廣播，而且項目打算使用redis作為驅動，但發現網上的資料大部分都是Pusher驅動的，只能自己摸索著搭建了一下服務。現在將這個過程記錄一下，希望能幫到其他人。 二、項目的環境 事件廣播需要用到redis,n...
摘要：唯一的知識點就是的基礎使用。可以簡單的理解下面的代碼就構建了一個服務器。握手完成之后的消息傳遞則在中處理。實際情況下，不可能那么多人同時說話廣播，而是說話的人少，接受廣播的人多。 硬廣一波 SF 官方首頁推薦《PHP進階之路》（你又多久沒有投資自己了？先看后買） 我們下面則將一些實際場景都添加進去，比如用戶身份的驗證，游客只能瀏覽不能發言，多房間（頻道）的聊天。該博客非常適合 Java...
閱讀 1261·2021-09-02 13:36
閱讀 2713·2019-08-30 15:44
閱讀 2971·2019-08-29 15:04
閱讀 3193·2019-08-26 13:40
閱讀 3643·2019-08-26 13:37
閱讀 1171·2019-08-26 12:22
閱讀 1002·2019-08-26 11:36
閱讀 1213·2019-08-26 10:41
