最新 HTML BroadcastChannel API 分析

HTML BroadcastChannel API

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

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

什么是BroadcastChannel API?

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

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

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

BroadcastChannel API 實戰進行時

創建一個新的 BroadcastChannel

創建一個新的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，然而，畢竟現在還沒有瀏覽器真正實現該功能的支持，我們只有翹首以待了。