介绍下这个功能，属于双向聊天数据绑定的功能，因为需求需要 需要做数据的互相传递 ，离线缓存等功能。下面是代码 ：

   data() {
      return {
        intervalId: null, // 用于保存定时器 ID
      };
    },

   //方法
    setValue(value) {
      console.log(value);
    },
    
    connectMQTT() {
      var self = this;
      const options = {
        keepalive: 60,
        clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
        protocolId: 'MQTT',
        protocolVersion: 4,
        clean: true,
        reconnectPeriod: 1000,
        connectTimeout: 30 * 1000,
        username: 'admin',
        password: 'admin',
      };
      self.setValue('正在连接到 MQTT 代理服务器...'); // 记录连接尝试

      // 选择不同平台的连接方式
      // #ifdef H5
      var client = mqtt.connect('ws://127.0.0.1:1883/mqtt', options);
      self.setValue('使用 WebSocket 协议进行 H5 连接');
      // #endif

      // #ifdef APP-PLUS || MP-WEIXIN
      var client = mqtt.connect('wx://127.0.0.1:1883/mqtt', options);
      self.setValue('使用 wx:// 协议进行小程序或 App 连接');
      // #endif

      self.setValue('MQTT 客户端实例:', client);

      // 监听 MQTT 客户端事件
      client.on('connect', (res) => {
        self.setValue('成功连接到 MQTT 代理服务器: ', res);
        self.setValue('MQTT 连接成功:', res);

        // 订阅 "presence" 主题
        client.subscribe('presence', (err) => {
          if (err) {
            self.setValue('订阅失败: ' + err.message);
            self.setValue('订阅错误:', err);
          } else {
            self.setValue('成功订阅 "presence" 主题');
            self.setValue('成功订阅 "presence" 主题');
            client.publish('presence', 'hello mqtt', (err) => {
              if (err) {
                self.setValue('发布失败: ' + err.message);
                self.setValue('发布错误:', err);
              } else {
                self.setValue('成功发布 "hello mqtt" 到 "presence" 主题');
                self.setValue('成功发布消息 "hello mqtt"');
              }
            });
          }
        });
      });

      // 连接重试
      client.on('reconnect', () => {
        self.setValue('正在重新连接...');
        this.intervalId = setInterval(() => {
          this.connectMQTT();
        }, 2000); // 每 2 秒调用一次
        // 清除定时器
        if (this.intervalId) {
          clearInterval(this.intervalId);
          this.intervalId = null;
        }
      });

      // 连接错误
      client.on('error', (error) => {
        self.setValue('连接错误:', error);
      });

      // 连接结束
      client.on('end', () => {
        self.setValue('MQTT 连接已结束');
      });

      // 接收到消息
      client.on('message', (topic, message) => {
        self.setValue(
          '收到消息，主题: ' + topic + ' 内容: ' + message.toString()
        );
      });
    },