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