EventSource

构造函数

EventSource()

创建一个新的 EventSource，用于从指定的 URL 接收服务器发送事件，可以选择开启凭据模式。

实例属性

此接口从其父接口 EventTarget 继承属性。

EventSource.readyState 只读

一个代表连接状态的数字。可能值是 CONNECTING（0）、OPEN（1）或 CLOSED（2）。

EventSource.url 只读

一个表示事件源的 URL 字符串。

EventSource.withCredentials 只读

一个布尔值，表示 EventSource 对象是否使用跨源资源共享（CORS）凭据来实例化（true），或者不使用（false，即默认值）。

实例方法

此接口也从其父接口 EventTarget 继承了方法。

EventSource.close()

关闭连接（如果有），并将 readyState 属性设置为 CLOSED。如果连接已经关闭，则该方法不执行任何操作。

事件

error

在事件源连接未能打开时触发。

message

在从事件源接收到数据时触发。

open

在与事件源的连接打开时触发。

此外，事件源本身可以发送具有 event 字段的消息，这将创建一个以该值为键的特定事件。

示例

在这个基本的例子中，创建了一个 EventSource 来从服务器接收未命名的事件；一个名为 sse.php 的页面负责生成这些事件。

const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};

每个接收到的事件都会导致我们的 EventSource 对象的 onmessage 事件处理程序运行。它会创建一个新的 <li> 元素，并将消息的数据写入其中，然后将新元素附加到文档中已有的列表元素中。

要监听具名事件，你需要为每种类型的事件添加一个监听器。

const sse = new EventSource("/api/v1/sse");

/*
 * 这将仅监听类似下面的事件
 *
 * event: notice
 * data: useful data
 * id: someid
 */
sse.addEventListener("notice", (e) => {
  console.log(e.data);
});

/*
 * 同理，以下代码将监听具有字段 `event: update` 的事件
 */
sse.addEventListener("update", (e) => {
  console.log(e.data);
});

/*
 * “message”事件是一个特例，因为它可以捕获没有 event 字段的事件，
 * 以及具有特定类型 `event：message` 的事件。
 * 它不会触发任何其他类型的事件。
 */
sse.addEventListener("message", (e) => {
  console.log(e.data);
});

规范

浏览器兼容性

参见

• 服务器发送事件
• 使用服务器发送事件