vue使用mqtt方法

vue3

import mqtt from 'mqtt'
import { useUser } from '@/stores/user'
var client
export function btnMqtt() {// 按钮转圈
  const connection= ref({
    host: 'xxx.xxx.xx.xx',
    port: xxxx,
    endpoint: '/mqtt',
    clean: true, // 保留会话
    connectTimeout: 4000, // 超时时间
    reconnectPeriod: 4000, // 重连时间间隔
    // 认证信息
    clientId: 'ms' + new Date().getTime(),
    // username: 'test',
    // password: 'test'
  })
  const subscribeSuccess = ref(false)
  function createConnection() {
      const { host, port, endpoint, ...options } = connection.value
      const connectUrl = `ws://${host}:${port}${endpoint}`
      console.log('connectUrl', connectUrl)

      try {
        client = mqtt.connect(connectUrl, options)
      } catch (error) {
        console.log('mqtt.connect error', error)
      }

      // 连接成功
      client.on('connect', () => {
        console.log(client)
        console.log('Connection succeeded!')
      })

      // 异常
      client.on('error', error => {
        console.log('Connection failed', error)
      })

      // /* 接受消息 */
      client.on('message', (topic, message) => {
        let receiveMessage = JSON.parse(message)
        if (topic == 'newMessage') {
          console.log('收到消息', receiveMessage)
          useUser().setInfo(receiveMessage)
        }
      })

      // 断开发起重连
      client.on('reconnect', error => {
        console.log('正在重连', error)
      })
    }
  function doSubscribe(item) {
    const { topic, qos } = item
    console.log('item', item)
    client.subscribe(topic, qos, (error, res) => {
      if (error) {
        console.log('Subscribe to topics error', error)
        return
      }
      subscribeSuccess.value = true
      console.log('Subscribe to topics res', res)
    })
  }
  function doUnSubscribe(item) {
    const { topic } = item
    client.unsubscribe(topic, error => {
      if (error) {
        console.log('Unsubscribe error', error)
      } else {
        console.log('成功了啊')
      }
    })
  }
  function destroyConnection() {
    console.log('退出登录，关闭mqtt', client)
    console.log(client)
    try {
      client.end()
      console.log('Successfully disconnected!')
    } catch (error) {
      console.log('Disconnect failed', error.toString())
    }
  }
  return {
    createConnection,destroyConnection,doUnSubscribe,doSubscribe
  };
}

使用：

import { btnMqtt } from '@/utils/usemqtt.js';
const { createConnection,doSubscribe } = btnMqtt();
onDeactivated(()=>{
    doUnSubscribe({topic: `newMessage`,})
  })
  onMounted(() => {
    createConnection()//连接mqtt
    doSubscribe({
      topic: `newMessage`,
      qos: 0
    })//订阅
  })

vue2:

import mqtt from 'mqtt'
import { getUserInfoBean } from '@/utils/auth.js'

var client
export const mqttMixins = {
  data() {
    return {
      topicData: [],
      connection: {
        // host: 'xxx.xxx.xx.xx',
        port: 8083,
        endpoint: '/mqtt',
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 4000, // 重连时间间隔
        // 认证信息
        clientId: 'ms' + new Date().getTime(),
        username: 'test',
        password: 'test'
      },
      subscription: {
        topic: `newMessage`,
        qos: 0
      }, //待处理事件topic
      subscribeSuccess: false
    }
  },
  created() {},
  methods: {
    // 创建链接
    createConnection() {
      // 连接字符串, 通过协议指定使用的连接方式
      // ws 未加密 WebSocket 连接
      // wss 加密 WebSocket 连接
      // mqtt 未加密 TCP 连接
      // mqtts 加密 TCP 连接
      // wxs 钉钉小程序连接
      // alis 支付宝小程序连接
      const { host, port, endpoint, ...options } = this.connection
      const connectUrl = `ws://${host}:${port}${endpoint}`
      console.log('connectUrl', connectUrl)

      try {
        client = mqtt.connect(connectUrl, options)
      } catch (error) {
        console.log('mqtt.connect error', error)
      }

      // 连接成功
      client.on('connect', () => {
        console.log(client)
        console.log('Connection succeeded!')
        console.log('userinfo', getUserInfoBean())
        if (getUserInfoBean()) {
          let subscription = {
            topic: `newMessage/${
              JSON.parse(getUserInfoBean()).parentCompanyId
            }`,
            qos: 0
          }
          this.doSubscribe(subscription)
        }
      })

      // 异常
      client.on('error', error => {
        console.log('Connection failed', error)
      })

      // /* 接受消息 */
      client.on('message', (topic, message) => {
        let receiveMessage = JSON.parse(message)
        if (topic == 'numOfConcurrency') {
          this.$store.commit('analysis/SET_CONCURRENCYLIST', receiveMessage)
          console.log('接受成功', receiveMessage)
        } else if (topic.indexOf('newMessage') > -1) {
          this.$store.commit('user/MESSAGE_PUSH')
        }
      })

      // 断开发起重连
      client.on('reconnect', error => {
        console.log('正在重连', error)
      })
    },

    // 订阅
    doSubscribe(item) {
      const { topic, qos } = item
      console.log('item', item)
      client.subscribe(topic, qos, (error, res) => {
        if (error) {
          console.log('Subscribe to topics error', error)
          return
        }
        this.subscribeSuccess = true
        console.log('Subscribe to topics res', res)
      })
    },

    /* 取消订阅 */
    doUnSubscribe(item) {
      const { topic } = item
      client.unsubscribe(topic, error => {
        if (error) {
          console.log('Unsubscribe error', error)
        } else {
          console.log('成功了啊')
        }
      })
    },

    destroyConnection() {
      console.log('退出登录，关闭mqtt', client)
      console.log(client)
      try {
        client.end()
        console.log('Successfully disconnected!')
      } catch (error) {
        console.log('Disconnect failed', error.toString())
      }
    }
  }
}

使用：

import { mqttMixins } from '@/utils/mqttInit.js'
mixins: [mqttMixins],
this.createConnection()
/* 登录成功后，订阅消息mqtt */
        let subscription = {
          topic: `newMessage/${getUserInfoBean() &&
            JSON.parse(getUserInfoBean()).parentCompanyId}`,
          qos: 0
        }
        this.doSubscribe(subscription)