使用服务器量事件实施推送技术-js教程-PHP中文网

Implementing Push Technology Using Server-Sent Events

核心要点

Server-Sent Events (SSE) API 实现了推送技术，数据通过持续的开放连接流式传输到客户端，避免了反复建立新连接的开销。
与允许双向通信的 WebSockets 不同，SSE 只允许服务器向客户端推送消息。然而，SSE 具有某些优势，例如支持自定义消息类型和自动重新连接断开的连接。
客户端可以通过实现命名事件来处理事件流中的各种事件类型。此外，可以使用 EventSource 的 onerror 事件处理程序处理错误，并且客户端可以随时通过调用 close() 方法终止 EventSource 连接。

与 WebSockets 的比较

许多人完全不知道 SSE 的存在，因为它们常常被功能更强大的 WebSockets API 所掩盖。虽然 WebSockets 允许客户端和服务器之间进行双向全双工通信，但 SSE 只允许服务器向客户端推送消息。需要近乎实时性能或双向通信的应用程序可能更适合使用 WebSockets。但是，SSE 也比 WebSockets 具有某些优势。例如，SSE 支持自定义消息类型和自动重新连接断开的连接。这些功能可以在 WebSockets 中实现，但它们在 SSE 中默认可用。WebSockets 应用程序还需要支持 WebSockets 协议的服务器。相比之下，SSE 建立在 HTTP 之上，可以在标准 Web 服务器中实现。

检测支持

SSE 的支持度相对较高，Internet Explorer 是唯一一个尚不支持它们的主要浏览器。但是，只要 IE 落后，就仍然需要提供功能检测。在客户端，SSE 使用 EventSource 对象实现——这是全局对象的一个属性。以下函数检测浏览器中 EventSource 构造函数是否可用。如果函数返回 true，则可以使用 SSE。否则，应使用轮询等后备机制。

function supportsSSE() {
  return !!window.EventSource;
}

登录后复制

连接

要连接到事件流，请调用 EventSource 构造函数，如下所示。您必须指定要订阅的事件流的 URL。构造函数将自动负责打开连接。

EventSource(url);

登录后复制

`onopen` 事件处理程序

建立连接后，将调用 EventSource 的 onopen 事件处理程序。事件处理程序将打开事件作为其唯一参数。以下示例显示了一个通用的 onopen 事件处理程序。

source.onopen = function(event) {
  // 处理打开事件
};

登录后复制

EventSource 事件处理程序也可以使用 addEventListener() 方法编写。此替代语法优于 onopen，因为它允许多个处理程序附加到同一事件。以下使用 addEventListener() 重写了之前的 onopen 事件处理程序。

source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);

登录后复制

接收消息

客户端将事件流解释为一系列 DOM 消息事件。从服务器接收到的每个事件都会触发 EventSource 的 onmessage 事件处理程序。onmessage 处理程序将消息事件作为其唯一参数。以下示例创建了一个 onmessage 事件处理程序。

function supportsSSE() {
  return !!window.EventSource;
}

登录后复制

消息事件包含三个重要的属性——data、origin 和 lastEventId。顾名思义，data 包含实际的消息数据（字符串格式）。数据可能是 JSON 字符串，可以传递给 JSON.parse() 方法。origin 属性包含事件流在任何重定向后的最终 URL。应检查 origin 以验证是否仅从预期来源接收消息。最后，lastEventId 属性包含事件流中看到的最后一条消息标识符。服务器可以使用此属性将标识符附加到各个消息。如果从未见过任何标识符，则 lastEventId 将为空字符串。onmessage 事件处理程序也可以使用 addEventListener() 方法编写。以下示例显示了使用 addEventListener() 重写的之前的 onmessage 事件处理程序。

EventSource(url);

登录后复制

命名事件

通过实现 命名事件，单个事件流可以指定各种类型的事件。命名事件不是由消息事件处理程序处理的。相反，每种类型的命名事件都由其自己的唯一处理程序处理。例如，如果事件流包含名为 foo 的事件，则需要以下事件处理程序。请注意，foo 事件处理程序与消息事件处理程序相同，只是事件类型不同。当然，任何其他类型的命名消息都需要单独的事件处理程序。

source.onopen = function(event) {
  // 处理打开事件
};

登录后复制

处理错误

如果事件流出现问题，则会触发 EventSource 的 onerror 事件处理程序。错误的一个常见原因是连接中断。尽管 EventSource 对象会自动尝试重新连接到服务器，但在断开连接时也会触发错误事件。以下示例显示了一个 onerror 事件处理程序。

source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);

登录后复制

当然，onerror 事件处理程序也可以使用 addEventListener() 重写，如下所示。

source.onmessage = function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
};

登录后复制

断开连接

客户端可以随时通过调用 close() 方法终止 EventSource 连接。close() 的语法如下所示。close() 方法不接受任何参数，也不返回任何值。

source.addEventListener("message", function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
}, false);

登录后复制

连接状态

EventSource 连接的状态存储在其 readyState 属性中。在其生命周期的任何时间点，连接都可以处于三种可能的状态之一——连接中、打开和关闭。以下列表描述了每种状态。

连接中 – 创建 EventSource 对象时，它最初会进入连接中状态。在此期间，连接尚未建立。如果已建立的连接丢失，EventSource 也将转换到连接中状态。处于连接中状态的 EventSocket 的 readyState 值为 0。此值定义为常量 EventSource.CONNECTING。
打开 – 已建立的连接被称为处于打开状态。处于打开状态的 EventSource 对象可以接收数据。readyState 值为 1 对应于打开状态。此值定义为常量 EventSource.OPEN。
关闭 – 如果未建立连接并且未尝试重新连接，则 EventSource 被称为处于关闭状态。此状态通常通过调用 close() 方法进入。处于关闭状态的 EventSource 的 readyState 值为 2。此值定义为常量 EventSource.CLOSED。

以下示例显示了如何使用 readyState 属性检查 EventSource 连接。为了避免硬编码 readyState 值，该示例使用了状态常量。

function supportsSSE() {
  return !!window.EventSource;
}

登录后复制

结论

本文介绍了 SSE 的客户端方面。如果您有兴趣了解有关 SSE 的更多信息，我建议您阅读《服务器端 SSE》。我还撰写了一篇更实用的文章，介绍了 Node.js 中的 SSE。享受！

关于使用 SSE 实现推送技术的常见问题 (FAQ)

实现 SSE 的前提条件是什么？

要实现 SSE，您需要对 JavaScript 和 Node.js 有基本的了解。您还应该熟悉 HTTP 的概念及其工作原理。此外，了解事件驱动编程可能会有益，因为 SSE 基于此概念。

SSE 与 WebSockets 有何不同？

虽然 SSE 和 WebSockets 都提供实时数据更新，但它们的功能和用例有所不同。WebSockets 在客户端和服务器之间提供双向通信通道，允许双方随时发送数据。另一方面，SSE 是一条单向通信通道，只有服务器才能向客户端推送更新。这使得 SSE 更适合那些数据更新主要由服务器启动的应用程序。