当前位置: 首页 > Web前端 > JavaScript

从零开始学习3D可视化数据对接(三)

时间:2023-03-27 02:19:11 JavaScript

MQTT是ThingJS平台支持的四种数据对接方式之一。MQTT,也称为消息队列遥测传输,是一个ISO标准(ISO/IECPRF20922),基于发布或订阅范式的消息协议可以被视为“数据传输的桥梁”。MQTT是一种轻量级协议。使用MQTT协议的中心是broker(服务器/代理),客户端通过订阅和发布消息与数据进行交互。MQTT方法的使用步骤如下:1.直接连接MQTT服务器(需要websocket接入,Mosquitto支持websocket配置可以自行百度)。2.引用第三方mqtt库。3.MQTT数据连接。一个简单的例子如下:功能:通过MQTT读取数据,并将数据附加到对象(car01)上。当温度>30°C时,car01变为红色。变种应用程序;//应用程序对象varcar;//加载数据的叉车//导入样式文件THING.Utils.dynamicLoad(['https://www.thingjs.com/static/lib/stomp.min.js','/guide/examples/css/measure/panel.css'],function(){app=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'});app.on('load',function(){//设置摄像机位置和目标点app.camera.position=[44.38316010361372,22.256383671664036,37.42310488848945];app.camera.target=[19.488379488180318,0.17527928595920675,5.827049588512047];car=app.query('car01')[0];//在对象上创建一个monitorData对象,用于存储动态监控数据car.monitorData={'temperature':''};varmqclass=newMQConnection();//创建mq服务类newTHING.widget.Button('打开连接',function(){mqclass.initConnection();});newTHING.widget.Button('关闭连接',function(){mqclass.disconnection();});createHtml();initThingJsTip("MQTT是一个轻量级的协议,使用MQTT协议的中心是代理(server/broker),客户端通过订阅和发布消息与数据交互。
点击【打开阅读】可以读取数据,读取到的数据会显示在数据详情面板中。当温度值大于30℃时,车辆会设置红色效果,点击【关闭读数】停止数据读取!");})})classMQConnection{/***Constructor*/constructor(){this.init();}/***初始化*/init(){//数据推送的URL,可修改到自己的服务地址this.socketUrl='wss://www.3dmmd.cn:8086';//connectthis.stompClient=null;//this.initConnection();}/***初始化连接*/initConnection(){var_this=this;if(_this.stompClient!=null)return;_this.stompClient=Stomp.client(_this.socketUrl);varsuccess=function(){_this.successCallback();}varerror=function(error){_this.errorCallback(error);}_this.stompClient.connect({},success,error);_this.stompClient.debug=null;//如果需要打印Stomp日志,注释掉这行代码}/***连接成功回调,订阅主题*/successCallback(data){var_this=this;console.log('连接成功,订阅主题!');_this.stompClient.subscribe('/topic/monitor/temperature/one',function(message){if(message.body){让数据=message.body;缺点ole.log('接收温度数据:'+data);更新状态(数据);}else{console.log('没有数据推送!');}});}/***关闭连接*/disconnection(){console.log('连接已关闭!');this.stompClient.disconnect();}/***连接失败后的回调*/errorCallback(error){console.log('Connectionfailed!');控制台日志(错误);}}/***收到推送数据后更新状态*/functionupdateState(data){car??.setAttribute("monitorData/temperature",data);现在日期时间();如果(($('.empty').length)){$('.empty').remove();}if(!($('.tj-group').length)){lettbody=``;$('.tj-table').prepend(tbody);}让tr=``+dateString+``+data+`℃`;$('.tj-group').prepend(tr);changeColor(car);}/***获取系统日期*/functionnowDatetime(){vardate=newDate();varhours=(date.getHours())>9?(date.getHours()):"0"+(date.getHours());varminutes=(date.getMinutes())>9?(date.getMinutes()):"0"+(date.getMinutes());varseconds=(date.getSeconds())>9?(date.getSeconds()):"0"+(date.getSeconds());dateString=小时+":"+分钟+":"+秒;returndateString;}/***当车辆温度值超过20时,改变汽车颜色*/functionchangeColor(obj){vartemper=obj.getAttribute("monitorData/temperature");var值=脾气;if(value>30){obj.style.color='rgb(255,0,0)';}else{obj.style.color=null;}}//创建html界面functioncreateHtml(){//数据详情界面letdataDetails=`

数据详情
暂无数据
`;$('#div2d').append(dataDetails);//点击按钮关闭面板$('#dataDetails.tj-close').on('click',function(){$('#dataDetails').css('display','none');});}MQTT是一种基于客户端-服务器的消息发布/订阅传输协议MQTT协议具有轻量级、简单、开放和易于实现的特点,这些特点使其适用范围非常广泛。它可以用很少的代码和有限的带宽为连接的远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议,在物联网3D可视化方面有着广泛的应用。——————————————————