React中重复调用setInterval实现页面用户活跃状态检测

核心逻辑 #

通过监听用户交互事件记录活跃时间，结合定时器定期检查用户是否超时未操作：超时则关闭连接；若用户恢复活跃，可自动重新建立连接（可选）。

代码实现 #

import { useState, useEffect } from 'react';

// 替换为你项目中实际的连接创建逻辑
const createConnection = () => {
  return {
    close: () => console.log('连接已关闭'),
    // 其他连接相关方法（如发送消息等）
  };
};

const UserActivityMonitor = () => {
  // 记录用户最后一次活跃的时间戳
  const [lastActiveTime, setLastActiveTime] = useState(Date.now());
  // 存储当前连接实例
  const [connection, setConnection] = useState(null);

  useEffect(() => {
    // 初始化建立连接
    const initialConn = createConnection();
    setConnection(initialConn);

    // 用户交互时更新活跃时间
    const markActive = () => {
      setLastActiveTime(Date.now());
    };

    // 绑定用户交互事件（可按需增减）
    const activeEvents = ['keydown', 'mousemove', 'click', 'scroll', 'touchstart'];
    activeEvents.forEach(event => {
      window.addEventListener(event, markActive);
    });

    // 启动定时器，每5秒检查一次用户状态
    const checkTimer = setInterval(() => {
      const now = Date.now();
      // 超时阈值：30秒未操作判定为不活跃
      const timeoutLimit = 30000;

      if (now - lastActiveTime > timeoutLimit) {
        // 用户超时，关闭连接
        if (connection) {
          connection.close();
          setConnection(null);
          console.log('用户超时未操作，已关闭连接');
        }
      } else {
        // 用户活跃，若连接已关闭则重新建立
        if (!connection) {
          const newConn = createConnection();
          setConnection(newConn);
          console.log('用户恢复活跃，已重新建立连接');
        }
      }
    }, 5000);

    // 组件卸载时清理资源
    return () => {
      clearInterval(checkTimer);
      activeEvents.forEach(event => {
        window.removeEventListener(event, markActive);
      });
      if (connection) connection.close();
    };
  }, [lastActiveTime, connection]);

  return (
    <div>
      <h3>用户活跃状态监测中...</h3>
      {/* 你的业务组件内容 */}
    </div>
  );
};

export default UserActivityMonitor;

关键细节说明 #

• 精准超时计算：用时间戳记录最后活跃时间，相比布尔值标记，能更灵活调整超时阈值
• 全面事件覆盖：包含键盘、鼠标、触摸等多种交互场景，确保不会遗漏用户活跃行为
• 资源清理：组件卸载时必须清理定时器和事件监听，避免内存泄漏；同时关闭连接，防止无效资源占用
• 可配置性：检查间隔、超时阈值、监听事件都可根据业务需求自行调整

可选优化 #

• 给事件监听添加节流（如lodash.throttle），避免频繁触发状态更新
• 移除不需要的监听事件，减少性能消耗
• 若不需要自动重连，删除活跃时重建连接的逻辑

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