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

浏览器兼容性

另见