使用 Server-sent Events 实现实时在线用户计数器
在 Web 应用中，实时的在线用户计数器是一个常见的需求。一种实现这个功能的方法是使用 Server-sent Events（SSE）。SSE 是 HTML5 规范中的一种服务器推送消息的技术，它可以让服务器实时地向浏览器推送数据，而不需要浏览器发起请求。下面我们将详细介绍如何使用 SSE 实现实时在线用户计数器，并提供相应的示例代码和学习指导。
第一步：搭建后端服务
为了使用 SSE 实现实时在线用户计数器，我们需要创建一个后端服务。在这个服务中，我们需要实现两个功能：（1）将新用户加入在线用户列表，并向所有在线用户发送新用户加入的消息；（2）将离开的用户从在线用户列表中删除，并向所有在线用户发送用户离开的消息。
这里我们以 Node.js 为例，使用 Express 框架来搭建后端服务。具体代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ---- - ----- ---------------- ---------------------------------- --- ----------- - --- ------ ----------------------- ----- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ -------- ----------------- - ---------------- -------------------------- - ------------------ ---------------------------- ------ --- ------------------ ----- ---- -- - ----- ------ - ----------------- ------------------------ ---------- ------- ---- --- --- ------------------- ----- ---- -- - ----- ------ - ----------------- --------------------------- ---------- ------- ---- --- --- ---------------- -- -- ---------------- --------- -- ---- -----------展开代码
其中，/onlineCount 接口用于向所有在线用户发送在线用户数量的消息，/login 和 /logout 接口用于处理用户登录和退出。
第二步：前端代码
接下来我们需要编写前端代码。在 HTML 中，我们可以使用 EventSource 对象来建立 SSE 连接，并指定服务器推送数据的 URL。具体代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ---------------------- ------- ------ ------------------ ------------------------------- -------- ----- ------------------ - --------------------------------------- ----- ------ - ------------------------------------- ----- -- - --- ------------------------------------------------- ------------ - --------------- - ---------------------------- - ----------- -- ----------------------------------------------------- - ------- ------ --- --------------------- - -- -- - ---------------------------------------------------------------------- -- --------- ------- -------展开代码
其中，我们使用 Math.random() 方法生成一个随机的 userId，并在 EventSource 对象中指定 /onlineCount 地址。在接收到消息时，我们更新当前在线用户数。另外，在页面关闭或刷新时，我们使用 navigator.sendBeacon() 方法发送退出事件，以便及时从在线用户列表中删除该用户。
学习指导
使用 SSE 实现实时在线用户计数器的过程中，我们涉及了很多常用的 Web 技术，如 Node.js、Express、HTML、JavaScript 等。这篇文章的示例代码旨在帮助读者了解这些技术的基本用法和相互配合的方式。如果你想深入学习这些技术，可以参考下面的学习资源：
- Node.js：官方文档
- Express：官方文档
- HTML：MDN Web 文档
- JavaScript：MDN Web 文档
同时，还可以参考下面的非常应用场景学习相关的实现：
- [nodejs+websocket]实现在线聊天室
- 基于WebSocket的实时通讯
- 全球看房websocket + node 分享
总之，学习 Web 技术需要持之以恒和不断实践，希望这篇文章能够为读者提供一些有用的知识和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b7f64e306f20b3a6556ee8
