问题平台: Android
HBuilder版本:2.9.3.20201014
mqtt: 官方demo中的mqtt
demo测试项目地址:https://github.com/asagcs/mqttTest2
问题详情:
测试1: 点击按钮执行关闭订阅和关闭连接函数执行正常
测试2: 但是在app-nvue中,在页面卸载时执行关闭订阅和连接的函数, mqtt依旧接收并处理接收到的数据。 将此文件改为改为vue文件或者在微信小程序上执行正常。
需求: 如何在android平台。 app-nvue文件中,离开页面时关闭订阅和连接,不再接受消息。
个人猜测: 生命周期 destroy与异步函数执行冲突。
代码:
<template>
<view>
<button type="primary" @click="connect">mqtt 连接</button>
<button type="primary" @click="subscribe">mqtt 订阅</button>
<button type="primary" @click="unsubscribe">取消订阅</button>
<button type="primary" @click="unconnect">断开连接</button>
<view>message:{{ receiveMessage.toString() }}</view>
</view>
</template>
<script>
//import mqtt from '../../utils/mqtt.js';//二选一
import mqtt from '../../utils/mqtt.min.js';
export default {
data() {
return {
serve: {
host: 'www.ttpa.top',
port: '8083',
path: '/mqtt',
},
onTopic: '/gps/vehicle',
Qos: 0,
sendMassage: 'Hello EMQ-X!',
time:0,
receiveMessage: '',
client: null,
//MQTT连接的配置
options: {
wsOptions: {},
protocolVersion: 4, //MQTT连接协议版本
clientId: 'skfsk',
keepalive: 60,
clean: false,
username: '',
password: '',
reconnectPeriod: 1000, //1000毫秒,两次重新连接之间的间隔
connectTimeout: 30 * 1000, //1000毫秒,两次重新连接之间的间隔
resubscribe: true //如果连接断开并重新连接,则会再次自动订阅已订阅的主题(默认true)
},
};
},
methods: {
connect: function() {
var hosts = '',
// #ifdef H5
hosts = 'ws://' + this.serve.host + ':' + this.serve.port + this.serve.path
//#endif
// #ifdef MP-WEIXIN
hosts = 'wxs://' + this.serve.host + this.serve.path
//#endif
// #ifdef APP-PLUS
hosts = 'wx://' + this.serve.host + ':' + this.serve.port + this.serve.path
//#endif
if (this.client == null || this.client.connented == false) {
uni.showLoading({
title: '连接中···'
})
console.log(hosts, this.options)
this.client = mqtt.connect(
hosts,
this.options
);
this.client.on('connect', () => {
uni.hideLoading();
this.showToast('连接成功', 1000, 'success')
});
this.client.on('message', (topic, message) => {
console.log('收到来自' + topic + '的消息' + message.toString());
this.receiveMessage = message
});
}
this.client.on('reconnect', error => {
uni.hideLoading();
this.showToast('正在重连···', 1000)
});
this.client.on('error', error => {
uni.hideLoading();
this.showToast('连接失败!', 1000)
});
},
subscribe: function() {
// 判断是否已成功连接
if (!this.client || !this.client.connected) {
this.showToast('客户端未连接', 1000)
return;
}
let client = this.client;
this.client.subscribe(this.onTopic, {
qos: this.Qos
}, error => {
if (!error) {
this.showToast('订阅成功', 1000, 'success')
console.log('订阅成功');
}
});
/* //订阅多个主题
this.client.subscribe(['one', 'two', 'three'], { qos: 1 }, err => {
console.log(err || '订阅成功');
this.show(err || '订阅成功');
});
// 订阅不同 qos 的不同主题
this.client.subscribe(
[
{ hello: 1 },
{ 'one/two/three': 2 },
{ '#': 0 }
],
(err) => {
this.show();console.log(err || '订阅成功')
},
)
}); */
},
unsubscribe: function() {
this.client.unsubscribe(
// topic, topic Array, topic Array-Onject
// ['one', 'two', 'three'],
this.onTopic,
err => {
console.log(err || '取消订阅成功');
this.showToast('取消订阅成功', 1000, 'success')
}
);
},
unconnect: function() {
this.client.end();
this.client = null
this.showToast('成功断开连接', 1000, 'success')
console.log('断开连接');
},
showToast: function(title, time, icon = 'none') {
uni.showToast({
title: title,
icon: icon,
});
setTimeout(function() {
uni.hideToast();
}, time);
},
},
beforeDestroy() {
this.unsubscribe();
this.unconnect();
}
}
</script>
<style>
button {
margin-top: 30upx;
margin-bottom: 30upx;
}
</style>
0 个回复