チャンネルメッセージング API

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

注: この機能は Web Worker 内で利用可能です

チャンネルメッセージングの概念と使用方法

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

これらの転送可能オブジェクトが転送されると、それまで属していたコンテキストでは使えなくなります。ポートは、送信された後、元のコンテキストでは使用することができなくなります。

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

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

この API の使用方法の詳細については、チャンネルメッセージングの使用を参照してください。

チャンネルメッセージングのインターフェイス

MessageChannel

メッセージを送信するための新しいメッセージチャンネルを作成します。

MessagePort

メッセージチャンネルのポートを制御して、一方のポートからメッセージを送信し、もう一方のポートで到着するのを待ち受けします。

PortCollection

MessagePort の配列。 同時に複数のポートにメッセージをブロードキャストできるようにするための実験的な解決策。

仕様書

Specification
HTML Standard
# message-channels

ブラウザーの互換性

MessageChannel

BCD tables only load in the browser

MessagePort

BCD tables only load in the browser

関連情報