kxmall-ui/kxmall-rider-ui/mixins/websocketMixin.js

/**
 * WebSocket功能混入
 * 提供WebSocket连接管理的通用方法和生命周期处理
 * 
 * @author kxmall
 * @date 2025-01-08
 */

import riderWebSocketManager from '@/utils/websocket.js';
import { registerMessageHandlers, unregisterMessageHandlers } from '@/utils/messageHandlers.js';
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['token', 'userInfo'])
  },

  data() {
    return {
      // WebSocket连接状态
      wsConnectionStatus: 'disconnected', // disconnected, connecting, connected, error
      // 是否启用WebSocket（可以通过配置控制）
      wsEnabled: true
    };
  },

  methods: {
    /**
     * 初始化WebSocket连接
     */
    initWebSocket() {
      if (!this.wsEnabled) {
        console.log('WebSocket功能已禁用');
        return;
      }

      if (!this.userInfo || !this.userInfo.state) {
        console.log('用户未通过审核，不连接WebSocket');
        return;
      }

      // 注册消息处理器
      registerMessageHandlers(riderWebSocketManager, this);

      // 连接WebSocket
      riderWebSocketManager.connect(this.userInfo, this.$baseUrl);
      
      console.log('WebSocket初始化完成');
    },

    /**
     * 断开WebSocket连接
     */
    disconnectWebSocket() {
      if (riderWebSocketManager.isConnected()) {
        unregisterMessageHandlers(riderWebSocketManager);
        riderWebSocketManager.disconnect();
        console.log('WebSocket连接已断开');
      }
    },

    /**
     * 重连WebSocket
     */
    reconnectWebSocket() {
      console.log('手动重连WebSocket');
      riderWebSocketManager.reset();
      this.disconnectWebSocket();
      
      // 延迟一秒后重连
      setTimeout(() => {
        this.initWebSocket();
      }, 1000);
    },

    /**
     * 发送WebSocket消息
     * @param {String} message 消息内容
     */
    sendWebSocketMessage(message) {
      return riderWebSocketManager.send(message);
    },

    /**
     * 获取WebSocket连接状态
     */
    getWebSocketStatus() {
      return riderWebSocketManager.isConnected() ? 'connected' : 'disconnected';
    },

    /**
     * 设置WebSocket启用状态
     * @param {Boolean} enabled 是否启用
     */
    setWebSocketEnabled(enabled) {
      this.wsEnabled = enabled;
      
      if (enabled) {
        this.initWebSocket();
      } else {
        this.disconnectWebSocket();
      }
    }
  },

  /**
   * 页面显示时的处理
   */
  onShow() {
    // 如果用户状态发生变化，重新初始化WebSocket
    if (this.userInfo && this.userInfo.state && this.wsEnabled) {
      if (!riderWebSocketManager.isConnected()) {
        console.log('页面显示，重新连接WebSocket');
        this.initWebSocket();
      }
    }
  },

  /**
   * 页面隐藏时的处理
   */
  onHide() {
    // 页面隐藏时不断开连接，保持后台接收消息
    console.log('页面隐藏，WebSocket保持连接');
  },

  /**
   * 组件销毁前的清理
   */
  beforeDestroy() {
    this.disconnectWebSocket();
  },

  /**
   * 组件销毁后的清理（兼容性）
   */
  destroyed() {
    this.disconnectWebSocket();
  },

  /**
   * 页面卸载时的清理
   */
  onUnload() {
    this.disconnectWebSocket();
  }
};