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