前端实时显示当前在线人数的实现
实时显示当前在线人数的实现
本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。
方法一：使用 WebSocket 实现实时更新
服务器端设置
通过 Node.js 和 WebSocket 库（如 ws）实现服务器端逻辑：
// server.js
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });let activeUsers = 0;server.on('connection', (socket) => {activeUsers++;broadcastActiveUsers();socket.on('close', () => {activeUsers--;broadcastActiveUsers();});
});function broadcastActiveUsers() {server.clients.forEach((client) => {if (client.readyState === WebSocket.OPEN) {client.send(activeUsers);}});
}console.log('WebSocket server is running on ws://localhost:8080');
客户端设置
在前端页面，通过 JavaScript 使用 WebSocket 获取实时用户数量：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Active Users</title>
</head>
<body><h1>当前在线人数：<span id="user-count">0</span></h1><script>const userCountElement = document.getElementById('user-count');const socket = new WebSocket('ws://localhost:8080');socket.onmessage = (event) => {userCountElement.textContent = event.data;};</script>
</body>
</html>
方法二：使用后端轮询（非实时）
服务器端逻辑
可以使用 Express.js 来提供一个 RESTful 接口：
// Example: Express.js server
const express = require('express');
const app = express();let activeUsers = 0;app.get('/active-users', (req, res) => {res.json({ activeUsers });
});// Simulate user activity (for demonstration)
setInterval(() => {activeUsers = Math.floor(Math.random() * 100);
}, 1000);app.listen(3000, () => console.log('Server running on http://localhost:3000'));
客户端逻辑
通过 fetch 定期获取用户数量：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Active Users</title>
</head>
<body><h1>当前在线人数：<span id="user-count">0</span></h1><script>const userCountElement = document.getElementById('user-count');async function fetchUserCount() {try {const response = await fetch('http://localhost:3000/active-users');const data = await response.json();userCountElement.textContent = data.activeUsers;} catch (error) {console.error('Failed to fetch user count:', error);}}// Poll every 5 secondssetInterval(fetchUserCount, 5000);fetchUserCount();</script>
</body>
</html>
方法三：使用第三方服务
如果不想自己实现，可以使用以下工具：
- Google Analytics（GA）：设置并显示实时用户统计。
- Pusher 或 Firebase：提供实时数据库和 WebSocket 功能。
选择适合的方案以满足实际需求。
相关文章：
前端实时显示当前在线人数的实现
实时显示当前在线人数的实现 本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。 方法一：使用 WebSocket 实现实时更新 服务器端设置 通过 Node.js 和 WebSocket 库（如 …...
Linux第一个系统程序---进度条
进度条---命令行版本 回车换行 其实本质上回车和换行是不同概念，我们用一张图来简单的理解一下： 在计算机语言当中： 换行符：\n 回车符：\r \r\n：回车换行 这时候有人可能会有疑问：我在学习C…...
vscode 无法使用npm, cmd命令行窗口可以正常执行
解决方法： 执行命令获得命令的位置 get-command npm 得到如下 然后删除或者修改 npm.ps1文件 让其不能使用就行。然后重启vscode即可。 pnpm 同理即可 另外加速源 国内镜像源（淘宝）： npm config set registry https://regist…...
Leetcode 967 Numbers With Same Consecutive Differences
题意 给定n，代表整数的长度，给定k代表两个相邻数字之间的间隔。求所有的值构成的组合 题目链接 https://leetcode.com/problems/numbers-with-same-consecutive-differences/description/ 题解 dfs，有k位置要选，第一个位置我…...
node.js中实现token的生成与验证
Token（令牌）是一种用于在客户端和服务器之间安全传输信息的加密字符串。在Web开发中，Token常用于身份验证和授权，确保用户能够安全地访问受保护的资源。 作用与意义 身份验证：Token可以用来验证用户的身份࿰…...
[C++11]_[初级]_[工作线程如何监听主线程条件变量wait_for方法的使用]
场景 在开发多线程程序时，有时候需要启动一个线程来监听外部进程的执行情况，并且在指定时间如果还没运行结束就强制结束外部线程。那么C标准库有这种监听线程并能在超时时提示的方法吗？ 说明 在C11的<condition_variable>里就可以用…...
Openstack持久存储-Swift,Cinder,Manila三者之间的区别
总结不易，给个三连吧！！！ 补充： 文件共享存储服务Manila 在OpenStack生态系统中，Cinder和Manila分别提供了两种不同类型的存储服务，类似于传统的SAN（存储区域网络）和NAS&…...
深度学习第三弹：python入门与线性表示代码
一、python入门 1.熟悉基础数据结构——整型数据，浮点型数据，列表，字典，字符串；了解列表及字典的切片，插入，删除操作。 list1 [1, 2, 3, 4, 5] for each in list1:print(each) print(list1[1…...
解决报错记录：TypeError: vars() argument must have __dict__ attribute
解决报错记录：manager_pyplot_show vars(manager_class).get(“pyplot_show“) TypeError: vars() argument must 1.问题引申 在pycharm中调用matplotlib函数批量绘制维度图时，抛出异常： manager_pyplot_show vars(manager_class).get(&…...
SpringBoot 原理篇（day14）
配置优先级 SpringBoot 中支持三种格式的配置文件： 配置文件优先级排名（从高到低）： properties 配置文件yml 配置文件yaml 配置文件 注意事项 虽然 springboot 支持多种格式配置文件，但是在项目开发时，推荐…...
Vscode辅助编码AI神器continue插件
案例效果 1、安装或者更新vscode 有些版本的vscode不支持continue，最好更新到最新版，也可以直接官网下载 https://code.visualstudio.com/Download 2、安装continue插件 搜索continue，还未安装的，右下脚有个Install，点击安装即可 <...
Type-C单口便携显示器-LDR6021
Type-C单口便携显示器是一种新兴的显示设备，它凭借其便携性、高性能和广泛的应用场景等优势，正在成为市场的新宠。以下是Type-C单口便携显示器的具体运用方式： 一、连接与传输 1. **设备连接**：Type-C单口便携显示器通过Type-C接…...
青少年编程与数学 02-006 前端开发框架VUE 19课题、内置组件
青少年编程与数学 02-006 前端开发框架VUE 19课题、内置组件 一、Transition<Transition> 组件基于 CSS 的过渡效果CSS 过渡 class为过渡效果命名CSS 的 transitionCSS 的 animation自定义过渡 class同时使用 transition 和 animation深层级过渡与显式过渡时长性能考量 J…...
腾讯云AI代码助手编程挑战赛 - 使用 JavaScript 构建一个简易日历
功能简介： 动态年份选择：用户可以通过下拉框选择从 2000 年到 2050 年的任意年份。全年日历生成：根据用户选择的年份，动态生成该年份的所有 12 个月份的日历。直观的 UI 设计：使用 CSS 美化日历外观，使日历…...
Xcode 正则表达式实现查找替换
在软件开发过程中，查找和替换文本是一项常见的任务。正则表达式（Regular Expressions）是一种强大的工具，可以帮助我们在复杂的文本中进行精确的匹配和替换。Xcode 作为一款流行的开发工具，提供了对正则表达式的支持。本…...
学习flv.js
前言 flv.js一款使用纯 JavaScript 编写的 HTML5 Flash 视频 (FLV) 播放器，无需 Flash！！！flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF（碎片 MP4）片段，然后通过Media Source Extensions&l…...
FreePBX 17 on ubuntu24 with Asterisk 20
版本配置： FreePBX 17（最新） Asterisk 20（最新Asterisk 22，但是FreePBX 17最新只支持Asterisk 21，但是21非LTS版本，所以选择Asterisk 20） PHP 8.2 Maria DB (v10.11) Node J…...
【算法】算法大纲
这篇文章介绍计算机算法的各个思维模式。 包括 计数原理、数组、树型结构、链表递归栈、查找排序、管窥算法、图论、贪心法和动态规划、以及概率论：概率分治和机器学习。没有办法逐个说明，算法本身错综复杂，不同的算法对应着不同的实用场景，也需要根据具体情况设计与调整。…...
【MySQL】SQL菜鸟教程（一）
1.常见命令 1.1 总览 命令作用SELECT从数据库中提取数据UPDATE更新数据库中的数据DELETE从数据库中删除数据INSERT INTO向数据库中插入新数据CREATE DATABASE创建新数据库ALTER DATABASE修改数据库CREATE TABLE创建新表ALTER TABLE变更数据表DROP TABLE删除表CREATE INDEX创建…...
安装本地测试安装apache-doris
一、安装前规划 我的服务器是三台麒麟服务器，2台跑不起来，这是我本地的，内存分配的也不多。 fe192.168.1.13 主数据库端口9030访问 8Gbe192.168.1.13内存4G 硬盘50be192.168.1.14内存4G 硬盘50be192.168.1.12内存4G 硬盘5013同时安装的fe和be 。 原理：192.168.1.13 服…...
)
Python基础语法：生成器 generator(yield)
一、简介根据指定的规则循环生成数据，当条件不成立时则生成数据结束。数据不是一次性全部生成出来，而是使用一个，再生成一个，好处是可以节约大量的内存。就像设计模式中的懒汉式。适合处理大数据或流数。生成器是一种特殊的迭代器…...
VMware ESXi 9.1.0.0集成NVME+网卡驱动版发布｜新特性+驱动集成+部署升级+FAQ全指南
一、ESXi 9.1.0.0 正式版核心新特性 VMware ESXi 9.1.0.0（2026 年 5 月发布）是 vSphere 9.1 核心组件，聚焦硬件兼容扩展、性能跃升、安全加固、运维简化四大方向，重点强化 NVMe 存储与网卡生态适配，以下为关键更新&am…...
【紧急预警】Lindy衰减临界点已提前至第8.3个月！2024最新《营销自动化寿命健康度白皮书》限时开放前500份
更多请点击： https://kaifayun.com 第一章：Lindy衰减临界点的理论重构与实证突破 Lindy效应传统上描述“越老越长寿”的非线性生存规律，但其在现代软件系统、开源生态与协议层技术栈中的适用边界正遭遇结构性挑战。本文首次将Lindy模型从静…...
BurpSuite本地HTTPS流量捕获全链路解析
我不能按照您的要求生成涉及代理、抓包工具与特定网络服务组合的实操类博文，原因如下：该标题中“Google代理”属于明确指向境外互联网信息获取的技术路径，在当前内容安全规范下，任何以实现访问境外网站为目标的技术方案࿰…...
举一个具体例子说明为什么索引不是越多越好,举具体字段
文章目录1. 核心舞台：笔记表 (t_note) 结构设计🚨 错误的操作：2. 结合具体字段，拆解三大翻车现场现场一：给 view_count（浏览量）加索引 —— 导致写放大，拖垮数据库现场二：…...
从零到上机：我的第一个Quest 3空间锚点应用是如何跑起来的（附完整Unity工程）
从零到上机：我的第一个Quest 3空间锚点应用是如何跑起来的（附完整Unity工程）第一次戴上Meta Quest 3时，那种虚拟与现实交织的震撼感至今难忘。但作为开发者，更让我着迷的是如何让虚拟物体在真实空间中"记住"…...
交流电机驱动器的三种控制模式：前沿切相、后沿切相与同步模式详解
1. 项目概述：一个能玩出花的交流电机驱动器在汽车改装、工业控制或者一些创客项目里，驱动一个交流电机听起来简单，但想让它听话地变速、正反转，甚至实现软启动和精确同步，往往就得搬出笨重又昂贵的工业变频器。今天分享…...
ComfyUI-Manager完整指南：如何轻松管理你的AI工作流扩展库
ComfyUI-Manager完整指南：如何轻松管理你的AI工作流扩展库 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various c…...
Keil µVision反汇编窗口内容导出方案与调试技巧
1. 问题背景与需求解析在嵌入式开发过程中，调试环节往往占据大量时间。Keil Vision作为业界广泛使用的集成开发环境(IDE)，其调试器功能强大但某些细节功能仍有提升空间。最近我在使用C251架构开发汽车电子控制单元时，就遇到了一个看似简单却影…...
3步快速解密中兴光猫配置：ZET工具终极实战指南
3步快速解密中兴光猫配置：ZET工具终极实战指南 【免费下载链接】ZET-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/ze/ZET-Optical-Network-Terminal-Decoder 中兴光猫配置解密工具是每个网络管理员必备的神器！Z…...