user-behavior-monitor 1.0.0

package/src/components/UserBehaviorMonitor1.vue

@@ -0,0 +1,394 @@
+<template>
+  <div ref="behaviorMonitor" class="user-behavior-monitor">
+    <!-- 提示框 -->
+    <el-dialog
+      :visible.sync="showWarning"
+      :show-close="false"
+      :modal="true"
+      width="30%"
+      center
+      custom-class="behavior-warning-dialog"
+    >
+      <span>{{ warningMessage }}</span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserBehaviorMonitor',
+  props: {
+    // WebSocket服务器地址
+    websocketUrl: {
+      type: String,
+      required: true
+    },
+    // 倒计时时长（分钟）
+    timeoutMinutes: {
+      type: Number,
+      default: 10
+    },
+    // 警告提前时间（分钟）
+    warningMinutes: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      mouseMoveThrottled:false,
+      websocket: null,
+      countdownTimer: null,
+      warningTimer: null,
+      showWarning: false,
+      warningMessage: `您已${this.timeoutMinutes}分钟未操作，将在${this.warningMinutes}分钟后自动退出`,
+      lastActivityTime: null,
+      isMonitoring: false
+    };
+  },
+  mounted() {
+    this.initMonitor();
+  },
+  beforeDestroy() {
+    this.destroyMonitor();
+  },
+  methods: {
+    updateTimeoutSettings(timeoutMinutes, warningMinutes) {
+      if (timeoutMinutes !== undefined) {
+        this.timeoutMinutes = timeoutMinutes;
+        localStorage.setItem('userBehavior_timeoutMinutes', timeoutMinutes.toString());
+      }
+      
+      if (warningMinutes !== undefined) {
+        this.warningMinutes = warningMinutes;
+        localStorage.setItem('userBehavior_warningMinutes', warningMinutes.toString());
+      }
+      
+      // 更新警告消息
+      this.warningMessage = `您已${this.timeoutMinutes}分钟未操作，将在${this.warningMinutes}分钟后自动退出`;
+      
+      // 重置计时器
+      this.resetTimer();
+    },
+    // 初始化监控
+    initMonitor() {
+      if (this.isMonitoring) return;
+      
+      this.isMonitoring = true;
+      this.lastActivityTime = Date.now();
+      
+      // 初始化WebSocket连接
+      this.initWebSocket();
+      
+      // 启动倒计时
+      this.startCountdown();
+      
+      // 绑定事件监听器
+      this.bindEventListeners();
+    },
+    
+    // 销毁监控
+    destroyMonitor() {
+      this.isMonitoring = false;
+      
+      // 清除定时器
+      if (this.countdownTimer) clearInterval(this.countdownTimer);
+      if (this.warningTimer) clearTimeout(this.warningTimer);
+      
+      // 关闭WebSocket连接
+      if (this.websocket) {
+        this.websocket.close();
+        this.websocket = null;
+      }
+      
+      // 解绑事件监听器
+      this.unbindEventListeners();
+    },
+    
+    // 初始化WebSocket连接
+    initWebSocket() {
+      try {
+        this.websocket = new WebSocket(this.websocketUrl);
+        
+        this.websocket.onopen = () => {
+          console.log('WebSocket连接已建立');
+          this.$emit('websocket-open');
+        };
+        
+        this.websocket.onmessage = (event) => {
+          console.log('收到WebSocket消息:', event.data);
+          this.$emit('websocket-message', event.data);
+        };
+        
+        this.websocket.onerror = (error) => {
+          console.error('WebSocket错误:', error);
+          this.$emit('websocket-error', error);
+        };
+        
+        this.websocket.onclose = () => {
+          console.log('WebSocket连接已关闭');
+          this.$emit('websocket-close');
+        };
+      } catch (error) {
+        console.error('WebSocket初始化失败:', error);
+        this.$emit('websocket-error', error);
+      }
+    },
+    
+    // 发送用户行为数据到后端
+    sendUserBehavior(data) {
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+        const message = {
+          type: 'user_behavior',
+          timestamp: Date.now(),
+          data: data
+        };
+        console.log('用户行为监测:', JSON.stringify(message));
+        this.websocket.send(JSON.stringify(message));
+      }
+    },
+    
+    // 绑定事件监听器
+    bindEventListeners() {
+      // 鼠标事件
+      document.addEventListener('click', this.handleUserActivity, true);
+      document.addEventListener('dblclick', this.handleUserActivity, true);
+      document.addEventListener('mousedown', this.handleUserActivity, true);
+      document.addEventListener('mouseup', this.handleUserActivity, true);
+      document.addEventListener('mousemove', this.handleMouseMove, true);
+      document.addEventListener('mouseover', this.handleUserActivity, true);
+      document.addEventListener('mouseout', this.handleUserActivity, true);
+      
+      // 键盘事件
+      document.addEventListener('keydown', this.handleUserActivity, true);
+      document.addEventListener('keyup', this.handleUserActivity, true);
+      
+      // 表单事件
+      document.addEventListener('input', this.handleUserActivity, true);
+      document.addEventListener('change', this.handleUserActivity, true);
+      document.addEventListener('focus', this.handleUserActivity, true);
+      document.addEventListener('blur', this.handleUserActivity, true);
+      
+      // 滚动事件（防抖处理）
+      document.addEventListener('scroll', this.debounce(this.handleUserActivity, 300), true);
+      
+      // 窗口事件
+      window.addEventListener('resize', this.handleUserActivity, true);
+      window.addEventListener('beforeunload', this.handleBeforeUnload);
+    },
+    
+    // 解绑事件监听器
+    unbindEventListeners() {
+      document.removeEventListener('click', this.handleUserActivity, true);
+      document.removeEventListener('dblclick', this.handleUserActivity, true);
+      document.removeEventListener('mousedown', this.handleUserActivity, true);
+      document.removeEventListener('mouseup', this.handleUserActivity, true);
+      document.removeEventListener('mousemove', this.handleMouseMove, true);
+      document.removeEventListener('mouseover', this.handleUserActivity, true);
+      document.removeEventListener('mouseout', this.handleUserActivity, true);
+      
+      document.removeEventListener('keydown', this.handleUserActivity, true);
+      document.removeEventListener('keyup', this.handleUserActivity, true);
+      
+      document.removeEventListener('input', this.handleUserActivity, true);
+      document.removeEventListener('change', this.handleUserActivity, true);
+      document.removeEventListener('focus', this.handleUserActivity, true);
+      document.removeEventListener('blur', this.handleUserActivity, true);
+      
+      document.removeEventListener('scroll', this.debounce(this.handleUserActivity, 300), true);
+      
+      window.removeEventListener('resize', this.handleUserActivity, true);
+      window.removeEventListener('beforeunload', this.handleBeforeUnload);
+    },
+    
+    // 处理用户活动
+    handleUserActivity(event) {
+      // 过滤掉自动触发的事件
+      if (this.isAutomaticEvent(event)) return;
+      
+      this.resetTimer();
+      
+      // 发送用户行为数据
+      const behaviorData = {
+        eventType: event.type,
+        target: event.target.tagName,
+        timestamp: Date.now(),
+        url: window.location.href
+      };
+      
+      // 添加特定事件的额外信息
+      if (event.type === 'click') {
+        behaviorData.clientX = event.clientX;
+        behaviorData.clientY = event.clientY;
+      } else if (event.type === 'keydown') {
+        behaviorData.key = event.key;
+        behaviorData.ctrlKey = event.ctrlKey;
+        behaviorData.altKey = event.altKey;
+        behaviorData.shiftKey = event.shiftKey;
+      }
+      
+      this.sendUserBehavior(behaviorData);
+    },
+    handleMouseMove(event) {
+      if (!this.mouseMoveThrottled) {
+        this.handleUserActivity(event);
+        this.mouseMoveThrottled = true;
+        setTimeout(() => {
+          this.mouseMoveThrottled = false;
+        }, 500);
+      }
+    },
+    
+    // 处理鼠标移动（降低频率）
+    // handleMouseMove: function() {
+    //   let isThrottled = false;
+    //   return (event) => {
+    //     if (!isThrottled) {
+    //       this.handleUserActivity(event);
+    //       isThrottled = true;
+    //       setTimeout(() => {
+    //         isThrottled = false;
+    //       }, 500);
+    //     }
+    //   };
+    // }(),
+    
+    // 判断是否为自动触发事件
+    isAutomaticEvent(event) {
+      // 自动刷新等非用户主动触发的事件
+      if (event.type === 'scroll' && !this.isUserScrolling) {
+        return true;
+      }
+      return false;
+    },
+    
+    // 防抖函数
+    debounce(func, wait) {
+      let timeout;
+      return function executedFunction(...args) {
+        const later = () => {
+          clearTimeout(timeout);
+          func.apply(this, args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    },
+    
+    // 重置计时器
+    resetTimer() {
+      this.lastActivityTime = Date.now();
+      this.showWarning = false;
+      
+      // 清除警告定时器
+      if (this.warningTimer) {
+        clearTimeout(this.warningTimer);
+        this.warningTimer = null;
+      }
+      
+      // 重新启动倒计时
+      this.startCountdown();
+      
+      this.$emit('user-active');
+    },
+    
+    // 启动倒计时
+    startCountdown() {
+      // 清除现有定时器
+      if (this.countdownTimer) clearInterval(this.countdownTimer);
+      
+      // 设置新的倒计时
+      this.countdownTimer = setInterval(() => {
+        const now = Date.now();
+        const elapsedMinutes = (now - this.lastActivityTime) / (1000 * 60);
+        
+        // 检查是否需要显示警告
+        if (elapsedMinutes >= (this.timeoutMinutes - this.warningMinutes) && !this.warningTimer) {
+          this.showWarningWarning();
+        }
+        
+        // 检查是否超时
+        if (elapsedMinutes >= this.timeoutMinutes) {
+          this.handleTimeout();
+        }
+      }, 1000);
+    },
+    
+    // 显示超时警告
+    showWarningWarning() {
+      this.showWarning = true;
+      this.$emit('timeout-warning');
+      
+      // 设置超时处理
+      this.warningTimer = setTimeout(() => {
+        this.handleTimeout();
+      }, this.warningMinutes * 60 * 1000);
+    },
+    
+    // 处理超时
+    handleTimeout() {
+      this.showWarning = false;
+      this.$emit('timeout');
+      
+      // 执行登出逻辑
+      this.logout();
+    },
+    
+    // 登出操作
+    logout() {
+      // 发送登出消息到后端
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+        const message = {
+          type: 'logout',
+          timestamp: Date.now()
+        };
+        this.websocket.send(JSON.stringify(message));
+      }
+      
+      // 触发登出事件
+      this.$emit('logout');
+      
+      // 清除定时器
+      if (this.countdownTimer) clearInterval(this.countdownTimer);
+      if (this.warningTimer) clearTimeout(this.warningTimer);
+    },
+    
+    // 处理页面卸载前的操作
+    handleBeforeUnload(event) {
+      // 发送页面关闭消息
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+        const message = {
+          type: 'page_unload',
+          timestamp: Date.now()
+        };
+        this.websocket.send(JSON.stringify(message));
+      }
+    },
+    
+    // 手动重置监控
+    reset() {
+      this.resetTimer();
+    },
+    
+    // 重新连接WebSocket
+    reconnect() {
+      if (this.websocket) {
+        this.websocket.close();
+      }
+      this.initWebSocket();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.user-behavior-monitor {
+  display: none;
+}
+
+.behavior-warning-dialog >>> .el-dialog__body {
+  text-align: center;
+  font-size: 16px;
+  padding: 30px 20px;
+}
+</style>

package/src/index.js

@@ -0,0 +1,17 @@
+import UserBehaviorMonitor from './components/UserBehaviorMonitor.vue';
+
+// 为使用 CDN 方式引入的用户提供组件注册方法
+UserBehaviorMonitor.install = function(Vue) {
+  Vue.component(UserBehaviorMonitor.name, UserBehaviorMonitor);
+};
+
+// 导出组件
+export default UserBehaviorMonitor;
+
+// 如果是直接引入文件，则自动注册组件
+if (typeof window !== 'undefined' && window.Vue) {
+  UserBehaviorMonitor.install(window.Vue);
+}
+
+// 同时支持按需导入
+export { UserBehaviorMonitor };