Channel Messaging API(チャンネルメッセージング API)を使用すると、同じドキュメントに添付された異なる閲覧コンテキストで実行される2つの別々のスクリプト(2つの IFrame、メインドキュメントと IFrame、SharedWorker
を介した2つのドキュメント、2つのワーカーなど)で直接通信し、両端にポートを持つ双方向チャンネル(またはパイプ)を介して相互にメッセージをやり取りできます。
Channel Messaging の概念と使用方法
メッセージチャンネルは MessageChannel()
コンストラクタを使用して作成します。 作成すると、チャンネルの2つのポートは MessageChannel.port1
プロパティおよび MessageChannel.port2
プロパティを介してアクセスできます(どちらのプロパティも MessagePort
オブジェクトを返します)。 チャンネルを作成したアプリは port1
を使用し、ポートの反対側のアプリは port2
を使用します — port2
にメッセージを送信し、window.postMessage
を使用して2つの引数(送信するメッセージと所有権を移管するオブジェクト、この場合はポート自体)でポートを他の閲覧コンテキストに移管します。
これらの移管可能なオブジェクトを移管すると、それらは以前のコンテキスト — 以前にそれらが属していたもの — では「撤回され(neutered)」ます。 例えば、ポートを送信すると、元のコンテキストでは使用できなくなります。
もう一方の閲覧コンテキストは、MessagePort.onmessage
を使用してメッセージをリッスンし、イベントの data
属性を使用してメッセージの内容を取得できます。 MessagePort.postMessage
を使用して元のドキュメントにメッセージを送り返すことで応答できます。
チャンネルへのメッセージ送信を停止したい場合は、MessagePort.close
を呼び出してポートを閉じることができます。
この API の使用方法の詳細については、Channel Messaging の使用を参照してください。
Channel Messaging のインターフェイス
MessageChannel
- メッセージを送信するための新しいメッセージチャンネルを作成します。
MessagePort
- メッセージチャンネルのポートを制御して、一方のポートからメッセージを送信し、もう一方のポートで到着するのをリッスンします。
PortCollection
MessagePort
の配列。 同時に複数のポートにメッセージをブロードキャストできるようにするための実験的な解決策。
例
- Github でチャンネルメッセージングの基本的なデモ(ライブで実行)を公開しました。 これはページと埋め込まれた
<iframe>
の間の本当に簡単な単一メッセージ転送を示します。 - また、メインページと IFrame の間で複数のメッセージを送信することができる、もう少し複雑な設定を示すマルチメッセージデモ(ライブで実行)を見ることもできます。
仕様
仕様 | 状態 | コメント |
---|---|---|
HTML Living Standard Channel messaging の定義 |
現行の標準 |