Server-Sent Events: 如何实现简单而稳定的实时通讯
前言： 在现代 Web 开发中，实时通讯变得越来越重要，因为我们需要更快速地将数据推送给客户端，以便在用户需要的时候更新界面。 WebSocket 被认为是实时通讯的最佳实践，但有时我们并不需要全双工通信，只需要一种简单易用的方式实现从服务端发送数据到客户端的单向通讯。这时， Server-Sent Events 就成为了我们的选择。
Server-Sent Events（简称 SSE）是基于 HTTP 的单向通讯协议。SSE 的客户端使用一个持久的 HTTP 连接，以接受来自服务器的事件流。服务器将一次或多次发送数据，并将它们附加到事件流中。这使得服务器可以实时向客户端发送数据，而客户端可以通过在事件发生时更新界面。
如何使用 Server-Sent Events ？ 使用 Server-Sent Events 可以分为以下两个部分：服务器和客户端的实现。
服务器端实现： 在服务器端，我们需要设置一个 HTTP 端点来发送 SSE，通常我们会返回一个 text/event-stream 响应类型以发送数据流。为了便于理解，我们来看一个 PHP 实现的例子：
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
----- - ------------ -------- ---------
-- - --
----- ------ -
------ - -------------
---- ------- -----------
---- ------ -----------------
--------
-----
-- --- -- ------- -
-- - --
-
---------
-以上代码通过不断地循环来发送数据，并使用 sleep 函数使程序停顿一秒钟。注意在循环结束时要将指针归零，否则会导致数组越界错误。
至此，我们已经完成了服务器端的 SSE 实现。
客户端实现： 我们使用 JavaScript 实现客户端 SSE。通过构建一个 EventSource 对象，我们可以通过监听流的事件来接收来自服务器的数据。接下来我们给出一个简单的实现例子。
var source = new EventSource('/sse.php');
source.addEventListener('message', function(event) {
console.log(event.data);
});以上代码示例中，我们将事件添加到一个名叫 “message” 的事件源上，并在事件触发后用 console.log 打印出来。实际上，我们可以通过监听各种其他事件（如下文所述）来接收来自服务器的事件流。
通过以上步骤，我们已经成功地实现了基础的 SSE 客户端实现。不过，事情并没有结束。在实际应用中，还有一些常用的配置和使用技巧需要了解。
常用配置和技巧： 通过对 SSE 通讯的深入了解和实践，我们可以总结一些常用的配置和技巧。以下是一些值得介绍的点：
- 关于事件类型： SSE 支持多种类型的事件，以便在客户端更好地处理。通过设置 “event:” 字段，我们可以自定义事件类型，并在客户端使用类似以下方式来监听：
var source = new EventSource('/sse.php');
source.addEventListener('message', function(event) {
console.log(event.data);
});
source.addEventListener('custom', function(event) {
console.log(event.data);
});在服务器端，我们可以通过以下方式来发送具有特定类型的事件：
echo "event: custom\n"; echo "data: Some data here\n\n";
- 关于重连： 在客户端与服务器端 SSE 连接中，有时会出现接收中断的情况。为了避免频繁地刷新页面，我们可以使用客户端重连机制来解决问题。以下是一种常见的客户端重连实践方式：
-- -------------------- ---- -------
--- -------
-------- --------- -
------ - --- ------------------------
---------------------------------- --------------- -
------------------------
---
-------------------------------- --------------- -
-- ------------------------ --- ------------------- -
------------
-
---
-
-------- ----------- -
------------------- ------
-
----------- 关于保持连接： 在连接 SSE 的过程中，浏览器是使用 HTTP 长连接来维护连接的。但是，这种连接在特定条件下（如浏览器重新加载、客户端网络连接异常等）会被中断。 当连接中断时，浏览器会自动重新建立一个连接。如果您需要避免此问题，可以使用“heartbeat”字段在 SSE 连接中向客户端发送空消息。
例如，在服务器端，我们可以通过以下方式设置 SSE 发送空消息：
echo ":\n\n";
通过以上三点配置和技巧的实践，我们可以获得更好、更稳定的 SSE 应用体验。
结论： 通过本文我们了解了 Server-Sent Events（SSE）技术的基础知识和一些常用配置和技巧。相比于 WebSocket，SSE 有较少的开销，更适合简单的单向数据传输场景（如 Web 推送）。在实际应用中，正确使用 SSE 将可以带来更好、更稳定的实时通讯体验。
参考资源： Server-sent events | MDN (mozilla.org) Server-Sent Events - Web APIs | MDN (mozilla.org)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b902a48841e98948530df