安装

npm install mqtt

配置参数

建立一个公共的js文件,mqtt.js

export const MQTT_SERVICE = 'ws://xxxxxx/mqtt' // 服务地址
// 认证信息
export const MQTT_USERNAME = 'username'  // 用户名
export const MQTT_PASSWORD = 'password' // 密码
export const MQTT_CLIENTID = 'Mqtt|Client|CMV3|Platform' // ClientId

vue文件

<template>
    <div>
        <div>订阅的消息{{ message}}</div>
    </div>
</template>

<script>
// 引入
import mqtt from "mqtt"
import { MQTT_SERVICE } from "@/xxxxxx/mqtt"
// 这里面是参数，有些要的多，用户名密码什么的，我这里没有用到 （感觉那个公共的js，订阅的地方用的不多的话似乎可以去掉了？）
const options = {
  connectTimeout: 40000,
  clean: true,
};
let client = mqtt.connect(MQTT_SERVICE, options)
export default {
  name: "mqtt",
  data() {
    return {
        message:''
    }
},
 created() {
    this.mqttMSG();
 },
methods: {
    mqttMSG() {
      // 订阅消息
      client.on("connect", (e) => {
        // qos 是通道 一般有 0，1， 2
        client.subscribe(["订阅的主题1", "订阅的主题2",xxxxx],{ qos: 0 },(error) => {
            if (!error) {
              console.log("消息订阅成功！");
            } else {
              console.log("消息订阅失败！");
            }
          }
        )
      });
      //  接收消息
      client.on("message", (topic, message) => {
         // topic 消息给你返回的抬头 ，一般就是主题的地址这样可以通过这个判断是哪个主题进行进行相对应的操作
         console.log(topic)
          // 消息内容 我这里后台返回的是Json的所以转了一下
         this.message = JSON.parse(message) //  有的是object就用 message.toString()
          // 具体的
          console.log(`来自:${topic}的消息:${JSON.parse(message)}`)
        });
      // 断开发起重连（非必须）
      client.on('reconnect', (error) => {
        console.log('正在重连', error)
      })
      // 链接异常处理（非必须）
      client.on('error', (error) => {
        console.log('连接失败', error)
      })
      }
   }
}
</script>

另外封装了一个vue的mqtt组件封装，方便调用（暂时没有测试）

<script>
/**
 * 引入 npm install mqtt --save
 * 父组件用法介绍
 * 引入该组件
 * 使用 <MqttClinent v-model="mqttThemeName" @input="mqttArrived" @mqttError="mqttError" ref="mqttName" />
 * v-model 里面写入订阅的主题（mqttThemeName）
 * mqttArrived(val){} 方法用来处理消息返回的事件方法
 * mqtt链接异常方法的接受 mqttError(error){}
 * 父组件手动调用重连方法 this.$refs.mqttName.mqttReconnect()
 */
import mqtt from "mqtt"
var client
const options = {
  connectTimeout: 40 * 1000,
  clean: true,
  clientId: "clientId",
  username: "MQTT_USERNAME",
  password: "MQTT_PASSWORD"
}
client = mqtt.connect('MQTT_SERVICE', options)

export default {
  name: "MqttClient",
  props: {
    value: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
    };
  },
  created() {
    this.initConnect()
  },
  methods: {
    initConnect() {
      // 订阅消息
      client.on("connect", (e) => {
        client.subscribe(this.value, { qos: 0 }, (error) => {
          if (!error) {
            console.log("消息订阅成功！")
          } else {
            console.log("消息订阅失败！")
          }
        });
      });
      //  接收消息
      client.on("message", (topic, message) => {
        // 消息内容 我这里后台返回的是Json的所以转了一下， 有的是[object object] 就用 message.toString() 转化
        this.$emit("input", JSON.parse(message))
        console.log(`来自:${topic}的消息:${JSON.parse(message)}`)
      })
      // 断开发起重连（非必须）
      client.on("reconnect", (error) => {
        console.log("正在重连:", error)
      })
      // 链接异常处理（非必须）
      client.on("error", (error) => {
        this.$emit("mqttError", error)
        console.log("连接失败:", error)
      })
    },
    // 如果手动发起重连 【 父组件手动调用重连方法 this.$refs.mqttName.mqttReconnect() 】
    mqttReconnect(){
      client.on("reconnect", (error) => {
        console.log("正在手动重连:", error)
      })
    }
  },
};
</script>