uniapp在app下使用mqtt协议！！！支持vue3

什么？打包空白？分享一下我的解决方法！

第一步

找大师算过了，装4.1版本运气好！

所以根目录执行命令...

javascript 复制代码

npm install mqtt@4.1.0

第二步

自己封装一个mqtt文件方便后期开坛做法！

javascript 复制代码

// utils/mqtt.js
import mqtt from 'mqtt/dist/mqtt'

class MQTTClient {
  constructor() {
    this.client = null
    this.subscriptions = new Map()
    this.reconnectTimer = null
    this.config = {
      host: 'mqtt://your-broker.com',
      options: {
        clientId: 'uni-app-' + Date.now(),
        keepalive: 60,
        clean: true,
        reconnectPeriod: 5000
      }
    }
  }

  init() {
    if (!this.client) {
      this.connect()
    }
  }

  connect() {
    this.client = mqtt.connect(this.config.host, this.config.options)

    this.client.on('connect', () => {
      console.log('MQTT Connected')
      this.resubscribe()
    })

    this.client.on('message', (topic, message) => {
      this.handleMessage(topic, message)
    })

    this.client.on('error', (err) => {
      console.error('MQTT Error:', err)
    })

    this.client.on('close', () => {
      console.log('MQTT Connection closed')
      this.scheduleReconnect()
    })
  }

  subscribe(topic, callback) {
    if (!this.subscriptions.has(topic)) {
      this.subscriptions.set(topic, new Set())
      if (this.client?.connected) {
        this.client.subscribe(topic)
      }
    }
    this.subscriptions.get(topic).add(callback)
  }

  unsubscribe(topic, callback) {
    if (this.subscriptions.has(topic)) {
      const callbacks = this.subscriptions.get(topic)
      callbacks.delete(callback)
      if (callbacks.size === 0) {
        this.subscriptions.delete(topic)
        if (this.client?.connected) {
          this.client.unsubscribe(topic)
        }
      }
    }
  }

  handleMessage(topic, message) {
    if (this.subscriptions.has(topic)) {
      const callbacks = this.subscriptions.get(topic)
      callbacks.forEach(cb => cb(message.toString()))
    }
  }

  resubscribe() {
    if (this.client?.connected) {
      const topics = Array.from(this.subscriptions.keys())
      if (topics.length > 0) {
        this.client.subscribe(topics)
      }
    }
  }

  scheduleReconnect() {
    if (!this.reconnectTimer) {
      this.reconnectTimer = setTimeout(() => {
        this.reconnectTimer = null
        this.connect()
      }, 5000)
    }
  }

  destroy() {
    if (this.client) {
      this.client.end()
      this.client = null
    }
    this.subscriptions.clear()
    clearTimeout(this.reconnectTimer)
  }
}

export const mqttClient = new MQTTClient()

第三步

打开 main.js 文件

思量前后，觉得还是全局挂载吧

javascript 复制代码

import mqtt from '@/mqtt/dist/mqtt.js'
app.config.globalProperties.$mqtt = mqtt;

第四步

打开这个mqtt.js修改源码，注意，不是你自己创建的mqtt.js，是安装的依赖库文件，路径在根目的node_modules/mqtt/dist 里面！！！！！

然后把里面的代码修改，看图，要改2行！！！源码使用的是 wx.connectSocket，修改之后：uni.connectSocket

最后要加上 complete:()=>{}, 别问为什么，一问你就输了！！！！

第五步

到这里已经可以使用了，不信你打包一下app试下，自定义基座也是没问题的！

下面是我的使用代码！

javascript 复制代码

<template>
	<view>
		收到的MQTT内容===>{{msg}}
	</view>
</template>

<script>
	export default {
		name: "wang-mqtt",
		data() {
			return {
				msg: '初始化mqtt'
			}
		},
		created() {
			// 连接配置
			let myOptions = {
				clientId: 'uni-app-' + Date.now(),
				keepalive: 60,
				clean: true,
				reconnectPeriod: 5000
			}
			let ip = ''
			// #ifdef H5
			 ip = 'ws://你的IP:8083/mqtt'
			// #endif
			// #ifdef APP-PLUS
			 ip = 'wx://你的IP:8083/mqtt'
			// #endif

			// 创建 MQTT 客户端
			const client = this.$mqtt.connect(ip, myOptions);
			// 订阅主题
			client.subscribe('app_xxdg/topic', (err) => {
				if (!err) console.log('成功已订阅主题');
			});
			// 监听消息
			client.on('message', (topic, message) => {
				this.msg = message.toString()
				console.log(`收到消息：`, message.toString());
			});
		},
		methods: {

		}
	}
</script>
<style>
</style>