EventSource: message イベント

Baseline Widely available

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

message はEventSource API のイベントで、イベントソースからデータを受け取ったときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名をaddEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("message", (event) => {});onmessage = (event) => {};

イベント型

MessageEvent です。Event を継承しています。

イベントプロパティ

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

MessageEvent.data読取専用: メッセージ送信元によって送信されたデータです。
MessageEvent.origin読取専用: 文字列で、メッセージ送信元のオリジンを表します。
MessageEvent.lastEventId読取専用: 文字列で、このイベントの一意の ID を表します。
MessageEvent.source読取専用: MessageEventSource （WindowProxy、MessagePort、ServiceWorker の何れかのオブジェクト）で、メッセージの送信元を表します。
MessageEvent.ports読取専用: MessagePort オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例

この基本的な例では、サーバーからイベントを受け取るためにEventSource を作成し、sse.php という名前のページがイベントを作成する役割を担っています。

const evtSource = new EventSource("sse.php");const eventList = document.querySelector("ul");evtSource.addEventListener("message", (e) => {  const newElement = document.createElement("li");  newElement.textContent = `message: ${e.data}`;  eventList.appendChild(newElement);});

onmessage による同等品

evtSource.onmessage = (e) => {  const newElement = document.createElement("li");  newElement.textContent = `message: ${e.data}`;  eventList.appendChild(newElement);};