Channel Messaging API

Channel Messaging API(チャネルメッセージング API)を使用すると、同じドキュメントに添付された異なる閲覧コンテキストで実行される2つの別々のスクリプト(2つの IFrame、メインドキュメントと IFrame、SharedWorker を介した2つのドキュメント、2つのワーカーなど)で直接通信し、両端にポートを持つ双方向チャンネル(またはパイプ)を介して相互にメッセージをやり取りできます。

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

Channel Messaging の概念と使用方法

メッセージチャネルは MessageChannel() コンストラクタを使用して作成します。 作成すると、チャネルの2つのポートは MessageChannel.port1 プロパティおよび MessageChannel.port2 プロパティを介してアクセスできます(どちらのプロパティも MessagePort オブジェクトを返します)。 チャネルを作成したアプリは port1 を使用し、ポートの反対側のアプリは port2 を使用します — port2 にメッセージを送信し、window.postMessage を使用して2つの引数(送信するメッセージと所有権を移管するオブジェクト、この場合はポート自体)でポートを他の閲覧コンテキストに移管します。

これらの移管可能なオブジェクトを移管すると、それらは以前のコンテキスト — 以前にそれらが属していたもの — では「撤回され(neutered)」ます。 例えば、ポートを送信すると、元のコンテキストでは使用できなくなります。 現在移管できるオブジェクトは ArrayBufferMessagePort の2つだけです。

もう一方の閲覧コンテキストは、MessagePort.onmessage を使用してメッセージをリッスンし、イベントの data 属性を使用してメッセージの内容を取得できます。 MessagePort.postMessage を使用して元のドキュメントにメッセージを送り返すことで応答できます。

チャンネルへのメッセージ送信を停止したい場合は、MessagePort.close を呼び出してポートを閉じることができます。

この API の使用方法の詳細については、Channel Messaging の使用を参照してください。

Channel Messaging のインターフェイス

MessageChannel
メッセージを送信するための新しいメッセージチャネルを作成します。
MessagePort
メッセージチャネルのポートを制御して、一方のポートからメッセージを送信し、もう一方のポートで到着するのをリッスンします。
PortCollection
MessagePort の配列。 同時に複数のポートにメッセージをブロードキャストできるようにするための実験的な解決策。

仕様

仕様 状態 コメント
HTML Living Standard
Channel messaging の定義
現行の標準  

ブラウザーの互換性

MessageChannel

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MessageChannelChrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 41IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 41Opera Android 完全対応 11Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

MessagePort

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MessagePortChrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 11Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報