MessagePort

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年9月⁩.

メモ: この機能はウェブワーカー内で利用可能です。

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

MessagePort は移譲可能オブジェクトです。

インスタンスメソッド

親である EventTarget からの継承したメソッドがあります。

postMessage(): ポートからメッセージを送信します。また、任意でオブジェクトの所有権を他の閲覧コンテキストへ転送します。
start(): ポート上で順番待ちのメッセージの送信を開始します。(EventTarget.addEventListener を使用する場合のみ必要です。onmessage を使用する場合は暗黙に実行されます。)
close(): ポートとの接続を切断し、このポートはアクティブではなくなります。

イベント

親である EventTarget から継承したイベントがあります。

message: MessagePort オブジェクトがメッセージを受信したときに発行されます。
messageerror: MessagePort オブジェクトがデシリアライズできないメッセージを受け取ったときに発行されます。

例

次の例では、MessageChannel() コンストラクターで作成された新しいチャンネルがあります。

IFrame が読み込まれると、onmessage ハンドラーを MessageChannel.port1 に登録し、MessageChannel.port2 を IFrame に、メッセージと共に window.postMessage を使用して送信します。

IFrame からメッセージが返却されると。onMessage 関数でメッセージを段落に出力します。

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;
}

完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。