vue3使用mqtt

1.安装mqtt.js库

使用命令：npm install mqtt

2引用mqtt：import mqtt from 'mqtt';

定义订阅主题：const topic = "Sample/109CD8E300020D/sample_channel0"

const mqttConfig = ref({

  port: 8083,

  // keepalive: 60,

  clientId: `mqtt_${Math.random().toString(16).slice(3)}`,

  // protocolId: 'MQTT',

  // protocolVersion: 4,

  // clean: true,

})

// 初始化mqtt

function initMqtt(_topic) {

  //建立连接，需要搭建消息中间件服务器的（我这里是后台）提供用户名或密码

  const cfg = Object.assign(mqttConfig, {

    username: 'admin',

    password: '123456',

  });

  // 在data中定义MQTT,以便断开连接

  // ws://xxxxx是连接地址，后台提供，wss是https连接

  // const client = mqtt.connect('ws://192.168.0.106:1883/mqtt', cfg)

  const client = mqtt.connect('ws://192.168.0.106:8083/mqtt', cfg)

  client.on('error', (e) => {

    client.end();

  });

  //建立连接后订阅主题

  client.on('connect', () => {

    // 订阅一个主题

    client.subscribe(_topic, { qos: 2 }, err => {

      if (!err) {

        console.info(' ---- 订阅成功')

      } else {

        console.warn('订阅失败');

      }

    })

  });

  // 后台发送的消息

  client.on('message', function (top, message) {

    //发送过来的如果是对象你是需要解析的。

    const res = JSON.parse(message.toString());

    // const TOP = top.replace('tops/','');

    //返回请求主题

    let res_deviceid = res.deviceid;

    if (res_deviceid == 'dev_S7_2') {

      let res_data = res.parareg;

      if (res_data.length > 0) {

        res_data.forEach(getShowData);

      }

    } else if (res_deviceid == 'dev_S7') {//获取系统运行状态

      let res_data = res.parareg;

      if (res_data.length > 0) {

        res_data.forEach(getStatusData);

      }

    }

  });

  // 其他异常事件

  client.on('reconnect', () => {

    console.info('正在重连')

  });

  client.on('disconnect', (error) => {

    console.info('服务器断开:', error)

  });

  client.on('close', () => {

    client.end();

  });

}

//注册一个回调函数，在组件挂载完成后执行。

onMounted(() => {

  initMqtt(topic)

})

//在组件被挂载之前被调用

onBeforeUnmount(() => {

  if (client.end()) client.end();

})

注意：

后端返回给我链接地址是 tcp://101.37.163.199:1883  但是我测试半天都链接不上

最后搜索才发现 要替换成       ws://101.37.163.199:8083/mqtt 才能调试链接通