Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Channel messaging

MessageChannel はチャンネルメッセージング API のインターフェイスで、新しいメッセージチャンネルを作成し、2 つの MessagePort プロパティを通して、その間でデータを送信できます。

メッセージング・ワーカー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
MessageChannel
2
12
41
5
18
4.2
MessageChannel

MessageChannel() は MessageChannel インターフェイスのコンストラクターで、2 つの新しい MessagePort オブジェクトを持つ新しい MessageChannel オブジェクトを返します。
2
12
41
5
18
4.2
port1

port1 は MessageChannel インターフェイスの読み取り専用プロパティで、メッセージチャンネルの第 1 ポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。
2
12
41
5
18
4.2
port2

port2 は MessageChannel インターフェイスの読み取り専用プロパティで、メッセージチャンネルの第 2 ポートを返します。このポートは、チャンネルのもう一方の端のコンテキストに接続されたポートで、メッセージが最初に送信される先です。
2
12
41
5
18
4.2
ports

ports は MessageEvent インターフェイスの読み取り専用プロパティで、メッセージが（チャネルメッセージングや共有ワーカーにメッセージを送信する場合など、適切な場合に）送信されるチャネルに関連するポートを表す MessagePort オブジェクトの配列です。
4
12
3
4
18
3.2
MessagePort

MessagePort はチャンネルメッセージング API のインターフェイスで、MessageChannel の 2 つのポートの一方を表し、片方のポートから送信されるメッセージをもう片方のポートで受信待機できます。
2
12
41
5
18
4.2
close

close() は MessagePort インターフェイスのメソッドで、ポートの接続を切断し、ポートがアクティブではなくなります。これは、そのポートへのメッセージの送信を停止します。
2
12
41
5
18
4.2
message_event

message イベントは MessagePort オブジェクトで、チャンネル上でメッセージが届いたときに発生します。
2
12
41
5
18
4.2
postMessage

postMessage() は MessagePort インターフェイスのメソッドで、ポートからのメッセージを送信します。任意で、オブジェクトの所有権を他の閲覧コンテキストへ転送します。
2
12
41
5
18
4.2
start

start() は MessagePort インターフェイスのメソッドで、ポート上のキューに置かれたメッセージの送信を開始します。このメソッドは、EventTarget.addEventListener を使用する場合のみ必要になります。MessagePort.message_event を使用する場合は暗黙に実行されます。
2
12
41
5
18
4.2
worker_support

労働者で利用可能
4
12
41
5
18
4.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}

実務での使いどころ

  • Channel messaging の活用

    MessageChannel はチャンネルメッセージング API のインターフェイスで、新しいメッセージチャンネルを作成し、2 つの MessagePort プロパティを通して、その間でデータを送信できます。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク