Dwayne的個人博客

HTML BroadcastChannel API

當前瀏覽器中只有Firefox38唯一能支持BroadcastChannel API(在編寫本文的時間點)，而Firefox38官方宣稱要到2015年5月份纔會發佈正式版本。這套新的API將會打開一個新的充滿可能性的世界，解決我們已有的從postMessage API所繼承過來的衆多限制。

BroadcastChannel API作爲WHATWG living HTML標準的一部分可以在這裏進行詳細信息查看。

什麼是BroadcastChannel API?

BroadcastChannel API 允許同一原始域和用戶代理下的所有窗口,iFrames等進行交互。也就是說，如果用戶打開了同一個網站的的兩個標籤窗口，如果網站內容發生了變化，那麼兩個窗口會同時得到更新通知。

還是不明覺厲？就拿Facebook作爲例子吧，假如你現在已經打開了Facebook的一個窗口，但是你此時還沒有登錄，此時你又打開另外一個窗口進行登錄，那麼你就可以通知其他窗口/標籤頁去告訴它們一個用戶已經登錄了並請求它們進行相應的頁面更新。

本質上說BroadcastChannel API 允許我們在我們不使用sockets和timers的情況下同樣可以打造出一個能夠自我感知狀態變化的應用，這對於一個發佈/訂閱形式的系統效果尤佳。

創建一個新的BroadcastChannel API 是一個易如反掌的事情。你需要做的僅僅是把通道名稱作爲一個參數傳給BroadcastChannel的構造函數然後把它的引用保存到一個變量上面而已。

let cast = new BroadcastChannel('mychannel');

發送一個消息也是一個非常簡單的事情，你只需要引用賦有了BroadcastChannel實例的變量(在本示例中就是上面的cast變量)然後調用其postMessage方法就可以了。

如果你對其他基於發佈/訂閱的系統很熟悉的話，如果你把postMessage這個成員方法稱呼成event emitter也許會更合情合理。

postMessage方法做的漂亮的地方是你可以用它來發送任何東西。你可以發送一個對象，一個字串，隨你便。只要訂閱者可以意識到你要發送的是什麼事件就行了，好好享受吧。

myObj = {someKey: 'Some value', anotherKey: 'Another value'};
cast.postMessage(myObj);

不像一些更加小鮮肉級別的發佈/訂閱系統，“主題“是沒有原生的實現支持的。意思就是說你並沒有一個通道可以把“主題“廣播到所有監聽的訂閱者手上。

但是，通過編寫一些創造性的代碼你還是可以模仿這種實現的，你可以使用對象來把“主題“作爲對象的一個鍵，把消息內容作爲另外一個鍵"data"來進行發送。

“接收者“更通俗的叫法也許應該叫做"訂閱者"。一個接收者會對如我們前面爲一個特別通道所定義的BroadcastChannel通道引用變量所發射的事件進行消息監聽。

cast.onmessage = function (e) { 
    console.log(e); // This should print out the contents of the object we sent above
}

假定你非常在意Javascript的性能且很介意資源消耗情況(特別是在使用手機的情況下)。幸運的是在BroadcastChannel裏面擁有一個內嵌的方法來讓你關閉這些連接。

cast.close(); // Close our connection and let the garbage collection free up the memory that was used

如前所述，當前只有Firefox版本38會支持BroadcastChannel API。假定其他瀏覽器將很有可能也會緊緊追隨的話，畢竟，這套API是非常有用的。那麼對我們編寫這方面的普通應用和遊戲應用，我們將會如魚得水(緊密的瀏覽器支持的出現)

要注意的是，從一個使用者的角度來看的話你(當前)是基本上好不到相關的技術支持的。但，這裏有個瀏覽器插件可以讓你現在就使用上BroadcastChannel API，然而，畢竟現在還沒有瀏覽器真正實現該功能的支持，我們只有翹首以待了。

作者：天地會珠海分舵
微信公衆號：TechGoGoGo
微博：http://weibo.com/techgogogo
CSDN：http://blog.csdn.net/zhubaitian