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

IOT 未结

关注举报

 1  459

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

	<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>