Broadcast Channel API

Broadcast Channel API(放送チャンネル API)を使用すると、閲覧コンテキスト(つまり、ウィンドウタブフレームiframe)間で、同じオリジン(通常は同じサイトのページ)を使用して簡単に通信できます。

註: この機能は Web Workers 内で利用可能です。

放送チャンネルは、名前が付けられ、特定のオリジンに結びつけられています。

基になるチャンネルをリッスンしている BroadcastChannel オブジェクトを作成することで、投稿されたメッセージを受信できます。 興味深い点は、通信したい iframe やワーカーへの参照を維持する必要がもうないということです。 それらは単に BroadcastChannel を構築することによって特定のチャンネルを「購読する(subscribe)」ことができ、それらすべての間で全二重(双方向)通信を行うことができます。

Broadcast Channel API の原理

放送チャンネルのインターフェイス

チャンネルの作成または参加

BroadcastChannel インターフェイスは非常に単純です。 クライアントは BroadcastChannel オブジェクトを作成することによって特定の放送チャンネルに参加します。 コンストラクタは、それを識別するために使用する単一のパラメーターである、チャネルの名前を取ります。 放送チャンネルに最初に接続した場合は、基になるリソースが作成されます。

// 放送チャンネルへの接続
var bc = new BroadcastChannel('test_channel');

メッセージの送信

メッセージを投稿するのは簡単です。 BroadcastChannel オブジェクトの postMessage() メソッドを呼び出すだけで十分です。 このメソッドは任意のオブジェクトを引数として取ります。 非常に単純な例は、次のように DOMString テキストメッセージです。

// 非常に単純なメッセージの送信例
bc.postMessage('This is a test message.');

DOMString だけでなく、あらゆる種類のオブジェクトを送信できます。 API は意味論をメッセージに関連付けないため、どのような種類のメッセージを想定し、それをどう処理するかを知るのは、チャネルの参加者次第です。

メッセージの受信

メッセージが投稿されると、このチャンネルに接続されている各 BroadcastChannel オブジェクトに message イベントが送出されます。 デフォルトでは何もしませんが、onmessage イベントハンドラを使用して新しい関数を実装できます。

// イベントをコンソールに記録するだけの
// 単純なイベントハンドラの例
bc.onmessage = function (ev) { console.log(ev); }

チャンネルの切断

チャネルを去るには、オブジェクトの close() メソッドを呼び出す必要があります。 これにより、オブジェクトと基になるチャネル間のリンクを切断し、ガベージコレクションをすることができます。

// チャンネルの切断
bc.close()

結び

Broadcast Channel API は非常に単純な API であり、自己完結型のインターフェイスによってコンテキスト間通信が可能です。 ユーザーがアカウントにログインしたときなど、同じサイトオリジン環境内の他のタブでユーザーの操作を検出するために使用できます。 メッセージングプロトコルは定義されておらず、さまざまなコンテキストのさまざまなドキュメントがそれ自体を実装する必要があります。 ネゴシエーションも仕様からの要件もありません。

仕様

仕様 状態 コメント
HTML Living Standard
The Broadcast Channel API の定義
現行の標準 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
BroadcastChannelChrome 完全対応 54Edge ? Firefox 完全対応 38IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android ? Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
BroadcastChannel() constructorChrome 完全対応 54Edge ? Firefox 完全対応 38IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android ? Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
closeChrome 完全対応 54Edge ? Firefox 完全対応 38IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android ? Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
message eventChrome 完全対応 54Edge ? Firefox 完全対応 38IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android ? Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
messageerror eventChrome 完全対応 60Edge ? Firefox 完全対応 57IE 未対応 なしOpera 完全対応 47Safari 未対応 なしWebView Android 完全対応 60Chrome Android 完全対応 60Firefox Android ? Opera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
nameChrome 完全対応 54Edge ? Firefox 完全対応 38IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android ? Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
onmessageChrome 完全対応 54Edge ? Firefox 完全対応 38IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android ? Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
onmessageerrorChrome 完全対応 60Edge ? Firefox 完全対応 57IE 未対応 なしOpera 完全対応 47Safari 未対応 なしWebView Android 完全対応 60Chrome Android 完全対応 60Firefox Android ? Opera Android 完全対応 44Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
postMessageChrome 完全対応 54Edge ? Firefox 完全対応 38IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android ? Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報