user-behavior-monitor 1.0.0 → 4.0.1

package/src/components/UserBehaviorMonitor.vue

@@ -2,24 +2,16 @@
   <div ref="behaviorMonitor" class="user-behavior-monitor">
     <!-- 提示框 -->
     <el-dialog
+      title="提示"
       :visible.sync="showWarning"
       :show-close="false"
       :modal="true"
       width="30%"
       center
       custom-class="behavior-warning-dialog"
-      :append-to-body="true"
-      :modal-append-to-body="true"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
     >
       <span>{{ warningMessage }}</span>
     </el-dialog>
-
-
-    <button @click="testWarning" style="position: fixed; top: 10px; right: 10px; z-index: 10000;">
-      测试警告
-    </button>
   </div>
 </template>
 
@@ -28,10 +20,10 @@ export default {
   name: 'UserBehaviorMonitor',
   props: {
     // WebSocket服务器地址
-    websocketUrl: {
-      type: String,
-      required: true
-    },
+    // websocketUrl: {
+    //   type: String,
+    //   required: true
+    // },
     // 倒计时时长（分钟）
     timeoutMinutes: {
       type: Number,
@@ -45,39 +37,123 @@ export default {
   },
   data() {
     return {
-      mouseMoveThrottled:false,
-      websocket: null,
+      mouseMoveThrottled: false,
+      socket: null,
       countdownTimer: null,
       warningTimer: null,
       showWarning: false,
-      warningMessage: `您已${this.timeoutMinutes}分钟未操作，将在${this.warningMinutes}分钟后自动退出`,
+      // warningMinutes
+      warningMessage: `您已${this.timeoutMinutes}分钟未操作，将在1分钟后自动退出`,
       lastActivityTime: null,
-      isMonitoring: false
+      isMonitoring: false,
+      currentTimeoutMinutes: 10,
+      currentWarningMinutes: 1,
+      reconnectAttempts: 0,
+      maxReconnectAttempts: 3,
+      reconnectDelay: 3000,
+      isLocalDevelopment: this.checkIfLocalDevelopment()
     };
   },
   mounted() {
-    console.log('开始开始！ mounted');
-    this.initMonitor();
+    // 检查当前路由是否包含/login，如果不包含则初始化监控
+    if (!this.isLoginRoute()) {
+      this.initMonitor();
+    }
   },
   beforeDestroy() {
-    console.log('开始开始！ beforeDestroy');
     this.destroyMonitor();
   },
+  watch: {
+    // 监听路由变化
+    '$route'(to, from) {
+      // 安全检查 from.href 是否存在
+      const isFromLogin = from.path.includes('/login') || 
+                        (from.href && from.href.includes('/login'));
+      
+      // 检查当前是否为登录路由
+      const isToLogin = this.isLoginRoute();
+      
+      // 如果从登录页跳转到非登录页，且监控未启动，则初始化监控
+      if (isFromLogin && !isToLogin && !this.isMonitoring) {
+        this.initMonitor();
+      }
+      // 如果从非登录页跳转到登录页，且监控正在运行，则销毁监控
+      else if (!isFromLogin && isToLogin && this.isMonitoring) {
+        this.destroyMonitor();
+      }
+    }
+  },
   methods: {
-    testWarning() {
-      console.log('Testing warning display');
-      this.showWarning = true;
+    // 检查当前路由是否为登录页面
+    isLoginRoute() {
+      // 优先检查 Vue Router 路由
+      if (this.$route && this.$route.path) {
+        if (this.$route.path.includes('/login')) {
+          return true;
+        }
+      }
+      
+      // 检查浏览器地址栏作为后备
+      if (typeof window !== 'undefined') {
+        return window.location.pathname.includes('/login') || 
+               window.location.href.includes('/login');
+      }
+      
+      return false;
+    },
+
+    // 检查是否为本地开发环境
+    checkIfLocalDevelopment() {
+      if (typeof window !== 'undefined') {
+        const hostname = window.location.hostname;
+        return hostname === 'localhost' || 
+               hostname === '127.0.0.1' || 
+               hostname === '0.0.0.0' ||
+               /^192\.168\./.test(hostname) ||  // 局域网IP
+               /^10\./.test(hostname) ||        // 局域网IP
+               /^172\.(1[6-9]|2[0-9]|3[01])\./.test(hostname); // 局域网IP
+      }
+      return false;
+    },
+    
+    updateTimeoutSettings(timeoutMinutes, warningMinutes) {
+      if (timeoutMinutes !== undefined) {
+        this.currentTimeoutMinutes = timeoutMinutes;
+        localStorage.setItem('userBehavior_timeoutMinutes', timeoutMinutes.toString());
+      }
+      
+      if (warningMinutes !== undefined) {
+        this.currentWarningMinutes = warningMinutes;
+        localStorage.setItem('userBehavior_warningMinutes', warningMinutes.toString());
+      }
+      
+      // 更新警告消息
+      // ${this.currentWarningMinutes}
+      this.warningMessage = `您已${this.currentTimeoutMinutes}分钟未操作，将在1分钟后自动退出`;
+      
+      // 重置计时器
+      this.resetTimer();
     },
     // 初始化监控
     initMonitor() {
-      console.log('Initializing monitor');
+      // 再次检查确保不在登录页面
+      if (this.isLoginRoute()) {
+        // 如果在登录页面，确保清理所有监控资源
+        this.destroyMonitor();
+        return;
+      }
+      
       if (this.isMonitoring) return;
       
       this.isMonitoring = true;
       this.lastActivityTime = Date.now();
+      this.reconnectAttempts = 0; // 重置重连尝试次数
+      
+      // 初始化WebSocket连接
+      this.initWebSocket();
       
       // 启动倒计时
-      this.startCountdown();
+      // this.startCountdown();
       
       // 绑定事件监听器
       this.bindEventListeners();
@@ -91,71 +167,263 @@ export default {
       if (this.countdownTimer) clearInterval(this.countdownTimer);
       if (this.warningTimer) clearTimeout(this.warningTimer);
       
+      // 关闭WebSocket连接
+      if (this.socket) {
+        this.socket.close();
+        this.socket = null;
+      }
+      
       // 解绑事件监听器
       this.unbindEventListeners();
     },
     
+    // 初始化WebSocket连接
+    initWebSocket() {
+      try {
+        // 使用传入的WebSocket URL
+        const websocketUrl =  `wss://${location.host}/xy-api/auth-server/ws/user-activity`;
+        
+        // 获取token（假设存储在localStorage中）
+        let token = '';
+        try {
+          const apiHeader = localStorage.getItem('api_header');
+          if (apiHeader) {
+            token = JSON.parse(apiHeader).Authorization || '';
+          }
+        } catch (e) {
+          token = localStorage.getItem('token') || '';
+        }
+        
+        // 创建WebSocket连接
+        this.socket = new WebSocket(`${websocketUrl}?token=${encodeURIComponent(token)}`);
+        
+        // 设置连接成功回调
+        this.socket.onopen = () => {
+          console.log('WebSocket连接已建立');
+          this.sendUserBehavior();
+          this.$emit('websocket-open');
+          // 连接成功时重置重连尝试次数
+          this.reconnectAttempts = 0;
+        };
+        
+        // 设置接收消息回调
+        this.socket.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            console.log('收到用户活动状态消息:', data);
+            this.handleActivityStatus(data);
+            this.$emit('websocket-message', data);
+          } catch (e) {
+            console.error('解析WebSocket消息失败:', e);
+          }
+        };
+        
+        // 设置连接关闭回调
+        this.socket.onclose = (event) => {
+          console.log('WebSocket连接已断开:', event.reason);
+          this.$emit('websocket-close');
+          
+          // 如果不是在登录页面且监控仍在运行，尝试重连
+          if (this.shouldAttemptReconnect()) {
+            this.attemptReconnect();
+          } else if (!this.isLoginRoute() && this.isMonitoring) {
+            // 如果不应该重连但仍在监控状态，根据环境决定是否跳转
+            if (!this.isLocalDevelopment) {
+              this.handleReconnectFailure();
+            }
+          }
+        };
+        
+        // 设置连接错误回调
+        this.socket.onerror = (error) => {
+          console.error('WebSocket错误:', error);
+          this.$emit('websocket-error', error);
+          
+          // 如果不是在登录页面且监控仍在运行，尝试重连
+          if (this.shouldAttemptReconnect()) {
+            this.attemptReconnect();
+          } else if (!this.isLoginRoute() && this.isMonitoring) {
+            // 如果不应该重连但仍在监控状态，根据环境决定是否跳转
+            if (!this.isLocalDevelopment) {
+              this.handleReconnectFailure();
+            }
+          }
+        };
+        
+      } catch (error) {
+        console.error('WebSocket初始化失败:', error);
+        this.$emit('websocket-error', error);
+        
+        // 初始化失败时也可以尝试重连（如果不是在登录页面）
+        if (this.shouldAttemptReconnect()) {
+          this.attemptReconnect();
+        } else if (!this.isLoginRoute() && this.isMonitoring) {
+          // 如果不应该重连但仍在监控状态，根据环境决定是否跳转
+          if (!this.isLocalDevelopment) {
+            this.handleReconnectFailure();
+          }
+        }
+      }
+    },
+    
+    // 判断是否应该尝试重连
+    shouldAttemptReconnect() {
+      return this.isMonitoring && 
+             !this.isLoginRoute() && 
+             this.reconnectAttempts < this.maxReconnectAttempts;
+    },
+    
+    // 添加重连方法
+    attemptReconnect() {
+      // 再次检查是否为登录页面
+      if (this.isLoginRoute()) {
+        console.log('当前在登录页面，取消重连');
+        return;
+      }
+      
+      this.reconnectAttempts++;
+      console.log(`尝试第${this.reconnectAttempts}次重连...`);
+      
+      // 如果是本地开发环境且重连次数已达到最大值，则不跳转登录页
+      if (this.isLocalDevelopment && this.reconnectAttempts >= this.maxReconnectAttempts) {
+        console.log('本地开发环境，重连失败但不跳转到登录页');
+        this.$emit('websocket-reconnect-failed');
+        return;
+      }
+      
+      // 如果是线上环境且重连次数已达到最大值，则跳转到登录页
+      if (!this.isLocalDevelopment && this.reconnectAttempts >= this.maxReconnectAttempts) {
+        console.log('线上环境，重连失败，跳转到登录页');
+        this.handleReconnectFailure();
+        return;
+      }
+      
+      setTimeout(() => {
+        this.initWebSocket();
+      }, this.reconnectDelay);
+    },
+    
+    // 处理重连失败
+    handleReconnectFailure() {
+      // 清空缓存
+      localStorage.clear();
+      sessionStorage.clear();
+      
+      // 跳转到登录页
+      window.location.href = '/login';
+      
+      // 触发登出事件
+      this.$emit('logout');
+    },
+    
+    // 处理活动状态信息
+    handleActivityStatus(data) {
+      if (data.type === 'ACTIVITY_STATUS' && data.data) {
+        const activityData = data.data;
+        
+        // 更新超时和警告时间配置
+        this.currentTimeoutMinutes = activityData.timeoutMinutes || 10;
+        this.currentWarningMinutes = activityData.reminderMinutes || 1;
+        
+        // 更新警告消息
+        this.warningMessage = `您已${this.currentTimeoutMinutes}分钟未操作，将在${this.currentWarningMinutes}分钟后自动退出`;
+        if(activityData.needReminder){
+          this.showWarningWarning(activityData.remainingMillis);
+        }
+        // remainingMillis
+
+
+        // 检查是否仍然活跃
+        //if (!activityData.isActive) {
+          //this.handleInactiveStatus();
+        //}
+      }
+      // 检查是否需要显示提醒
+      // let dataReminder=data.data;
+      //   if (dataReminder&&dataReminder.needReminder) {
+      //     this.showWarningWarning(dataReminder.remainingSeconds);
+      //   }
+    },
+    
+    // 处理非活跃状态
+    handleInactiveStatus() {
+      // 清空缓存
+      localStorage.clear();
+      sessionStorage.clear();
+      
+      // 跳转到登录页
+      //this.$router.push('/login');
+      
+      // 或者使用window.location
+       window.location.href = '/login';
+      
+      // 触发登出事件
+      this.$emit('logout');
+    },
+    
     // 发送用户行为数据到后端
     sendUserBehavior(data) {
-      // 用于测试：在控制台输出用户行为信息
-      console.log('用户行为监测:', data);
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        const message = {
+          "type": "HEARTBEAT",
+          "message": "心跳",
+        };
+        console.log('用户行为监测:', JSON.stringify(message));
+        this.socket.send(JSON.stringify(message));
+      }
     },
     
     // 绑定事件监听器
     bindEventListeners() {
-      console.log('Binding event listeners');
-      // 使用箭头函数或bind来保持this上下文
       // 鼠标事件
-      document.addEventListener('click', this.handleUserActivity.bind(this), true);
-      document.addEventListener('dblclick', this.handleUserActivity.bind(this), true);
-      document.addEventListener('mousedown', this.handleUserActivity.bind(this), true);
-      document.addEventListener('mouseup', this.handleUserActivity.bind(this), true);
-      document.addEventListener('mousemove', this.handleMouseMove.bind(this), true);
-      document.addEventListener('mouseover', this.handleUserActivity.bind(this), true);
-      document.addEventListener('mouseout', this.handleUserActivity.bind(this), true);
+      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.bind(this), true);
-      document.addEventListener('keyup', this.handleUserActivity.bind(this), true);
+      document.addEventListener('keydown', this.handleUserActivity, true);
+      document.addEventListener('keyup', this.handleUserActivity, true);
       
       // 表单事件
-      document.addEventListener('input', this.handleUserActivity.bind(this), true);
-      document.addEventListener('change', this.handleUserActivity.bind(this), true);
-      document.addEventListener('focus', this.handleUserActivity.bind(this), true);
-      document.addEventListener('blur', this.handleUserActivity.bind(this), 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).bind(this), true);
+      document.addEventListener('scroll', this.debounce(this.handleUserActivity, 300), true);
       
       // 窗口事件
-      window.addEventListener('resize', this.handleUserActivity.bind(this), true);
-      window.addEventListener('beforeunload', this.handleBeforeUnload.bind(this));
+      window.addEventListener('resize', this.handleUserActivity, true);
+      window.addEventListener('beforeunload', this.handleBeforeUnload);
     },
     
     // 解绑事件监听器
     unbindEventListeners() {
-      console.log('Unbinding event listeners');
-      // 解绑时也要使用相同的方式
-      document.removeEventListener('click', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('dblclick', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('mousedown', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('mouseup', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('mousemove', this.handleMouseMove.bind(this), true);
-      document.removeEventListener('mouseover', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('mouseout', this.handleUserActivity.bind(this), true);
-      
-      document.removeEventListener('keydown', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('keyup', this.handleUserActivity.bind(this), true);
-      
-      document.removeEventListener('input', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('change', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('focus', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('blur', this.handleUserActivity.bind(this), true);
-      
-      document.removeEventListener('scroll', this.debounce(this.handleUserActivity, 300).bind(this), true);
-      
-      window.removeEventListener('resize', this.handleUserActivity.bind(this), true);
-      window.removeEventListener('beforeunload', this.handleBeforeUnload.bind(this));
+      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);
     },
     
     // 处理用户活动
@@ -186,7 +454,7 @@ export default {
       
       this.sendUserBehavior(behaviorData);
     },
-     handleMouseMove(event) {
+    handleMouseMove(event) {
       if (!this.mouseMoveThrottled) {
         this.handleUserActivity(event);
         this.mouseMoveThrottled = true;
@@ -196,20 +464,6 @@ export default {
       }
     },
     
-    // 处理鼠标移动（降低频率）
-    // handleMouseMove: function() {
-    //   let isThrottled = false;
-    //   return (event) => {
-    //     if (!isThrottled) {
-    //       this.handleUserActivity(event);
-    //       isThrottled = true;
-    //       setTimeout(() => {
-    //         isThrottled = false;
-    //       }, 500);
-    //     }
-    //   };
-    // }(),
-    
     // 判断是否为自动触发事件
     isAutomaticEvent(event) {
       // 自动刷新等非用户主动触发的事件
@@ -234,9 +488,9 @@ export default {
     
     // 重置计时器
     resetTimer() {
-      console.log('Resetting timer');
       this.lastActivityTime = Date.now();
       this.showWarning = false;
+      this.reconnectAttempts = 0; // 重置重连尝试次数
       
       // 清除警告定时器
       if (this.warningTimer) {
@@ -245,52 +499,48 @@ export default {
       }
       
       // 重新启动倒计时
-      this.startCountdown();
+      // this.startCountdown();
       
       this.$emit('user-active');
     },
     
     // 启动倒计时
     startCountdown() {
-      console.log('Starting countdown');
       // 清除现有定时器
       if (this.countdownTimer) clearInterval(this.countdownTimer);
       
       // 设置新的倒计时
       this.countdownTimer = setInterval(() => {
         const now = Date.now();
-        const elapsedMinutes = (now - this.lastActivityTime) / (1000 * 60);
-        console.log('Elapsed minutes:', elapsedMinutes);
+        const elapsedMinutes = (now - this.lastActivityTime) / (1000 * 50);
         
         // 检查是否需要显示警告
-        if (elapsedMinutes >= (this.timeoutMinutes - this.warningMinutes) && !this.warningTimer) {
-          console.log('Showing warning');
+        if (elapsedMinutes >= (this.currentTimeoutMinutes - this.currentWarningMinutes) && !this.warningTimer) {
           this.showWarningWarning();
         }
         
         // 检查是否超时
-        if (elapsedMinutes >= this.timeoutMinutes) {
-          console.log('Handling timeout');
+        if (elapsedMinutes >= this.currentTimeoutMinutes) {
           this.handleTimeout();
         }
       }, 1000);
     },
     
     // 显示超时警告
-    showWarningWarning() {
+    showWarningWarning(timeoutMinutes) {
+      let time=timeoutMinutes||50000;
       console.log('Setting showWarning to true');
       this.showWarning = true;
       this.$emit('timeout-warning');
-      
+      if (this.warningTimer) clearTimeout(this.warningTimer);
       // 设置超时处理
       this.warningTimer = setTimeout(() => {
         this.handleTimeout();
-      }, this.warningMinutes * 60 * 1000);
+      }, time);
     },
     
     // 处理超时
     handleTimeout() {
-      console.log('Handling timeout');
       this.showWarning = false;
       this.$emit('timeout');
       
@@ -300,9 +550,24 @@ export default {
     
     // 登出操作
     logout() {
-      // 用于测试：在控制台输出登出信息
-      console.log('用户超时登出');
+      localStorage.clear();
+      sessionStorage.clear();
+      location.reload();
+      // 跳转到登录页
+      //this.$router.push('/login');
       
+      // 或者使用window.location
+      //  window.location.href = '/login';
+      // 发送登出消息到后端
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        const message = {
+          type: 'logout',
+          timestamp: Date.now()
+        };
+        this.socket.send(JSON.stringify(message));
+      }
+      
+      // 触发登出事件
       this.$emit('logout');
       
       // 清除定时器
@@ -312,32 +577,48 @@ export default {
     
     // 处理页面卸载前的操作
     handleBeforeUnload(event) {
-      // 用于测试：在控制台输出页面卸载信息
-      console.log('页面即将卸载');
+      // 发送页面关闭消息
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        const message = {
+          type: 'page_unload',
+          timestamp: Date.now()
+        };
+        this.socket.send(JSON.stringify(message));
+      }
     },
     
     // 手动重置监控
     reset() {
+      // 检查当前路由，如果在登录页面则销毁监控
+      if (this.isLoginRoute()) {
+        this.destroyMonitor();
+        return;
+      }
+      
       this.resetTimer();
+    },
+    
+    // 重新连接WebSocket
+    reconnect() {
+      // 检查当前路由，如果在登录页面则销毁监控
+      if (this.isLoginRoute()) {
+        this.destroyMonitor();
+        return;
+      }
+      
+      // 重置重连尝试次数
+      this.reconnectAttempts = 0;
+      
+      if (this.socket) {
+        this.socket.close();
+      }
+      this.initWebSocket();
     }
   }
 };
 </script>
-
-<style scoped>
-.user-behavior-monitor {
-  display: none;
-}
-
-/* 使用深度选择器确保样式正确应用 */
-.behavior-warning-dialog ::v-deep .el-dialog__body {
-  text-align: center;
-  font-size: 16px;
-  padding: 30px 20px;
-}
-
-/* 确保弹框在最上层 */
-.behavior-warning-dialog {
-  z-index: 9999 !important;
+<style>
+.behavior-warning-dialog.el-dialog.el-dialog--center{
+  text-align: left;
 }
 </style>