[技术讨论] 从零开始学习3D可视化之数据对接(3)

[复制链接]
3857|0
 楼主| 森友小锘 发表于 2021-7-23 14:40 | 显示全部楼层 |阅读模式
#申请原创# #每日话题# #有奖活动# #技术资源# #申请开发板#
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变红。

  1. var app; // App对象
  2. var car; // 挂载数据的叉车

  3. // 引入样式文件
  4. THING.Utils.dynamicLoad([
  5. 'https://www.thingjs.com/static/lib/stomp.min.js',
  6. '/guide/examples/css/measure/panel.css'
  7. ], function() {
  8. app = new THING.App({
  9. url: 'https://www.thingjs.com/static/models/storehouse'
  10. });

  11. app.on('load', function() {
  12. // 设置摄像机位置和目标点
  13. app.camera.position = [44.38316010361372, 22.256383671664036, 37.42310488848945];
  14. app.camera.target = [19.488379488180318, 0.17527928595920675, 5.827049588512047];
  15. car = app.query('car01')[0];
  16. // 物体身上创建monitorData对象 用于存储动态监控数据
  17. car.monitorData = {
  18. '温度': ''
  19. };
  20. var mqclass = new MQConnection(); // 创建mq服务类
  21. new THING.widget.Button('开启链接', function() {
  22. mqclass.initConnection();
  23. });
  24. new THING.widget.Button('关闭连接', function() {
  25. mqclass.disconnection();
  26. });

  27. createHtml();
  28. initThingJsTip("MQTT 是一个轻量级协议,使用 MQTT 协议的中心是 broker(服务器/代理),客户端通过订阅消息和发布消息进行数据交互。<br>点击【开启读取】进行数据读取,读取到的数据将在数据详情面板进行显示,当温度值大于30℃时,车辆设置红色效果,点击【关闭读取】停止数据读取!");
  29. })
  30. })

  31. class MQConnection {
  32. /**
  33. * 构造器
  34. */
  35. constructor() {
  36. this.init();
  37. }
  38. /**
  39. * 初始化
  40. */
  41. init() {
  42. // 数据推送的url,可修改为自己的服务地址
  43. this.socketUrl = 'wss://www.3dmmd.cn:8086';
  44. // 连接
  45. this.stompClient = null;
  46. // this.initConnection();
  47. }
  48. /**
  49. * 初始化连接
  50. */
  51. initConnection() {
  52. var _this = this;
  53. if (_this.stompClient != null) return;
  54. _this.stompClient = Stomp.client(_this.socketUrl);
  55. var success = function() {
  56. _this.successCallback();
  57. }
  58. var error = function(error) {
  59. _this.errorCallback(error);
  60. }
  61. _this.stompClient.connect({}, success, error);
  62. _this.stompClient.debug = null; // 如果需要Stomp日志打印,注释此行代码
  63. }
  64. /**
  65. * 连接成功后的回调,订阅主题
  66. */
  67. successCallback(data) {
  68. var _this = this;
  69. console.log('连接成功,订阅话题!');
  70. _this.stompClient.subscribe('/topic/monitor/temperature/one', function(message) {
  71. if (message.body) {
  72. let data = message.body;
  73. console.log('接收温度数据:' + data);
  74. updateState(data);
  75. } else {
  76. console.log('无数据推送!');
  77. }
  78. });
  79. }
  80. /**
  81. * 关闭连接
  82. */
  83. disconnection() {
  84. console.log('连接已关闭!');
  85. this.stompClient.disconnect();
  86. }
  87. /**
  88. * 连接失败后的回调
  89. */
  90. errorCallback(error) {
  91. console.log('连接失败!');
  92. console.log(error);
  93. }
  94. }

  95. /**
  96. * 接收推送数据后更新状态
  97. */
  98. function updateState(data) {
  99. car.setAttribute("monitorData/温度", data);
  100. nowDatetime();
  101. if (($('.empty').length)) {
  102. $('.empty').remove();
  103. }
  104. if (!($('.tj-group').length)) {
  105. let tbody = `<tbody class="tj-group" id="tb-line"></tbody>`;
  106. $('.tj-table').prepend(tbody);
  107. }
  108. let tr =
  109. `<tr class="tj-group-content">
  110. <td class="tj-key">` + dateString + `</td>
  111. <td class="tj-value">` + data + `℃</td>
  112. </tr>`;
  113. $('.tj-group').prepend(tr);
  114. changeColor(car);
  115. }

  116. /**
  117. * 获取系统日期
  118. */
  119. function nowDatetime() {
  120. var date = new Date();
  121. var hours = (date.getHours()) > 9 ? (date.getHours()) : "0" + (date.getHours());
  122. var minutes = (date.getMinutes()) > 9 ? (date.getMinutes()) : "0" + (date.getMinutes());
  123. var seconds = (date.getSeconds()) > 9 ? (date.getSeconds()) : "0" + (date.getSeconds());
  124. dateString =
  125. hours + ":" +
  126. minutes + ":" +
  127. seconds;
  128. return dateString;
  129. }

  130. /**
  131. * 当车辆的温度值超过20时,更改小车颜色
  132. */
  133. function changeColor(obj) {
  134. var temper = obj.getAttribute("monitorData/温度");
  135. var value = temper;
  136. if (value > 30) {
  137. obj.style.color = 'rgb(255,0,0)';
  138. } else {
  139. obj.style.color = null;
  140. }
  141. }

  142. // 创建html界面
  143. function createHtml() {
  144. // 数据详情界面
  145. let dataDetails =
  146. `<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;">
  147. <div class="tj-close"></div>
  148. <div class="tj-title" style="cursor: move; user-select: none;">数据详情</div>
  149. <div class="tj-panel-body" style="padding-top: 0px;">
  150. <div class="tj-panel-container tj-scroll-bar">
  151. <table class="tj-table">
  152.   <div class="empty">暂无数据</div>
  153. </table>
  154. </div>
  155. </div>
  156. </div>`;
  157. $('#div2d').append(dataDetails);
  158. // 点击按钮关闭面板
  159. $('#dataDetails .tj-close').on('click', function() {
  160. $('#dataDetails').css('display', 'none');
  161. });
  162. }


MQTT是一个基于客户端-服务器的消息发布/订阅传输协议。MQTT协议是轻量、简单、开放和易于实现的,这些特点使它适用范围非常广泛。可以以极少的代码和有限的带宽,为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议,使其在物联网3D可视化等方面有较广泛的应用。

—————————————————




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?注册

×
您需要登录后才可以回帖 登录 | 注册

本版积分规则

107

主题

107

帖子

0

粉丝
快速回复 在线客服 返回列表 返回顶部