Broadcast Channel APIを触ってみた

Firefox38で実装されているBroadcast Channel APIを触ってみた。 感想は、 簡単にフレームやタブ、ウィンドウ間の通信ができていい感じ。

この図が示しているように幾つかのcontextがBroadCastチャンネルに接続して、通信を行う。

var broadcast = new BroadcastChannel("broadcast"); //接続、または作成
broadcast.postMessage(data); // データ送信
broadcast.onmessage = function (ev) {
    console.log(ev.data);
} // 送信されたデータの取得

broadcast.close() // 接続の解除

こんなふうに非常に簡単にできる。 コンストラクタに渡す引数がChannelのidになり、すでにあるidを渡すと既存のチャンネルに接続できるようだ。

デモ

"Open Another Page"をクリックすると別のタブで新しくページが開きます。 片方のページで文字を入力して、send をクリックするともう一方のページの文字が変わります。

BroadCast Channel API Demo

参考

Broadcast Channel API - Web API Interfaces | MDN