使用 Server-Sent Events 实现快速的页面更新
在现代 Web 应用程序中，快速的页面更新一直是一个重要的问题。 在过去，我们通常使用定时器和轮询技术来定期检查服务器是否有更新。但这种技术并不是最佳实践，因为它会对服务器造成很大压力，降低应用程序的性能。今天，我们将介绍如何使用 Server-Sent Events（SSE）来解决这个问题。
什么是 Server-Sent Events？
Server-Sent Events 是一种服务器推送技术，使用 HTTP 协议在客户端和服务器之间创建持久的连接。在 SSE 中，服务器可以自动将数据推送到客户端，而不需要客户端不断地发起请求。 跟 WebSocket 相比，SSE 算是低延迟、易于实现和更灵活的一种技术。
如何实现 Server-Sent Events？
使用 SSE 构建端到端应用程序需要三个关键部分：客户端、服务器和事件流。让我们逐一了解它们。
- 客户端
在客户端，我们需要创建一个事件源对象（EventSource），用于监听服务器事件流的响应。事件源对象可以通过如下方式创建。
----- ----------- - --- --------------------------------------------
这里的 ‘http://localhost:8080/stream’ 是服务器的 SSE 端点 URL。我们将在服务器部分详细说明如何创建这个 SSE 端点。
除了创建事件源对象，我们还需要为事件源对象指定监听事件的回调函数。回调函数将在接收到服务器推送数据时触发。例如：
--------------------------------------- --------------- - --------------------- --- --------- ------------ ---
- 服务器
在服务器上，我们需要创建一个 SSE 端点，用于发送事件流。 虽然 SSE 协议是基于 HTTP 的，但是 SSE 有一个关键的不同点，即 Content-Type 必须是 text/event-stream。 SSE 端点的基本示例代码如下：
------------------ ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
---------------------- -
----------------- ------------
---------------- - - --- ------ - --------
-- ------
---这个示例 SSE 端点会每秒钟向客户端发送一个带有当前时间戳的事件。在事件流中，事件和数据是通过 \n\n（两个换行符）进行分隔的。
- 事件流
在 SSE 中，我们需要发送一个包含事件名称和数据的事件，例如：
------ --------- ----- -------- ------- ------ -------
‘event’ 属性标识事件名称，‘data’ 属性包含事件数据。在浏览器中，SSE 的数据会通过 Event 对象的 data 属性传递到监听器函数。
使用 SSE 带来的好处
使用 Server-Sent Events 可以大大改善 Web 应用程序的用户体验。因为 SSE 具有以下优点：
- 即时性
使用 SSE，服务器可以立即将数据推送到客户端，在数据产生的同时，客户端即可接收到。这样可以大大减少页面刷新的延迟时间，提高页面的响应速度。
- 节省带宽
在传统的 AJAX 轮询模式下，客户端需要不断发起请求，服务器需要不断回复，这 会产生大量的网络流量。使用 SSE 可以避免这种情况，因为服务器只是在需要更新时才会向客户端发送数据。
- 灵活性
SSE 协议是基于 HTTP 的，这意味着可以在现有的服务器基础上轻松构建 SSE 端点，并且可以与现有的 Web 应用程序集成。而 SSE 不需要任何额外的插件和库，我们可以使用原生的 JavaScript 实现 SSE 模块。
结论
在现代的 Web 应用程序中，快速的数据响应，即时的数据更新是非常重要的。虽然轮询和 WebSocket 都可以实现这些功能，但是轮询会降低服务器的性能，而 WebSocket 的实现成本较高，所以我们强烈建议使用 SSE 来解决这个问题。SSE 具有更低的延迟、更容易实现和更大的灵活性等优点，使用 SSE 可能是最佳、最简单的解决方案。
示例代码
客户端代码：
----- ----------- - --- -------------------------------------------- --------------------------------------- --------------- - --------------------- --- --------- ------------ ---
服务器端代码：
------------------ ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
---------------------- -
----------------- ------------
---------------- -------- ------- ------ ----------
-- ------
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673590bd0bc820c5824f26f8