チャンネルメッセージング 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 の配列。 同時に複数のポートにメッセージをブロードキャストできるようにするための実験的な解決策。

仕様書

Specification
HTML
# channel-messaging

ブラウザーの互換性

MessageChannel

api.MessageChannel

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
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 GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessagePort
close
message event
messageerror event
postMessage
options.includeUserActivation parameter
Non-standard
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 GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
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 GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessagePort
close
message event
messageerror event
postMessage
options.includeUserActivation parameter
Non-standard
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.

関連情報