mqtt vue3 封装 utils 创建mqtt.ts

import mqtt from 'mqtt'
import { ref, onUnmounted } from 'vue'
import { useUserStore } from '@/stores'
import { unref } from 'vue'

const host = 'ws://xxxxxxxx:8083/mqtt' //服务器的地址
const options = {
  clean: true, // true: 清除会话, false: 保留会话
  connectTimeout: 4000, // 超时时间
  clientId: 'h5_emqx' + Math.random().toString(16).slice(3), //不填默认随机生成一个ID
  username: '111111', //用户名
  password: '123456', //密码
  keepalive: 60,
  reconnectPeriod: 4000, // 重连时间间隔
}
// 导出MQTT客户端实例
export let marketStompClient: mqtt.Client | null = null

// 创建MQTT连接
export function createMarketWS() {
  const userStore = useUserStore()

  // 如果已经连接，则直接返回
  // if (marketStompClient && marketStompClient.connected) {
  //   console.log('12312312');
  //   return
  // }

  // 创建 MQTT 客户端实例
  marketStompClient = mqtt.connect(host, options)

  // 设置客户端调试模式（可选）
  marketStompClient.on('connect', () => {
    if (userStore.isMarket === 'market') {
      const marketMQTTTopic = [
        ‘主题1’，‘主题2’
      ]
      // 连接成功后订阅主题
      marketStompClient.subscribe(marketMQTTTopic, (err: any) => {
        if (!err) {
          // console.log(marketMQTTTopic)
        } else {
          console.error(err)
        }
      })
    } else {
      const marketMQTTTopic = [
       主题1’，‘主题2’
      ]
      marketStompClient.subscribe(marketMQTTTopic, (err: any) => {
        if (!err) {
          // console.log(marketMQTTTopic)
        } else {
          console.error(err)
        }
      })
    }
  })

  // 处理连接错误
  marketStompClient.on('error', (err: any) => {
    createMarketWS()
    console.error(err)
  })
  // 处理接收到的消息
  marketStompClient.on('message', (topic: any, message: any) => {
    // 处理消息内容
    let parts = topic
    if (firstPart == '主题1') {
      var data = JSON.parse(message)
      if (data.direction === 'BUY' && data.symbol == unref(userStore.marketSymbol)) {
        userStore.setMarketBuyList(data.items)
      }

      if (data.direction === 'SELL' && data.symbol == unref(userStore.marketSymbol)) {
        userStore.setMarketSellList(data.items)
      }
    } else if (firstPart == '主题2') {
      var data = JSON.parse(message)
      // console.log(data);
      if (data.direction === 'BUY' && data.symbol == unref(userStore.swapSymbol)) {
        userStore.setSwapBuyList(data.items)
      }

      if (data.direction === 'SELL' && data.symbol == unref(userStore.swapSymbol)) {
        userStore.setSwapSellList(data.items)
      }
    } else if (firstPart == '') {
      var data = JSON.parse(message)
      if (userStore.isMarket === 'market' && userStore.marketSymbol === data.symbol) {
        userStore.setKline24hData(data)
        userStore.setMarketBuyHighestPrice(data.close)
      }
    } else if (firstPart == '') {
      var data = JSON.parse(message)
      if (userStore.isMarket === 'swap' && userStore.swapSymbol === data.symbol) {
        userStore.setKline24hData(data)
        userStore.setSwapBuyHighestPrice(data.close)
      }
    } else if (firstPart == '') {
      var data = JSON.parse(message)
      userStore.setMarketTradeRecord(data)
    } else if (firstPart == '') {
      var data = JSON.parse(message)
      if (data.period == unref(userStore.resolution) && userStore.isMarket === 'market' && userStore.marketSymbol == data.symbol) {
        userStore.setKlineData(data)
      }
    } else if (firstPart == '') {
      var data = JSON.parse(message)
      userStore.setSwapTradeRecord(data)
    } else if (firstPart == '') {
      var data = JSON.parse(message)
      if (data.period == unref(userStore.resolution) && userStore.isMarket === 'swap' && userStore.swapSymbol == data.symbol) {
        userStore.setKlineData(data)
      }
    }
  })
}
export function unSubscribeMarketMQTT() {
  const userStore = useUserStore()
  if (userStore.isMarket === 'market') {
    const marketMQTTTopic = [
     主题1’，‘主题2’
    ]
    // 检查 MQTT 客户端是否已连接并且已初始化
    if (marketStompClient && marketStompClient.connected) {
      // 取消订阅市场更新主题
      marketMQTTTopic.forEach((topic) => {
      marketStompClient.unsubscribe(topic, (err: any) => {
        console.log(err)
      })
    })
    }
  } else {
    const marketMQTTTopic = [
    主题1’，‘主题2’
    ]
    // 检查 MQTT 客户端是否已连接并且已初始化
    if (marketStompClient && marketStompClient.connected) {
      // 取消订阅市场更新主题
      marketMQTTTopic.forEach((topic) => {
      marketStompClient.unsubscribe(topic, (err: any) => {
        console.log(err)
      })
    })
    }
  }
}
export function disMqttconnect() {
  marketStompClient.end(true)
  marketStompClient = null
}

需要  连接mqtt的页面   

onLoad(() => {

  createMarketWS()

}

webpack 3   版本对应的   mqtt版本  就是3      高版本可以下最新版本的mqtt 否则不兼容，