user-behavior-monitor 1.0.0 → 2.0.0

package/src/components/{UserBehaviorMonitor1.vue → UserBehaviorMonitor2.vue}

@@ -15,6 +15,8 @@
 </template>
 
 <script>
+import { io } from "socket.io-client";
+
 export default {
   name: 'UserBehaviorMonitor',
   props: {
@@ -36,14 +38,16 @@ export default {
   },
   data() {
     return {
-      mouseMoveThrottled:false,
-      websocket: null,
+      mouseMoveThrottled: false,
+      socket: null,
       countdownTimer: null,
       warningTimer: null,
       showWarning: false,
       warningMessage: `您已${this.timeoutMinutes}分钟未操作，将在${this.warningMinutes}分钟后自动退出`,
       lastActivityTime: null,
-      isMonitoring: false
+      isMonitoring: false,
+      currentTimeoutMinutes: 10,
+      currentWarningMinutes: 1
     };
   },
   mounted() {
@@ -55,17 +59,17 @@ export default {
   methods: {
     updateTimeoutSettings(timeoutMinutes, warningMinutes) {
       if (timeoutMinutes !== undefined) {
-        this.timeoutMinutes = timeoutMinutes;
+        this.currentTimeoutMinutes = timeoutMinutes;
         localStorage.setItem('userBehavior_timeoutMinutes', timeoutMinutes.toString());
       }
       
       if (warningMinutes !== undefined) {
-        this.warningMinutes = warningMinutes;
+        this.currentWarningMinutes = warningMinutes;
         localStorage.setItem('userBehavior_warningMinutes', warningMinutes.toString());
       }
       
       // 更新警告消息
-      this.warningMessage = `您已${this.timeoutMinutes}分钟未操作，将在${this.warningMinutes}分钟后自动退出`;
+      this.warningMessage = `您已${this.currentTimeoutMinutes}分钟未操作，将在${this.currentWarningMinutes}分钟后自动退出`;
       
       // 重置计时器
       this.resetTimer();
@@ -77,8 +81,8 @@ export default {
       this.isMonitoring = true;
       this.lastActivityTime = Date.now();
       
-      // 初始化WebSocket连接
-      this.initWebSocket();
+      // 初始化Socket.IO连接
+      this.initSocketIO();
       
       // 启动倒计时
       this.startCountdown();
@@ -95,56 +99,136 @@ export default {
       if (this.countdownTimer) clearInterval(this.countdownTimer);
       if (this.warningTimer) clearTimeout(this.warningTimer);
       
-      // 关闭WebSocket连接
-      if (this.websocket) {
-        this.websocket.close();
-        this.websocket = null;
+      // 关闭Socket.IO连接
+      if (this.socket) {
+        this.socket.disconnect();
+        this.socket = null;
       }
       
       // 解绑事件监听器
       this.unbindEventListeners();
     },
     
-    // 初始化WebSocket连接
-    initWebSocket() {
+    // 初始化Socket.IO连接
+    // 初始化Socket.IO连接
+  initSocketIO() {
       try {
-        this.websocket = new WebSocket(this.websocketUrl);
+        // 使用正确的WebSocket URL和路径配置
+        const websocketUrl = 'http://100.150.0.4:30612';
+        
+        // 从localStorage获取timeoutMinutes，如果没有默认为10
+        const storedTimeoutMinutes = localStorage.getItem('timeoutMinutes') || 10;
+        
+        // 获取token（假设存储在localStorage中）
+        let token = '';
+        try {
+          const apiHeader = localStorage.getItem('api_header');
+          if (apiHeader) {
+            token = JSON.parse(apiHeader).Authorization || '';
+          }
+        } catch (e) {
+          token = localStorage.getItem('token') || '';
+        }
         
-        this.websocket.onopen = () => {
-          console.log('WebSocket连接已建立');
+        // 创建Socket.IO连接，添加自定义headers
+        this.socket = io(websocketUrl, {
+          transports: ['websocket'],
+          path: '/ws/user-activity', // 指定正确的路径
+          extraHeaders: {
+            'Authorization': token
+          },
+          query: {
+            timeoutMinutes: storedTimeoutMinutes
+          },
+          reconnection: true,
+          reconnectionAttempts: 5,
+          reconnectionDelay: 1000,
+          timeout: 20000
+        });
+        
+        this.socket.on('connect', () => {
+          console.log('Socket.IO连接已建立', this.socket.id);
           this.$emit('websocket-open');
-        };
+        });
         
-        this.websocket.onmessage = (event) => {
-          console.log('收到WebSocket消息:', event.data);
-          this.$emit('websocket-message', event.data);
-        };
+        this.socket.on('disconnect', (reason) => {
+          console.log('Socket.IO连接已断开:', reason);
+          this.$emit('websocket-close');
+        });
         
-        this.websocket.onerror = (error) => {
-          console.error('WebSocket错误:', error);
+        // 处理后端返回的活动状态信息
+        this.socket.on('success', (data) => {
+          console.log('收到用户活动状态消息:', data);
+          this.handleActivityStatus(data);
+          this.$emit('websocket-message', data);
+        });
+        
+        this.socket.on('connect_error', (error) => {
+          console.error('Socket.IO连接错误:', error);
           this.$emit('websocket-error', error);
-        };
+        });
+        
+        this.socket.on('error', (error) => {
+          console.error('Socket.IO错误:', error);
+          this.$emit('websocket-error', error);
+        });
         
-        this.websocket.onclose = () => {
-          console.log('WebSocket连接已关闭');
-          this.$emit('websocket-close');
-        };
       } catch (error) {
-        console.error('WebSocket初始化失败:', error);
+        console.error('Socket.IO初始化失败:', error);
         this.$emit('websocket-error', error);
       }
     },
     
+    // 处理活动状态信息
+    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();
+        }
+        
+        // 检查是否仍然活跃
+        if (!activityData.isActive) {
+          this.handleInactiveStatus();
+        }
+      }
+    },
+    
+    // 处理非活跃状态
+    handleInactiveStatus() {
+      // 清空缓存
+      localStorage.clear();
+      sessionStorage.clear();
+      
+      // 跳转到登录页
+      this.$router.push('/login');
+      
+      // 或者使用window.location
+      // window.location.href = '/login';
+      
+      // 触发登出事件
+      this.$emit('logout');
+    },
+    
     // 发送用户行为数据到后端
     sendUserBehavior(data) {
-      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      console.log('用户行为监测:')
+      if (this.socket && this.socket.connected) {
         const message = {
-          type: 'user_behavior',
-          timestamp: Date.now(),
-          data: data
+          "type": "HEARTBEAT",
+          "message": "心跳"
         };
         console.log('用户行为监测:', JSON.stringify(message));
-        this.websocket.send(JSON.stringify(message));
+        this.socket.emit('user_behavior', message);
       }
     },
     
@@ -239,20 +323,6 @@ export default {
       }
     },
     
-    // 处理鼠标移动（降低频率）
-    // handleMouseMove: function() {
-    //   let isThrottled = false;
-    //   return (event) => {
-    //     if (!isThrottled) {
-    //       this.handleUserActivity(event);
-    //       isThrottled = true;
-    //       setTimeout(() => {
-    //         isThrottled = false;
-    //       }, 500);
-    //     }
-    //   };
-    // }(),
-    
     // 判断是否为自动触发事件
     isAutomaticEvent(event) {
       // 自动刷新等非用户主动触发的事件
@@ -303,12 +373,12 @@ export default {
         const elapsedMinutes = (now - this.lastActivityTime) / (1000 * 60);
         
         // 检查是否需要显示警告
-        if (elapsedMinutes >= (this.timeoutMinutes - this.warningMinutes) && !this.warningTimer) {
+        if (elapsedMinutes >= (this.currentTimeoutMinutes - this.currentWarningMinutes) && !this.warningTimer) {
           this.showWarningWarning();
         }
         
         // 检查是否超时
-        if (elapsedMinutes >= this.timeoutMinutes) {
+        if (elapsedMinutes >= this.currentTimeoutMinutes) {
           this.handleTimeout();
         }
       }, 1000);
@@ -322,7 +392,7 @@ export default {
       // 设置超时处理
       this.warningTimer = setTimeout(() => {
         this.handleTimeout();
-      }, this.warningMinutes * 60 * 1000);
+      }, this.currentWarningMinutes * 60 * 1000);
     },
     
     // 处理超时
@@ -337,12 +407,12 @@ export default {
     // 登出操作
     logout() {
       // 发送登出消息到后端
-      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      if (this.socket && this.socket.connected) {
         const message = {
           type: 'logout',
           timestamp: Date.now()
         };
-        this.websocket.send(JSON.stringify(message));
+        this.socket.emit('logout', message);
       }
       
       // 触发登出事件
@@ -356,12 +426,12 @@ export default {
     // 处理页面卸载前的操作
     handleBeforeUnload(event) {
       // 发送页面关闭消息
-      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      if (this.socket && this.socket.connected) {
         const message = {
           type: 'page_unload',
           timestamp: Date.now()
         };
-        this.websocket.send(JSON.stringify(message));
+        this.socket.emit('page_unload', message);
       }
     },
     
@@ -370,12 +440,12 @@ export default {
       this.resetTimer();
     },
     
-    // 重新连接WebSocket
+    // 重新连接Socket.IO
     reconnect() {
-      if (this.websocket) {
-        this.websocket.close();
+      if (this.socket) {
+        this.socket.disconnect();
       }
-      this.initWebSocket();
+      this.initSocketIO();
     }
   }
 };