什么?打包空白?分享一下我的解决方法!
第一步
找大师算过了,装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>