在uniapp中,mqtt.js在接收到数据后,如何将数据实时更新到vue界面上的data中,以实现数据动态更新?
以下是mqtt.js部分的代码
import mqtt from 'mqtt/dist/mqtt.js' //引入mqtt依赖
export var client
export var monitoredValue
let mqttConnected = false //mqtt连接状态,这个可以不要,直接查询client.connected即可
const publishTopic = '/k1bup6fRrSA/uni-app/user/update' //发布Topic
const MQTT_IP = 'iot-06z00cg5uyb7vtn.mqtt.iothub.aliyuncs.com' //mqtt地址端口
const subscribeTopic = '/k1bup6fRrSA/uni-app/user/get'
const MQTT_OPTIONS = {
connectTimeout: 5000, //连接超时时间
clientId: 'k1bup6fRrSA.uni-app|securemode=2,signmethod=hmacsha256,timestamp=1716717442073|', //clientId不能重复,这里可以随机生成
username: 'uni-app&k1bup6fRrSA', //用户名
password: 'f5965397dd9cee4cba6a851d3db8fb71c264064252cb4237d4045a367d77e7ef', //密码
clean: false
}
//创建客户端连接
export function mqttConnect() {
// #ifdef H5
client = mqtt.connect('wss://' + MQTT_IP + ':443/mqqt', MQTT_OPTIONS, function(err){
console.log(err)
})
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
client = mqtt.connect('wxs://' + MQTT_IP + ':443/mqqt', MQTT_OPTIONS, function(err){
console.log(err)
})
// #endif
client.on('connect', function() {
console.log('连接成功')
mqttConnected = true
}).on('reconnect', function(error) {
console.log('正在重连...', error)
mqttConnected = false
}).on('error', function(error) {
console.log('连接失败...', error)
mqttConnected = false
}).on('end', function() {
console.log('连接断开')
mqttConnected = false
}).on('close',function(){
console.log('连接关闭')
mqttConnected = false
}).on('offline',function(){
console.log('客户端下线')
}).on('message', function(topic, message) {
console.log('收到消息:', topic, message.toString())
monitoredValue = JSON.parse(message)
console.log(monitoredValue)
// 在此处理接收到的消息
})
}
//发布消息
export function mqttPublish(msg){
if(mqttConnected){
client.publish(publishTopic,msg,{qos:1,retain:false});//hello mqtt +
console.log('发布了一条消息',msg)
}else{
uni.showToast({
title: 'MQTT服务器未连接',
icon: 'none'
});
}
}
//断开连接
export function mqttDisconnect(){
console.log('mqttConnected',mqttConnected)
console.log('client',client)
if(mqttConnected){
client.end(true)
mqttConnected = false
}
}