← 返回首页

MessageEvent - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

MessageEvent

Baseline Widely available

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

MessageEvent インターフェイスは対象のオブジェクトから受け取ったメッセージを表します。

次のメッセージを表すために使用されます。

サーバー送信イベント（EventSource.message_event を参照）。
ウェブソケット（WebSocket インターフェイスの onmessage プロパティを参照）。
文書間のメッセージ（Window.postMessage() および Window.message_event を参照）。
チャンネルメッセージ（MessagePort.postMessage() および MessagePort.message_event を参照）。
ワーカー／文書間メッセージ（上記 2 項目ほか、Worker.postMessage(), Worker.message_event, ServiceWorkerGlobalScope.message_event なども参照）。
ブロードキャストチャンネル (Broadcastchannel.postMessage()) および BroadcastChannel.message_event を参照).

このイベントによって引き起こされる動作は、対応する message イベント（例えば、上記の onmessage ハンドラーを使ったもの）のイベントハンドラーとして設定された関数の中で定義されています。

Event MessageEvent

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

In this article

コンストラクター

新しい MessageEvent を作成します。

インスタンスプロパティ

このインターフェイスは親である Event からプロパティを継承しています。

MessageEvent.data 読取専用

メッセージ送信元によって送信されたデータです。

MessageEvent.origin 読取専用

文字列で、メッセージ送信元のオリジンを表します。

MessageEvent.lastEventId 読取専用

文字列で、このイベントの一意の ID を表します。

MessageEvent.source 読取専用

MessageEventSource （WindowProxy、MessagePort、ServiceWorker の何れかのオブジェクト）で、メッセージの送信元を表します。

MessageEvent.ports 読取専用

MessagePort オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

インスタンスメソッド

このインターフェイスは親である Event からメソッドを継承してします。

initMessageEvent()

メッセージイベントを初期化します。これ以上このメソッドを使用しないでください。代わりに、MessageEvent() コンストラクターを使用してください。

例

基本的な共有ワーカーの例（共有ワーカーを実行）には 2 つの HTML ページがあり、それぞれのページが単純な計算をする JavaScript を実行しています。異なるスクリプトが計算を実行するために同一のワーカーファイルを使用しています。ページの異なるウィンドウ内で動作していても、どちらのスクリプトもワーカーファイルにアクセスできます。

次のコードスニペットは、 SharedWorker オブジェクトの作成を SharedWorker() コンストラクターを使用して行う様子を示しています。どちらのスクリプトもこれを含んでいます。

js

const myWorker = new SharedWorker("worker.js");

次にどちらのスクリプトも SharedWorker.port プロパティで作成された MessagePort オブジェクトを通してワーカーにアクセスします。 onmessage イベントが addEventListener で装着されると、 start() メソッドでポートが手動で開きます。

js

myWorker.port.start();

ポートが開くと、どちらのスクリプトもワーカーにメッセージを送信し、送信されたメッセージを port.postMessage() と port.onmessage でそれぞれ処理します。

js
first.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = (e) => {
  result1.textContent = e.data;
  console.log("Message received from worker");
};

ワーカーの内部では、 onconnect ハンドラーを使用して上記の同一のポートに接続しています。そのワーカーと関連付けられたポートは、connect イベントの ports プロパティで接続可能です。その後、ポートを開くために MessagePort の start() メソッドを、メインのスレッドから送信されたメッセージを処理するために onmessage ハンドラーを使用します。

js
onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

仕様書

Specification

HTML
# the-messageevent-interface

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

ExtendableMessageEvent — このインターフェイスに似ていますが、もっと柔軟性が必要なインターフェイスで使用されます。

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2024年8月22日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTML DOM API
MessageEvent
コンストラクター
1. MessageEvent()
インスタンスプロパティ
継承
1. Event
HTML DOM に関連するページ
ガイド
1. JavaScript で queueMicrotask() によるマイクロタスクの使用
2. In depth: Microtasks and the JavaScript runtime environment