简介
在 web 应用程序中实时获取后端数据是非常常见的需求。可以通过轮询（polling）、长轮询（long-polling）和 WebSocket 等实现。除此之外，还有一种实现方式，即 Server-Sent Events（SSE），它提供了一种简单而有效的方式，用于从服务器向浏览器推送事件数据。
SSE 是一个单向的、持续开放的连接，它允许服务器发送事件流到客户端。SSE 基于向客户端发送 text/event-stream 格式的数据，这些数据按照一定的格式进行传输，包含了必要的元数据，如事件 ID、事件类型、重试时间和数据。
如何使用 Server-Sent Events
使用 SSE 的前置条件是服务器能够支持 SSE。为了在服务器端实现 SSE，需要设置相应的事件处理程序，以便服务器可以将事件数据发送到客户端。
在客户端，可以使用 EventSource API 实现 SSE。EventSource API 表示一条与服务器之间的连接，并且监听来自服务器的所有事件。我们使用 EventSource 的步骤如下：
步骤 1：创建 EventSource 对象
要创建 EventSource 对象，只需要创建一个新实例，并指定要连接的 URL。例如：
var source = new EventSource('sse.php');这里，我们创建了一个指向 sse.php URL 的新 EventSource 对象。这个 URL 是要连接的服务端端点。
步骤 2：监听事件
通过 addEventListener() 方法，将事件处理程序附加到新的 EventSource 对象上。例如：
source.addEventListener('message', function(e) {
console.log(e.data);
});这里，我们添加了一个名为 message 的事件处理程序，当服务器发送名为 message 的事件时，这个处理程序就会被触发。在处理程序中，我们可以访问 e.data 属性，以获取从服务器发送的新数据。
步骤 3：关闭连接
要关闭与服务器的连接，可以调用 close() 方法：
source.close();
这里，我们关闭了与服务器的连接。这样可以释放与服务器的资源，并且停止接收任何来自服务器的事件。
服务器端实现 SSE 的示例
在服务器端，我们可以使用 PHP 来实现 SSE。以下是一个简单的示例，展示如何设置和发送 SSE 数据。这个示例每隔一秒钟向客户端发送一条新的事件。
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
------------------------------------ ----
------ - --
----- ------ -
---------
----- - ----------
---- ---- ----------
---- ------- --------
---- ------- ---------
---- ------ --- ------ ---- --- -------------
--------
---------
-
--这里，我们使用了 PHP 的 header() 方法来设置消息头，并启动了一个无限循环，每隔一秒向客户端发送事件。我们发送的事件类型是 ping，并且包含一个数据字段 The server time is：后面跟着当前时间。
为了确保消息传输的可靠性，我们还设置了一个重试时间参数，以及一个唯一的 ID。
在客户端，我们可以使用 EventSource 与服务器进行通信，如下所示：
var source = new EventSource('sse.php');
source.addEventListener('ping', function(e) {
console.log(e.data);
});在客户端，我们添加了一个名为 ping 的事件处理程序，以接收来自服务器发送的 ping 事件。在事件处理程序中，我们可以通过 e.data 属性获取从服务器接收到的数据，并在控制台中将其打印出来。这个过程是在与服务器的连接上保持打开状态的，直到我们调用了 source.close() 方法。
注意事项
SSE 只在 HTTP/1.1 中受支持，在老式的浏览器和服务器中可能无法正常工作。在 Safari 和 iOS Safari 浏览器中，SSE 有一个最大的连接数限制（通常是 6-8），这可能会影响到应用程序的可扩展性。
结论
使用 Server-Sent Events，我们可以通过一个持续开放的连接从服务器向浏览器推送事件流。这种技术可以用于实现基于事件的应用程序，如聊天、实时日志、股票报价和游戏等。
此外，SSE 还比 WebSocket 更加简单易用，因为它不需要实现一个全双工的通信通道。随着浏览器和服务器对 SSE 的支持不断增强，它有望成为一项非常有前途的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675020b1fbd23cf890739ab5