MQTT是ThingJS平台反对的四种数据对接形式之一,MQTT又称Message Queuing Telemetry Transport,音讯队列遥测传输,是 ISO 规范(ISO/IEC PRF 20922)下基于公布 (Publish)或订阅 (Subscribe)范式的音讯协定,可视为“材料传递的桥梁”。MQTT是一个轻量级协定,应用MQTT协定的核心是broker(服务器/代理),客户端通过订阅音讯和公布音讯进行数据交互。
应用MQTT形式的步骤如下:
1.间接连贯MQTT服务器(需反对websocket拜访,Mosquitto反对websocket的配置可自行百度)。
2.援用第三方 mqtt库。
3.MQTT数据对接。
一个简略示例如下:
性能:通过MQTT形式读取数据并将数据挂接到物体(car01)身上,当温度>30℃时,car01变红。
var app; // App对象var car; // 挂载数据的叉车 // 引入款式文件THING.Utils.dynamicLoad([ 'https://www.thingjs.com/static/lib/stomp.min.js', '/guide/examples/css/measure/panel.css'], function() { app = new THING.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 = { '温度': '' }; var mqclass = new MQConnection(); // 创立mq服务类 new THING.widget.Button('开启链接', function() { mqclass.initConnection(); }); new THING.widget.Button('敞开连贯', function() { mqclass.disconnection(); }); createHtml(); initThingJsTip("MQTT 是一个轻量级协定,应用 MQTT 协定的核心是 broker(服务器/代理),客户端通过订阅音讯和公布音讯进行数据交互。<br>点击【开启读取】进行数据读取,读取到的数据将在数据详情面板进行显示,当温度值大于30℃时,车辆设置红色成果,点击【敞开读取】进行数据读取!"); })}) class MQConnection { /** * 结构器 */ constructor() { this.init(); } /** * 初始化 */ init() { // 数据推送的url,可批改为本人的服务地址 this.socketUrl = 'wss://www.3dmmd.cn:8086'; // 连贯 this.stompClient = null; // this.initConnection(); } /** * 初始化连贯 */ initConnection() { var _this = this; if (_this.stompClient != null) return; _this.stompClient = Stomp.client(_this.socketUrl); var success = function() { _this.successCallback(); } var error = 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) { let data = message.body; console.log('接管温度数据:' + data); updateState(data); } else { console.log('无数据推送!'); } }); } /** * 敞开连贯 */ disconnection() { console.log('连贯已敞开!'); this.stompClient.disconnect(); } /** * 连贯失败后的回调 */ errorCallback(error) { console.log('连贯失败!'); console.log(error); }} /** * 接管推送数据后更新状态 */function updateState(data) { car.setAttribute("monitorData/温度", data); nowDatetime(); if (($('.empty').length)) { $('.empty').remove(); } if (!($('.tj-group').length)) { let tbody = `<tbody class="tj-group" id="tb-line"></tbody>`; $('.tj-table').prepend(tbody); } let tr = `<tr class="tj-group-content"> <td class="tj-key">` + dateString + `</td> <td class="tj-value">` + data + `℃</td> </tr>`; $('.tj-group').prepend(tr); changeColor(car);} /** * 获取零碎日期 */function nowDatetime() { var date = new Date(); var hours = (date.getHours()) > 9 ? (date.getHours()) : "0" + (date.getHours()); var minutes = (date.getMinutes()) > 9 ? (date.getMinutes()) : "0" + (date.getMinutes()); var seconds = (date.getSeconds()) > 9 ? (date.getSeconds()) : "0" + (date.getSeconds()); dateString = hours + ":" + minutes + ":" + seconds; return dateString;} /** * 当车辆的温度值超过20时,更改小车色彩 */function changeColor(obj) { var temper = obj.getAttribute("monitorData/温度"); var value = temper; if (value > 30) { obj.style.color = 'rgb(255,0,0)'; } else { obj.style.color = null; }} // 创立html界面function createHtml() { // 数据详情界面 let dataDetails = `<div id="dataDetails" class="tj-panel property-panel tj-has-title tj-sizable tj-property-panel tj-pinned" style="position: absolute; right: 10px; top: 220px; width: 315px; height: 416px; transform: none;"> <div class="tj-close"></div> <div class="tj-title" style="cursor: move; user-select: none;">数据详情</div> <div class="tj-panel-body" style="padding-top: 0px;"> <div class="tj-panel-container tj-scroll-bar"> <table class="tj-table"> <div class="empty">暂无数据</div> </table> </div> </div> </div>`; $('#div2d').append(dataDetails); // 点击按钮敞开面板 $('#dataDetails .tj-close').on('click', function() { $('#dataDetails').css('display', 'none'); });}
MQTT是一个基于客户端-服务器的音讯公布/订阅传输协定。MQTT协定是轻量、简略、凋谢和易于实现的,这些特点使它适用范围十分宽泛。能够以极少的代码和无限的带宽,为连贯近程设施提供实时牢靠的音讯服务。作为一种低开销、低带宽占用的即时通讯协定,使其在物联网3D可视化等方面有较宽泛的利用。
—————————————————