EventSource - 用于处理服务器发送的事件的 Web 内容接口

EventSource 接口是用于处理服务器发送的事件的 Web 内容接口。EventSource 实例打开与 HTTP 服务器的持久连接，服务器以 text/event-stream 格式发送事件。连接保持打开状态，直到调用 EventSource.close() 关闭。

打开连接后，来自服务器的传入消息将以 message 事件的形式传递给您的代码。

与 WebSockets 不同，服务器发送的事件是单向的; 也就是说，数据消息是从一个方向传递的，从服务器传送到客户端（例如用户的 Web 浏览器）。当没有必要以消息形式从客户端向服务器发送数据时，这使它们成为一个很好的选择。例如，EventSource 是处理诸如社交媒体状态更新，新闻源或将数据传递到客户端存储机制（如 IndexedDB 或 Web 存储）之类的有用方法。

构造函数

EventSource()

创建一个新的 EventSource 来处理从指定 URL 接收服务器发送的事件，可选择在凭证模式下处理。

属性

该接口还从其父级 EventTarget 继承了属性。

EventSource.readyState 只读

表示连接状态的数字。可能的值是 CONNECTING（0），OPEN（1）或 CLOSED（2）。

EventSource.url 只读

一个 DOMString，表示源的 URL。

EventSource.withCredentials 只读

一个 Boolean，指示 EventSource 对象是否使用跨源（CORS）凭证集实例化，即 true，默认为不使用，即 false。

事件处理程序

EventSource.onerror

在发生错误时调用的 EventHandler 并在 EventSource 对象上调度 error 事件。

EventSource.onmessage

在收到 message 事件时调用的 EventHandler，即当消息来自源时。

EventSource.onopen

在收到 open 事件时调用的 EventHandler，即刚刚打开连接时。

方法

该接口还从其父级 EventTarget 继承了方法。

EventSource.close()

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

实例

在这个基本示例中，创建了一个 EventSource 来接收来自服务器的事件; 一个名为 "sse.php" 的页面负责生成事件。

var evtSource = new EventSource('sse.php');
var eventList = document.querySelector('ul');

evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
}

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

注意：你可以在 GitHub 上找到一个完整的例子 - 参见使用 PHP 的简单 SSE 演示。

规范

规范	状态	备注
HTML Living Standard EventSource 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 服务器发送的事件
• 处理服务器发送的事件