MQTTMQTT is one of the four data interconnection methods supported by the ThingJS platform. MQTT is also known as Message Queuing Telemetry Transport. It is a message protocol based on Publish or Subscribe paradigm under ISO standard (ISO/IEC PRF 20922), which can be regarded as a “bridge of data transmission”. MQTT is a lightweight protocol. At the center of the MQTT protocol is the broker (server/broker), and clients interact with data by subscribing to messages and publishing messages.
The steps to use MQTT are as follows:
1. Connect directly to the MQTT server (need to support Websocket access, Mosquitto support Websocket configuration can be customized).
2. Reference the third-party MQTT library.
3. The MQTT data is connected.
A simple example is as follows:
Function: Read data through MQTT and hang the data to the object (CAR01) body, when the temperature is >30℃, CAR01 turns red.
var app; // App object var car; Forklift / / / / mount data is introduced into the style file 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() {// Set camera position and target app.camera. Position = [44.38316010361372, 22.256383671664036, 37.42310488848945]; App.camera. Target = [19.488379488180318, 0.17527928595920675, 5.827049588512047]; car = app.query('car01')[0]; // Create a monitorData object on the object to store dynamic monitoring data car. MonitorData = {' temperature ': ''}; var mqclass = new MQConnection(); New thing.widget. Button(' open link ', function() {mqClass.initConnection (); }); New thing.widget. Button(' close connection ', function() {mqclass.disconnection(); }); createHtml(); InitThingJsTip ("MQTT is a lightweight protocol. The center of the MQTT protocol is the broker (server/broker). The client interacts with the data by subscriping to messages and publishing messages. <br> Click "Open Read" to read the data. The data read will be displayed in the data detail panel. When the temperature value is greater than 30℃, the vehicle will set the red effect, click "Close Read" to stop reading the data! ); })}) class MQConnection {/** * constructor */ constructor() {this.init(); } /** * initialize */ init() {// The url of the data push, which can be changed to its own service address this.socketUrl = 'WSS ://www.3dmmd.cn:8086'; // Connect this.stompClient = null; // this.initConnection(); } /** * Initialize connection */ 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; // If you want to print Stomp logs, comment on this line} /** * Callback after successful connection, subscribe to the topic */ successCallback(data) {var _this = this; Console. log(' Connection successful, subscribe topic! '); _this.stompClient.subscribe('/topic/monitor/temperature/one', function(message) { if (message.body) { let data = message.body; Console. log(' receive temperature data :' + data); updateState(data); } else {console.log(' no data push! '); }}); } /** * close connection */ disconnection() {console.log(' Connection closed! '); this.stompClient.disconnect(); } /** * callback after connection failure */ errorCallback(error) {console.log(' Connection failed! '); console.log(error); } /** * update status */ function updateState(data) {car.setattribute ("monitorData/ temperature ", 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; Function changeColor(obj) {var temper = obj. GetAttribute ("monitorData/ temperature "); var value = temper; If (value > 30) {color = RGB (50, 50, 50); font-size: 14.0px; background-color: RGB (255,255,255);" } else { obj.style.color = null; 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 class="tj-panel-body" style="padding-top: 0px; > <div class="tj-panel-container TJ-scture-bar "> <div class="empty"> </div> </table> </div> </div> </div>`; $('#div2d').append(dataDetails); / / click on the button to close the panel $(' # dataDetails. Tj - close), on (' click ', function () {$(' # dataDetails). CSS (' display ', 'none'); }); }MQTT is a client-server based message publish/subscribe transport protocol. The MQTT protocol is lightweight, simple, open, and easy to implement, which makes it very applicable to a wide range of applications. With very little code and limited bandwidth, it can provide real-time and reliable messaging service for connecting remote devices. As an im protocol with low overhead and low bandwidth, it is widely used in 3D visualization of the Internet of Things. — — — — — — — — –