此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

EventSource:message 事件

基线
广泛可用

自 2020年1月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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

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

语法

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

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

onmessage = (event) => {};

事件类型

一个 MessageEvent。继承自 Event。

Event MessageEvent

事件属性

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

MessageEvent.data 只读

消息发射器发出的数据。

MessageEvent.origin 只读

一个字符串,表示消息发射器的源(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

浏览器兼容性

参见