在BladeX可视化数据大屏中，如何通过MQTT/WebSocket从BladeX物联网开发平台获取单个设备的最新数据？

IOT 未结

关注举报

 1  742

tianze 剑童 2024-08-27 17:26

一、该问题的重现步骤是什么？

二、你期待的结果是什么？实际看到的又是什么？

三、你正在使用的是什么产品，什么版本？在什么操作系统上？

四、请提供详细的错误堆栈信息，这很重要。

五、若有更多详细信息，请在下面提供。

1条回答

admin - BladeX作者

2024-08-27 20:18

线上例子：https://data.avuejs.com/build/1828630631186333697

自定义组件视频教程：https://www.bilibili.com/video/BV1dW421R7f1

自定义组件核心代码(下版本会直接做一个独立组件可直接选择)：

<template>
    <div class="text">
        data:{{data}}
    </div>
</template>
<script>
export default{
    data(){
        // mqtt连接账号在这里创建：https://iot.javablade.com/iot/mqtt/account
        return{
            params:['LightSwitch'],
            check:null,
            time:500,
            productKey:'JkerjK97oub',
            deviceName:'HqDHKmXjVGD2yMVn',
            config:{
                clientId:new Date().getTime(),
                username:'bladexiot',
                password:'bladexiot',
                connectTimeout: 5000
            },
            url:'wss://broker.javablade.com',
            data:[],
            client:null
        }
    },
    created(){
	this.client = mqtt.connect(this.url, this.config);
        console.log(this.url,this.config);
        this.client.on('connect', () => {
            console.log('mqtt链接成功')
	    this.onSubscribe();
            // 监听消息
            this.onMessage();
            //循环监听
            this.onListen();
        })
    },
    methods:{
        getTopicPrefix () {
            const prefix = "/blade/sys";
            return `${prefix}/${this.productKey}/${this.deviceName}/`;
        },
        onListen () {
            this.params.forEach(ele => {
                this.check = setInterval(() => {
                    if (this.client.connected == true) {
                        this.sendProperty({ identifier: ele })
                    } else {
                        clearInterval(this.check)
                    }
                }, this.time)
            })
        },
        sendProperty (data) {
            let topic = this.getTopicPrefix()+'thing/service/property/get';
            const req = {
                id: new Date().getTime(),
                version: '1.0',
                params: {
                    ...data
                }
            };
            const message = JSON.stringify(req);
            this.publish(topic, message);
        },
        publish (topic, message) {
            this.client.publish(topic, message, (err) => {
                if (err) {
                    console.log(err)
                }
            });
        },
        onSubscribe () {
            // 设备响应云端获取设备属性
            this.client.subscribe(this.getTopicPrefix() + "thing/service/property/get_reply", function (err) {
                if (!err) {
                    console.log('ServicePropertyGetReply 订阅成功');
                } else {
                    console.log('ServicePropertyGetReply 订阅失败', err);
                }
            });
        },
        onMessage () {
            // 接收订阅消息
            this.client.on('message', (topic, message) => {
                if (topic ===this.getTopicPrefix() + "thing/service/property/get_reply") {
                    // 设备响应云端获取设备属性
                    const data=JSON.parse(message.toString());
                    this.data=data.params
                }
            })
        }
    }
}
</script>
<style>
    .text{
        color:#fff;
        font-size:30px;
    }
</style>

演示功能：

                                          
          

                                
              
                       
                        作者追问:2024-09-11 11:38
                  
  
  在Vue3的版本实例代码工作正常，但是在Vue2版本中提示找不到mqtt