j***@163.com
j***@163.com
  • 发布:2020-10-27 09:12
  • 更新:2020-10-27 09:12
  • 阅读:1787

mqtt在页面卸载时执行关闭订阅和连接的函数,但是在app-nvue中,mqtt依旧接收并处理接收到的数据。

分类:nvue

问题平台: 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>  
2020-10-27 09:12 负责人:DCloud_uniAD_HDX 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复