随着 Web 应用的不断发展和用户需求的不断增加，实现无刷新数据更新已经成为一个必不可少的功能。在传统的 AJAX 技术中，通过轮询来实现数据的实时更新，但这种方式存在着不必要的网络流量和服务器压力。而 Server-sent Events (SSE) 则是一种更加高效的实现方式。
SSE 是什么？
SSE 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端推送任意数量的数据，而无需客户端发起请求。SSE 在浏览器中使用 EventSource 对象来接收来自服务器的事件，并通过 JavaScript 处理这些事件。
SSE 的优势
与传统的 AJAX 技术相比，SSE 具有以下优势：
减少网络流量：SSE 只需要建立一次连接，服务器即可向客户端推送数据，而不需要客户端不断地发起请求，从而减少了网络流量。
减轻服务器压力：SSE 采用长连接的方式，服务器只需要维持一个连接，就可以向多个客户端推送数据，而不需要为每个客户端都分别处理请求。
实时性更高：SSE 可以实现实时数据的推送，而不需要客户端不断地发起请求，从而实现更高的实时性。
如何使用 SSE
下面我们通过一个简单的示例来演示如何使用 SSE 实现无刷新数据更新。
服务端代码
首先，我们需要在服务端创建一个 SSE 接口，用于向客户端推送数据。以下是一个使用 Node.js 和 Express 框架创建 SSE 接口的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
---
---------------- -- -- -
------------------- -----------
---在上面的代码中，我们创建了一个名为 /sse 的路由，其中设置了响应头的 Content-Type 为 text/event-stream，这是 SSE 的标准 MIME 类型。我们还设置了 Cache-Control 为 no-cache，这是为了确保浏览器不会缓存 SSE 数据。最后，我们使用 setInterval 来每秒钟向客户端推送一次数据，数据格式为 data: ${data}\n\n。
客户端代码
接下来，我们需要在客户端使用 EventSource 对象来接收来自服务端的 SSE 数据。以下是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- ----------------
--------
----- ----------- - --- --------------------
--------------------- - ------- -- -
------------------------------------------- - -----------
--
---------
-------
-------在上面的代码中，我们首先创建了一个 EventSource 对象，并指定了 SSE 接口的 URL。然后，我们使用 onmessage 事件来处理从服务端推送过来的数据，并将数据显示在页面上。
运行示例
最后，我们将服务端代码保存为 server.js，客户端代码保存为 index.html，然后在命令行中运行以下命令启动服务端：
node server.js
然后在浏览器中打开 index.html，即可看到页面上实时显示当前时间，每秒钟更新一次，而不需要页面刷新。
总结
SSE 是一种高效的实现无刷新数据更新的技术，它可以减少网络流量和服务器压力，并实现更高的实时性。在实际开发中，我们可以使用 SSE 来实现各种实时数据的推送，如在线聊天、股票行情等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6559e8ebd2f5e1655d451de6