在前端开发中，有时候需要处理大量的数据，而传统的 Ajax 轮询方式不仅效率低下，而且还会给服务器带来很大的负担。为了解决这个问题，可以使用 HTML5 的 Server-sent Events（SSE）技术，它可以在服务器端主动向客户端推送数据，避免了 Ajax 轮询的缺点。
SSE 简介
SSE 技术是基于 HTTP 协议的，它使用了一种被称为“流”的方式，将数据从服务器传输到客户端。与传统的 Ajax 轮询方式不同，SSE 是一种单向的通信方式，只有服务器可以向客户端推送数据，而客户端不能向服务器发送数据。
SSE 的优点在于它可以实现实时数据的推送，而且不需要客户端发送请求，减轻了服务器的负担。此外，SSE 还支持断线重连，当客户端与服务器的连接断开后，SSE 可以自动重连并继续推送数据。
使用 SSE 推送数据
使用 SSE 推送数据需要在服务器端和客户端分别进行配置。下面以 Node.js 为例，演示如何使用 SSE 推送数据。
服务器端代码
在服务器端，需要使用 Node.js 的 http 模块创建一个 HTTP 服务器，并监听客户端的连接请求。当客户端连接到服务器时，服务器会发送一条 HTTP 响应，告诉客户端它可以接收 SSE 数据。代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
-------------- -- -
---------------- ----- ----------------------------
-- ------
----------------在上面的代码中，我们使用了 setInterval 函数来定时向客户端发送数据，每秒钟发送一次。注意，在发送数据时，需要遵循一定的格式，即每条数据以 data: 开头，并以两个换行符结尾。
客户端代码
在客户端，需要使用 JavaScript 创建一个 EventSource 对象，并指定服务器的 URL。当客户端与服务器建立连接后，服务器会不断向客户端发送数据。
-- -------------------- ---- ------- ----- ------ - --- -------------------- ---------------------------------- ------- -- - --------------------- ----- ---------------- --- -------------------------------- ------- -- - ----------------- ----- --------- ----------- ---
在上面的代码中，我们使用了 addEventListener 函数来监听 message 和 error 事件。当服务器向客户端推送数据时，message 事件会被触发，我们可以在事件处理函数中处理数据。当连接出现错误时，error 事件会被触发，我们可以在事件处理函数中处理错误。
总结
使用 SSE 技术可以有效地处理大量数据，避免了传统的 Ajax 轮询方式的缺点。在使用 SSE 时，需要注意数据的格式和服务器和客户端的配置。此外，SSE 还支持断线重连，可以提高数据的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e17fff1886fbafa4e7b83f