你有没有遇到过这种情况：开发一个视频会议工具，老板突然问现在有多少人正在用？或者做了一个在线剪辑平台，想看看高峰时段的活跃人数？这时候，web应用在线用户统计就成了刚需。
为什么需要实时知道在线人数？
拿视频工具来说，比如你做的是一款网页端的多人协作剪辑系统。如果不知道当前有多少用户在线，就无法判断服务器压力，也无法评估功能受欢迎程度。更实际一点，运营团队想推个限时活动，总得先知道峰值在线是多少吧？
常见实现方式：心跳机制 + 服务端记录
最常用的方法是让前端定时向后端“报到”，就像手机每隔几分钟上报一次位置。这个过程叫“心跳”。只要用户页面没关，每30秒发一次请求，服务端就把这个用户的最后活跃时间更新一下。
服务端可以维护一个缓存表，比如用 Redis 存：
SET user:12345 "online" EX 60 # 过期时间设为60秒每次收到心跳，就刷新这个键的过期时间。这样，超过60秒没心跳的用户自动被清除。统计时只需要查所有未过期的 key 数量即可。
前端代码怎么写？
在网页加载完成后启动一个定时器：
function startHeartbeat() {
setInterval(() => {
fetch('/api/heartbeat', { method: 'POST' });
}, 30000); // 每30秒发送一次
}
// 页面加载完成开始心跳
window.addEventListener('load', startHeartbeat);
// 可选：页面关闭前发一次离线通知
window.addEventListener('beforeunload', () => {
navigator.sendBeacon('/api/offline', JSON.stringify({ status: 'offline' }));
});
别忘了处理异常情况
用户可能不会正常关闭页面，比如直接关浏览器标签。所以不能依赖“离线通知”来删除记录，否则会造成数据虚高。还是得靠自动过期机制兜底。
另外，同一个用户开多个标签页怎么办？可以用 sessionStorage 生成一个临时ID，避免重复计数：
const clientId = sessionStorage.getItem('client_id') || Math.random().toString(36);
sessionStorage.setItem('client_id', clientId);
// 发送心跳时带上这个ID
fetch(`/api/heartbeat?cid=${clientId}`);
结合视频工具的实际场景
如果你的web应用是做视频处理的，比如在线转码、实时预览，那还可以进一步细分“活跃”定义。例如：只有正在上传、剪辑或播放预览视频的才算真正活跃用户，单纯停留在首页的可以不计入核心指标。
这时候可以在特定操作时才触发心跳：
// 用户开始播放视频时启动心跳
videoElement.addEventListener('play', () => {
startHeartbeat();
});
这样统计出来的数据更贴近真实使用强度，而不是“开着页面挂机”的假流量。
数据可视化也很重要
光有数字不够直观。可以在管理后台加个实时折线图，用 WebSocket 推送最新在线人数。运维人员一眼就能看到流量波动，遇到突发高峰也能及时扩容。
对于产品迭代来说，哪个功能上线后在线人数涨了，哪个改版之后用户停留时间变短，这些都能从数据里看出来。别小看这个功能，它其实是理解用户行为的第一步。