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 January 2020.
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);
};
仕様書
Specification |
---|
HTML Standard # event-message |
HTML Standard # handler-eventsource-onmessage |
ブラウザーの互換性
BCD tables only load in the browser