從零開(kāi)始學(xué)習3D可視化之數據對接（3）

使用MQTT方式的步驟如下：

var app; // App對象 var car; // 掛載數據的叉車(chē) // 引入樣式文件 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() { // 設置攝像機位置和目標點(diǎn) app.camera.position = [44.38316010361372, 22.256383671664036, 37.42310488848945]; app.camera.target = [19.488379488180318, 0.17527928595920675, 5.827049588512047]; car = app.query('car01')[0]; // 物體身上創(chuàng )建monitorData對象 用于存儲動(dòng)態(tài)監控數據 car.monitorData = { '溫度': '' }; var mqclass = new MQConnection(); // 創(chuàng )建mq服務(wù)類(lèi) new THING.widget.Button('開(kāi)啟鏈接', function() { mqclass.initConnection(); }); new THING.widget.Button('關(guān)閉連接', function() { mqclass.disconnection(); }); createHtml(); initThingJsTip("MQTT 是一個(gè)輕量級協(xié)議，使用 MQTT 協(xié)議的中心是 broker（服務(wù)器/代理），客戶(hù)端通過(guò)訂閱消息和發(fā)布消息進(jìn)行數據交互。<br>點(diǎn)擊【開(kāi)啟讀取】進(jìn)行數據讀取，讀取到的數據將在數據詳情面板進(jìn)行顯示，當溫度值大于30℃時(shí)，車(chē)輛設置紅色效果，點(diǎn)擊【關(guān)閉讀取】停止數據讀??！"); }) }) class MQConnection { /** * 構造器 */ constructor() { this.init(); } /** * 初始化 */ init() { // 數據推送的url，可修改為自己的服務(wù)地址 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('連接成功，訂閱話(huà)題！'); _this.stompClient.subscribe('/topic/monitor/temperature/one', function(message) { if (message.body) { let data = message.body; console.log('接收溫度數據:' + data); updateState(data); } else { console.log('無(wú)數據推送！'); } }); } /** * 關(guān)閉連接 */ disconnection() { console.log('連接已關(guān)閉！'); this.stompClient.disconnect(); } /** * 連接失敗后的回調 */ errorCallback(error) { console.log('連接失??！'); console.log(error); } } /** * 接收推送數據后更新?tīng)顟B(tài) */ function updateState(data) { car.setAttribute("monitorData/溫度", data); nowDatetime(); if (($('.empty').length)) { $('.empty').remove(); } if (!($('.tj-group').length)) { let tbody = `<tbody ></tbody>`; $('.tj-table').prepend(tbody); } let tr = `<tr > <td >` + dateString + `</td> <td >` + 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; } /** * 當車(chē)輛的溫度值超過(guò)20時(shí)，更改小車(chē)顏色 */ 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; } } // 創(chuàng )建html界面 function createHtml() { // 數據詳情界面 let dataDetails = `<div> <div ></div> <div>數據詳情</div> <div> <div > <table > <div >暫無(wú)數據</div> </table> </div> </div> </div>`; $('#div2d').append(dataDetails); // 點(diǎn)擊按鈕關(guān)閉面板 $('#dataDetails .tj-close').on('click', function() { $('#dataDetails').css('display', 'none'); }); }