基于Node.js开发Webtracker：用户页面访问与停留时长追踪需求

看起来你已经在Web Tracker的开发上走了不少路，用Node.js+Socket来解决纯JS跨浏览器检测的问题确实是个不错的选择，我结合自己的经验给你几个实用的技术方案和优化点：

一、多浏览器兼容的页面状态检测 #

之前纯JS只能在Chrome检测用户离开，核心问题是浏览器事件的兼容性差异。你可以结合多个前端事件+兜底方案来覆盖绝大多数现代浏览器：

// 监听页面可见性变化（切换标签/最小化都能触发）
document.addEventListener('visibilitychange', () => {
  const userId = localStorage.getItem('currentUserId');
  const currentUrl = window.location.href;
  
  if (document.hidden) {
    // 页面失去焦点，发送模糊事件
    socket.emit('page-blur', { userId, url: currentUrl, timestamp: Date.now() });
  } else {
    // 页面重新获得焦点，发送聚焦事件
    socket.emit('page-focus', { userId, url: currentUrl, timestamp: Date.now() });
  }
});

// 处理页面关闭/刷新（beforeunload可能被浏览器拦截，配合sendBeacon兜底）
window.addEventListener('beforeunload', (e) => {
  const trackData = JSON.stringify({
    userId: localStorage.getItem('currentUserId'),
    url: window.location.href,
    timestamp: Date.now()
  });
  // 优先用Socket发送
  socket.emit('page-unload', trackData);
  // sendBeacon是浏览器提供的异步发送API，页面关闭时也能保证请求发出
  navigator.sendBeacon('/api/track/unload', trackData);
});

• visibilitychange 支持Chrome、Firefox、Edge、Safari等绝大多数现代浏览器，能准确捕捉页面切换、最小化等场景
• sendBeacon 是兜底方案，避免Socket连接断开时事件丢失

二、基于Socket的停留时长计算优化 #

你用Socket检测连接断开的思路没问题，但要区分正常页面切换和意外断开（网络故障/浏览器崩溃），可以在服务端维护用户的页面会话：

// 服务端：用Map存储用户当前的页面会话（生产环境可以用Redis做分布式存储）
const activeSessions = new Map();

// 处理页面聚焦事件，记录会话开始时间
socket.on('page-focus', (data) => {
  const { userId, url, timestamp } = data;
  const sessionKey = `${userId}-${url}`;
  activeSessions.set(sessionKey, {
    startTime: timestamp,
    socketId: socket.id
  });
});

// 处理页面模糊事件，计算并保存停留时长
socket.on('page-blur', (data) => {
  const { userId, url, timestamp } = data;
  const sessionKey = `${userId}-${url}`;
  const session = activeSessions.get(sessionKey);
  
  if (session) {
    const duration = timestamp - session.startTime;
    // 这里替换成你的数据库存储逻辑
    await saveTrackData(userId, url, duration);
    activeSessions.delete(sessionKey);
  }
});

// 处理Socket断开事件，兜底计算未完成的停留时长
socket.on('disconnect', () => {
  // 遍历所有会话，找到当前Socket对应的会话
  for (const [key, session] of activeSessions.entries()) {
    if (session.socketId === socket.id) {
      const [userId, url] = key.split('-');
      const duration = Date.now() - session.startTime;
      await saveTrackData(userId, url, duration);
      activeSessions.delete(key);
    }
  }
});

• 用sessionKey区分不同用户的不同页面会话，避免同一用户打开多个标签时数据混乱
• 生产环境建议用Redis替代Map，支持多服务器部署时的会话共享

三、用户账号与浏览行为的关联策略 #

要确保用户注册/登录后，浏览行为能准确关联到账号，你可以参考以下流程：

• 匿名用户追踪：未登录用户生成一个唯一的anonymousId存在localStorage，所有追踪事件先关联这个ID
• 登录后合并数据：用户登录成功后，前端把anonymousId和新的userId发送给服务端，服务端将匿名数据合并到用户账号下
• 会话验证：用HttpOnly Cookie存储用户会话ID，前端Socket连接时携带会话ID，服务端验证后再建立关联

示例代码（前端登录后合并数据）：

// 用户登录成功后
async function handleLoginSuccess(userId) {
  const anonymousId = localStorage.getItem('anonymousId');
  if (anonymousId) {
    // 发送合并请求
    await fetch('/api/track/merge', {
      method: 'POST',
      body: JSON.stringify({ anonymousId, userId })
    });
    // 清除匿名ID
    localStorage.removeItem('anonymousId');
  }
  // 保存用户ID
  localStorage.setItem('currentUserId', userId);
}

四、常见问题排查建议 #

• 数据丢失：如果遇到部分用户的停留时长未记录，优先检查sendBeacon是否正常触发，以及Socket断开时的兜底逻辑是否覆盖
• 浏览器兼容性：测试Safari的页面关闭事件，它对beforeunload的限制更严格，sendBeacon是更可靠的选择
• 性能优化：如果用户打开多个标签页，前端可以共用一个Socket连接（通过localStorage同步连接状态），减少服务端连接压力

内容的提问来源于stack exchange，提问作者Ariel