vue3中mqtt的使用

• vite@^4.5.0
• vue@^3.3.6
• mqtt@^4.3.7

import * as mqtt from 'mqtt/dist/mqtt.min';


let client = null;

export const MQTTSWebSocket = () => {
  const connectUrl = `ws://192.168.1.56:8083/mqtt`; //线上
  const storeMqtt = useMqttStore();

  client = mqtt.connect(connectUrl, {
    clean: true,
    connectTimeout: 8000, // 超时时间
    reconnectPeriod: 1000, // 重连时间间隔
    username: 'admin', //用户名
    password: 'public', //密码
  });

  // 需要订阅的主题
  const topic = 'RCT/State/#';

  //成功连接后触发的回调
  client.on('connect', () => {
    console.info('订阅成功');

    client.subscribe(topic);

    // 当客户端收到一个发布过来的消息时触发回调
    client.on('message', function (topic, message) {
      // 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串

      let data = JSON.parse(message.toString());
      console.info('返回的数据：', message, data);
    });
  });

  // 连接断开后触发的回调
  client.on('close', function () {
    console.info('已断开连接');
  });
  // 断开发起重连
  client.on('reconnect', (error) => {
    console.info('正在重连:', error);
  });
  // 链接异常处理
  client.on('error', (error) => {
    console.info('连接失败:', error);
  });
};

// 断开连接
export const mqttDisconnect = () => {
  if (client) {
    client.end(() => {
      console.info('手动断开连接');
    });
  }
};