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) => {};
事件类型
一个 MessageEvent
。继承自 Event
。
事件属性
本接口也继承了父接口 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);
};
规范
Specification |
---|
HTML Standard # event-message |
HTML Standard # handler-eventsource-onmessage |
浏览器兼容性
BCD tables only load in the browser