チャンネルメッセージング 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 # channel-messaging |
ブラウザーの互換性
MessageChannel
api.MessageChannel
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
MessageChannel | ||||||||||||||
MessageChannel() constructor | ||||||||||||||
port1 | ||||||||||||||
port2 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
api.MessagePort
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
MessagePort | ||||||||||||||
close | ||||||||||||||
message event | ||||||||||||||
messageerror event | ||||||||||||||
postMessage | ||||||||||||||
options.includeUserActivation parameter | ||||||||||||||
start | ||||||||||||||
Available in workers |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Non-standard. Check cross-browser support before using.
- See implementation notes.
- Has more compatibility info.
MessagePort
api.MessageChannel
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
MessageChannel | ||||||||||||||
MessageChannel() constructor | ||||||||||||||
port1 | ||||||||||||||
port2 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
api.MessagePort
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
MessagePort | ||||||||||||||
close | ||||||||||||||
message event | ||||||||||||||
messageerror event | ||||||||||||||
postMessage | ||||||||||||||
options.includeUserActivation parameter | ||||||||||||||
start | ||||||||||||||
Available in workers |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Non-standard. Check cross-browser support before using.
- See implementation notes.
- Has more compatibility info.