最新 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等進行互動。也就是說，如果使用者開啟了同一個網站的的兩個標籤視窗，如果網站內容發生了變化，那麼兩個視窗會同時得到更新通知。

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

本質上說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，然而，畢竟現在還沒有瀏覽器真正實現該功能的支援，我們只有翹首以待了。