EventSource:message 事件

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

注意:此功能在 Web Workers 中可用。

EventSource 介面的 message 事件在透過事件源接收到資料時觸發。

此事件不可取消,也不會冒泡。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

js
addEventListener("message", (event) => { })

onmessage = (event) => { }

事件型別

一個 MessageEvent。繼承自 Event

Event MessageEvent

事件屬性

此介面還繼承了其父級 Event 的屬性。

MessageEvent.data 只讀

由訊息傳送者傳送的資料。

MessageEvent.origin 只讀

一個字串,表示訊息傳送者的源。

MessageEvent.lastEventId 只讀

一個字串,表示事件的唯一 ID。

MessageEvent.source 只讀

一個 MessageEventSource(可以是 WindowProxyMessagePortServiceWorker 物件),表示訊息傳送者。

MessageEvent.ports 只讀

一個 MessagePort 物件陣列,表示訊息傳送通道(如果適用,例如在通道訊息傳遞或向共享工作者傳送訊息時)關聯的埠。

示例

在這個基本示例中,建立了一個 EventSource 來接收來自伺服器的事件;一個名為 sse.php 的頁面負責生成事件。

js
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 等效項

js
evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};

規範

規範
HTML
# event-message
HTML
# handler-eventsource-onmessage

瀏覽器相容性

另見