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.

EventSource API 的 message 事件,会在通过事件源收到数据时触发。

此事件不能取消,也不会冒泡。

语法

在如 addEventListener() 等方法中使用事件名称,或者设置事件处理器属性。

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

onmessage = (event) => {};

事件类型

事件属性

本接口也继承了父接口 Event 的属性。

MessageEvent.data 只读

消息发射器发出的数据。

MessageEvent.origin 只读

一个字符串,表示消息发射器的源(origin)。

MessageEvent.lastEventId 只读

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

MessageEvent.source 只读

一个 MessageEventSource(可以是一个 WindowProxyMessagePortServiceWorker 对象),表示事件发射器。

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);
};

规范

Specification
HTML Standard
# event-message
HTML Standard
# handler-eventsource-onmessage

浏览器兼容性

BCD tables only load in the browser

参见