EventSource：消息事件

当通过事件源接收数据时，将触发 EventSource API 的 message 事件。

此事件不可取消，也不会冒泡。

语法

在方法中使用事件名称，如 addEventListener()，或设置事件处理程序属性。

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

onmessage = (event) => {};

事件类型

A MessageEvent. 继承自 Event.

Event MessageEvent

事件属性

此接口还继承了其父级 Event 的属性。

MessageEvent.data 只读

消息发射器发送的数据。

MessageEvent.origin 只读

表示消息发射器原点的字符串。

MessageEvent.lastEventId 只读

表示事件唯一 ID 的字符串。

MessageEvent.source 只读

一个 MessageEventSource（可以是 WindowProxy、MessagePort 或 ServiceWorker 对象），表示消息发射器。

MessageEvent.ports 只读

一个 MessagePort 对象数组，表示与消息正在通过其发送的通道关联的端口（在适当的情况下，例如在通道消息传递中或将消息发送到共享 worker 时）。

示例

在这个基本的示例中，创建了一个 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

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅