在现代 Web 应用中，实时性是非常重要的，而实时统计用户访问量是 Web 应用中常见的需求。传统的实现方式是使用 WebSocket，但是如果仅仅是实现实时统计，使用 Server-Sent Events（SSE）也是一种不错的选择。
Server-Sent Events 是什么
Server-Sent Events 是一种基于 HTTP 的协议，它允许服务器向客户端发送事件流。与 WebSocket 不同的是，SSE 是单向的，只能由服务器向客户端发送数据，而客户端无法向服务器发送数据。另外，SSE 不需要额外的握手协议，只需要使用普通的 HTTP 请求即可。
实现 SSE
在服务器端，使用 SSE 需要设置响应头的 Content-Type 为 text/event-stream，并且每个事件需要使用 data 字段来表示数据。例如，下面是一个使用 Node.js 实现 SSE 的示例：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ---- - ------ ----- ---------------------------
----------------
-- ------
----------------在客户端，使用 SSE 需要创建一个 EventSource 对象，并且监听 message 事件。例如，下面是一个使用 JavaScript 实现 SSE 的示例：
----- ------ - --- -------------------- ---------------------------------- ------- -- - ------------------------ ---
实现网站访问实时统计
有了 SSE，实现网站访问实时统计就非常简单了。在服务器端，可以使用一个全局变量来存储访问量，然后在每次请求时将访问量加一，并且将访问量发送给客户端。例如，下面是一个使用 Node.js 实现网站访问实时统计的示例：
----- ---- - ----------------
--- ----- - --
----------------------- ---- -- -
------------------ -
--------------- ------------
---
-----------
------
------
--------------- -------- -------------
-------
------
------------ -------- ----------
-- -----------------------
--------
----- ------ - --- --------------------
----- ------------ - ---------------------------------
---------------------------------- ------- -- -
--------
---------------------- - ------
---
---------
-------
-------
---
--------
----------------在客户端，使用 SSE 接收服务器发送的访问量即可。例如，上面的示例中，客户端使用 JavaScript 监听 message 事件，并且将访问量加一，并且将访问量显示在页面上。
总结
Server-Sent Events 是一种简单易用的实现实时统计的方式。它不需要额外的握手协议，只需要使用普通的 HTTP 请求即可。在实现网站访问实时统计时，使用 SSE 可以轻松地实现实时更新访问量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c972c3add4f0e0ff33dbbb