简介
在 web 应用程序中，实时数据展示是一项非常重要的功能。例如，一个网站可能需要实时展示在线访问者的数量，或者实时展示当前在线的聊天用户。在传统的 web 应用程序中，为了实时地展示这些数据，通常需要使用长轮询或者 WebSocket 等技术。但是，在某些场景下，使用 Server-Sent Events 也是一种非常不错的选择。
Server-Sent Events（简称 SSE）是一种基于 HTTP 的服务器推送技术，它通过浏览器和服务器之间的单向通信，实现了服务器向客户端实时推送数据的功能。SSE 的优点在于，它与 HTTP 协议兼容，可以很方便地在现有的 web 应用程序中使用。
示例代码
在下面的示例中，我们将使用 Node.js 和 Express.js 构建一个简单的 web 应用程序，通过 SSE 实现实时统计在线访问者数量的功能。
服务端代码
首先，我们需要安装需要的依赖：
--- ------- ------- ---
然后，在项目根目录下创建一个 app.js 文件，输入以下代码：
----- ------- - -------------------
----- --- - ----------
-- ------
---------------- -----------
------------- -------- -------
-- --------
----------------------------------
-- ------------
--- ----------- - --
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-- -- --- ---------------
-------------- -- -
--------------
----------------- ----------------
---------------- ---------------------
-- ------
---
-- -- ---- --
---------------- -- -- ------------------- ------- -- -------------------------在以上代码中，我们首先设置了视图引擎为 EJS，并设置了静态文件目录为 ./public。然后，在 /sse 路由中，我们通过设置 HTTP 响应头，告诉客户端返回的数据格式是 SSE。接着，我们使用 setInterval 定时器每秒钟向客户端发送一次 SSE 数据，其中 event 字段表示事件的名称，data 字段表示事件的数据。
客户端代码
在静态文件目录 ./public 中创建一个 index.html 文件，输入以下代码：
--------- -----
------
------
--------- --- ------------------
-------
------
-----------------
---- -----------------------
--------
-- -- ----------- --
----- --------- - --- --------------------
-- -------- ----------- --
----------------------------------------- --------------- -
----- ----------- - -----------
------------------------------------------------ - ------------
---
---------
-------
-------在以上代码中，我们首先在页面中创建了一个 <div> 元素，用于展示在线访问者的数量。然后，我们在 JavaScript 中创建了一个 EventSource 对象，并指定了 /sse 路由作为服务器发送的数据来源。最后，我们监听了服务器发送的 onlineCount 事件，将服务器发送的在线访问者数量展示在页面中。
结论
通过上述示例，我们可以看到，使用 Server-Sent Events 实现实时统计数据展示是非常简单的。相比于传统的长轮询或者 WebSocket 技术，SSE 的优点在于它与 HTTP 协议兼容，部署和使用都非常方便。在实际项目中，我们可以根据自己的需要，灵活选择合适的实时数据展示技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67173518ad1e889fe22060a8