成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Bmob / 3203人閱讀

摘要：是什么在前端，我們經(jīng)常會(huì)用來(lái)實(shí)現(xiàn)頁(yè)面間的通信，但這種方式更像是點(diǎn)對(duì)點(diǎn)的通信。而有時(shí)我們希望取消當(dāng)前頁(yè)面的廣播監(jiān)聽(tīng)一種方式是取消或者修改相應(yīng)的事件監(jiān)聽(tīng)另一種簡(jiǎn)單的方式就是使用實(shí)例為我們提供的方法。

Broadcast Channel 是什么？

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

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

下面就來(lái)速覽一下它的使用方法。

如何使用？

Broadcast Channel 的 API 非常簡(jiǎn)單易用。

創(chuàng)建

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

const bc = new BroadcastChannel("alienzhou");

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

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

該 name 值可以通過(guò)實(shí)例的.name屬性獲得

console.log(bc.name);
// alienzhou
監(jiān)聽(tīng)消息

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

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

對(duì)于錯(cuò)誤也可以綁定監(jiān)聽(tīng)：

bc.onmessageerror = function(e) {
    console.warn("error:", e);
};
除了為.onmessage賦值這種方式，也可以使用addEventListener來(lái)添加"message"監(jiān)聽(tīng)。
關(guān)閉

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

一種方式是取消或者修改相應(yīng)的"message"事件監(jiān)聽(tīng)

另一種簡(jiǎn)單的方式就是使用 Broadcast Channel 實(shí)例為我們提供的close方法。

bc.close();

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

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

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

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

Demo 效果

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

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

兼容性如何？

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

好在我們還有些其他方案可以作為補(bǔ)充（或者作為polyfill），其他的前端跨頁(yè)面通信可以參考我的另一篇文章《前端跨頁(yè)面通信的方法》。
對(duì)文章感興趣的同學(xué)歡迎關(guān)注 我的博客 >> https://github.com/alienzhou/blog

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109302.html

相關(guān)文章

  • 面試官：前端跨頁(yè)面通信，你知道哪些方法？

    摘要：一同源頁(yè)面間的跨頁(yè)面通信以下各種方式的在線可以戳這里瀏覽器的同源策略在下述的一些跨頁(yè)面通信方法中依然存在限制。因此，我們先來(lái)看看，在滿足同源策略的情況下，都有哪些技術(shù)可以用來(lái)實(shí)現(xiàn)跨頁(yè)面通信。 引言 在瀏覽器中，我們可以同時(shí)打開(kāi)多個(gè)Tab頁(yè)，每個(gè)Tab頁(yè)可以粗略理解為一個(gè)獨(dú)立的運(yùn)行環(huán)境，即使是全局對(duì)象也不會(huì)在多個(gè)Tab間共享。然而有些時(shí)候，我們希望能在這些獨(dú)立的Tab頁(yè)面之間同步頁(yè)面的數(shù)...

    DataPipeline 評(píng)論0 收藏0

  • Laravel5.1 事件廣播(Event Broadcasting)

    摘要：本文會(huì)用簡(jiǎn)單的代碼展示一個(gè)事件廣播的過(guò)程。定義一個(gè)被廣播的事件根據(jù)文檔的說(shuō)明，想讓事件被廣播，必須讓類實(shí)現(xiàn)一個(gè)接口，并且實(shí)現(xiàn)一個(gè)方法。返回一個(gè)數(shù)組，包含了事件發(fā)送到的頻道。觸發(fā)事件打開(kāi)另一個(gè)頁(yè)面。 事件廣播 簡(jiǎn)介 Laravel 5.1 之中新加入了事件廣播的功能，作用是把服務(wù)器中觸發(fā)的事件通過(guò)websocket服務(wù)通知客戶端，也就是瀏覽器，客戶端js根據(jù)接受到的事件，做出相應(yīng)動(dòng)作...

    yiliang 評(píng)論0 收藏0

  • Broadcast 使用詳解

    摘要：靜態(tài)注冊(cè)廣播的方法動(dòng)態(tài)注冊(cè)廣播在中動(dòng)態(tài)注冊(cè)廣播，通常格式如下動(dòng)態(tài)注冊(cè)廣播動(dòng)態(tài)注冊(cè)監(jiān)聽(tīng)滅屏點(diǎn)亮屏幕的廣播在廣播中動(dòng)態(tài)注冊(cè)廣播請(qǐng)注意一定要使用，防止為空，引起空指針異常。綁定模式此模式通過(guò)綁定組件等調(diào)用啟動(dòng)此服務(wù)隨綁定組件的消亡而解除綁定。 showImg(https://segmentfault.com/img/remote/1460000019975019?w=157&h=54); 極...

    Y3G 評(píng)論0 收藏0

  • 基于 Redis驅(qū)動(dòng)的 Laravel 事件廣播

    摘要：一前言之前在項(xiàng)目中需要使用的事件廣播，而且項(xiàng)目打算使用作為驅(qū)動(dòng)，但發(fā)現(xiàn)網(wǎng)上的資料大部分都是驅(qū)動(dòng)的，只能自己摸索著搭建了一下服務(wù)。 一、前言 之前在項(xiàng)目中需要使用laravel的事件廣播，而且項(xiàng)目打算使用redis作為驅(qū)動(dòng)，但發(fā)現(xiàn)網(wǎng)上的資料大部分都是Pusher驅(qū)動(dòng)的，只能自己摸索著搭建了一下服務(wù)?，F(xiàn)在將這個(gè)過(guò)程記錄一下，希望能幫到其他人。 二、項(xiàng)目的環(huán)境 事件廣播需要用到redis,n...

    fantix 評(píng)論0 收藏0

  • PHP 程序員也能做的 Java 開(kāi)發(fā) 30分鐘使用 netty 輕松打造一個(gè)高性能 websock

    摘要：唯一的知識(shí)點(diǎn)就是的基礎(chǔ)使用?？梢院?jiǎn)單的理解下面的代碼就構(gòu)建了一個(gè)服務(wù)器。握手完成之后的消息傳遞則在中處理。實(shí)際情況下，不可能那么多人同時(shí)說(shuō)話廣播，而是說(shuō)話的人少，接受廣播的人多。 硬廣一波 SF 官方首頁(yè)推薦《PHP進(jìn)階之路》（你又多久沒(méi)有投資自己了？先看后買(mǎi)） 我們下面則將一些實(shí)際場(chǎng)景都添加進(jìn)去，比如用戶身份的驗(yàn)證，游客只能瀏覽不能發(fā)言，多房間（頻道）的聊天。該博客非常適合 Java...

    kviccn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<