在现代 Web 应用程序中，用户使用实时数据的需求越来越普遍。实时数据通常包含用户数、在线活跃度、服务器负载等信息。平滑地显示实时用户数的方法是使用 Server-sent Events 服务，并在客户端使用 JavaScript 进行处理。本文将介绍如何使用 Server-sent Events 服务实现实时在线用户数统计。
Server-sent Events
Server-sent Events 是一项用于 Web 应用程序中的基于 HTTP 的服务器推送技术。它提供了一种不同于 WebSocket 的轻量级技术，用于以相对较低的延迟向浏览器发送推送数据。
使用 Server-sent Events，服务器可以发送包含文本数据的消息。这些消息由浏览器自动接收和处理，该技术通常用于实现实时通知、实时计数器等功能。
创建 SSE 服务
在服务器端实现 Server-sent Events 服务，需要遵循以下步骤：
- 创建 HTTP 请求，并设置正确的响应头。
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - ----- ----- ------ - ----------------------- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- -------------------------------------------- ----- ------------------- ---展开代码
- 向客户端发送 SSE 消息。
const data = `data: ${message}\n\n`; res.write(data);
在 SSE 消息中，必须包含前缀 data: 和两个连续的换行符 \n\n。这个两个字符用于标识消息的结束。
完整的 Server-sent Events 服务实现如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - ----- ----- ------ - ----------------------- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- -------------------------------------------- ----- ------------------- --- ----- - -- -------------- -- - -------- ----- ------- - --------- ----- -------- ----- ---- - ------ ---------------- ---------------- -- ------ --- ------------------- -- -- - ------------------- -- --------- -- --------------------------- ---展开代码
这个例子使用 setInterval 函数每秒向客户端发送一条 SSE 消息并增加在线用户数。
客户端订阅 SSE 服务
在客户端，可以使用 EventSource 对象订阅 SSE 服务。
const source = new EventSource('http://localhost:8000'); source.onmessage = event => { const message = event.data; console.log(message); };
在 open 事件和 error 事件中，可以监听 SSE 服务的连接状态和错误信息。
source.onopen = () => { console.log('Connection established'); }; source.onerror = error => { console.log('Error occurred:', error); };
使用 EventSource 对象订阅 SSE 服务是非常简单的。在订阅成功后，所有发送到 SSE 服务的消息都会被自动接收。
实现实时在线用户数统计
现在，我们可以将 SSE 服务应用于实时在线用户数统计。
从技术上讲，只需维护每个用户的连接并跟踪它们的状态。当用户成功连接到服务器时，增加在线用户数量；当用户断开连接时，减少在线用户数量。服务器将计数器的当前值发送到所有连接的客户端。
代码示例：
服务器端
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - ----- ----- ------ - ----------------------- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- -------------------------------------------- ----- ------------------- --- ----- - -- ----- ------- - --- ------ -------- ----------- - ----- ------- - --------- ----- -------- ----- ---- - ------ ---------------- --- ------ ----- --- -- -------- - ---------------- - - -------------- -- - ------------ -- ------ ------------------ -- -- - --- ------ -------- --- -- -------- - ------------- - --- ------------------ ----- -- - --------------------- --- --------------- -- -- - ----- ------ - ----------------- -- -------- - -------- -------------------- - --- -------- ----- -- - ----------- ---------------- ---- ----------------- ------------ ------------ ---------------- ------------ --- ------------------- -- -- - ------------------- -- --------- -- --------------------------- ---展开代码
这个代码维护了一个计数器和一个客户端 Map 映射，该映射持有每个连接的客户端对象和一个连接 ID。服务器更新客户端 Map 映射并统计在线用户数量。当新客户端连接时，服务器将其 ID 发送到客户端。
客户端
-- -------------------- ---- ------- ----- ------ - --- ------------------------------------- ----- ------------------ - ------------------------------------------------ ----- ----- - --- ------ ---------------- - ----- -- - ----- ------- - ----------- -- ------ ----- ----------------------- - ---------------------------- - -------- - ---- - ----- ------- --- ----- - ---------------------------- -- --------------------------- -- - ---- ------ ------- - ---- ---------- ------------- ------ ------ ---- ------------- ----------------- ------ -------- --------------------- ------ ----------- ------ - - --展开代码
这个代码使用监听 onmessage 事件对服务器发送的消息进行处理。如果接收到的消息是在线用户数量，它将更新用户计数器的值。如果消息是连接事件或断开事件，它将更新用户 Map 映射并更新用户数量。
结论
使用 Server-sent Events 可以轻松地实现实时在线用户数统计。构建 SSE 服务的过程非常简单且高效，不需要特殊的软件或库。借助 SSE，Web 应用程序可以更好地处理用户实时数据，从而为用户提供更好的使用体验。
完整的示例代码可以在 GitHub 项目 上进行查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715c6d5ad1e889fe218dd5e
