经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » 浏览器 » 查看文章
物联网浏览器(IoTBrowser)-MQTT协议集成和测试
来源：cnblogs　　作者：木子清　　时间：2024/2/5 10:19:31　　对本文有异议

一、简介

MQTT(消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在 TCP/IP协议族上，是为硬件性能低下的远程设备以及网络状况糟糕的情况下而设计的发布/订阅型消息协议，为此，它需要一个消息中间件 。

MQTT是一个基于客户端-服务器的消息发布/订阅传输协议。MQTT协议是轻量、简单、开放和易于实现的，这些特点使它适用范围非常广泛。在很多情况下，包括受限的环境中，如：机器与机器（M2M）通信和物联网（IoT）。其在，通过卫星链路通信传感器、偶尔拨号的医疗设备、智能家居、及一些小型化设备中已广泛使用。

MQTT协议在物联网中应用广泛，下面使用插件式集成到IoTBrowser平台，提供JS API即可发布broker和客户端实现发布、订阅等功能。

二、 开发插件

  1. 添加引用
    1. 添加MQTTNet，在NuGet搜索MQTTNet
    2. 添加Core，路径：\IoTBrowser\src\app_x64\Core.dll
    3. 添加Infrastructure，路径：\IoTBrowser\src\app_x64\Infrastructure.dll
    4. 添加Newtonsoft，路径：\IoTBrowser\src\app_x64\Newtonsoft.Json.dll
  2. 开发MqttHostCom和MqttClientCom插件
    1. MqttHostCom 服务端 broker
  1. using DDS.IoT.Com;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.IO.Ports;
  5. using System.Linq;
  6. using System.Runtime.InteropServices;
  7. using System.Text;
  8. using System.Threading;
  9. using System.Threading.Tasks;
  11. namespace DDS.IoT.Mqtt
  12. {
  13.     public class MqttHostCom : ComBase
  14.     {
  15.         public override string Type => "mqttHostCom";
  17.         public override string Name => "Mqtt主机";
  18.         private MqttHostService hostService;
  20.         public override bool Init(int port, int baudRate = 9600, string extendData = null)
  21.         {
  22.             this.Port = port;
  23.             hostService = new MqttHostService();
  24.             hostService.PushId = this.Id;
  25.             hostService.StartAsync(extendData, OnPushData);
  26.             Console.WriteLine("初始化MqttHostCom驱动程序成功！");
  27.             return true;
  28.         }
  29.         public override event PushData OnPushData;
  31.         public override bool Open()
  32.         {
  33.             var b = false;
  34.             try
  35.             {
  36.                 b = true;
  37.                 IsOpen = true;
  38.             }
  39.             catch (Exception ex)
  40.             {
  42.                 string msg = string.Format("MqttHostCom串口打开失败：{0} ", ex.Message);
  43.                 Console.WriteLine(msg);
  44.             }
  45.             return b;
  46.         }
  48.         public override bool Close()
  49.         {
  50.             hostService.Dispose();
  51.             hostService = null;
  52.             IsOpen = false;
  53.             OnPushData = null;
  54.             return true;
  55.         }
  57.         public override string Command(string name, string data)
  58.         {
  59.             var outData = string.Empty;
  61.             return outData;
  62.         }
  63.     }
  64. }

　　　　

　　2.MqttClientCom 客户端

实现发布和订阅接口

  1. using DDS.IoT.Com;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.IO.Ports;
  5. using System.Linq;
  6. using System.Runtime.InteropServices;
  7. using System.Text;
  8. using System.Threading;
  9. using System.Threading.Tasks;
  11. namespace DDS.IoT.Mqtt
  12. {
  13.     public class MqttClientCom : ComBase
  14.     {
  15.         public override string Type => "mqttClientCom";
  17.         public override string Name => "Mqtt客户端";
  18.         private MqttClientService mqttClientService;
  20.         public override bool Init(int port, int baudRate = 9600, string extendData = null)
  21.         {
  22.             mqttClientService = new MqttClientService();
  23.             mqttClientService.PushId = this.Id;
  24.             this.Port = port;
  25.             mqttClientService.MqttClientStart(extendData,this.OnPushData);
  26.             Console.WriteLine("初始化MqttClientCom驱动程序成功！");
  27.             return true;
  28.         }
  29.         public override event PushData OnPushData;
  31.         public override bool Open()
  32.         {
  33.             var b = false;
  34.             try
  35.             {
  36.                 mqttClientService.Open();
  37.                 b = true;
  38.                 IsOpen = true;
  39.             }
  40.             catch (Exception ex)
  41.             {
  43.                 string msg = string.Format("MqttClientCom串口打开失败：{0} ", ex.Message);
  44.                 Console.WriteLine(msg);
  45.             }
  46.             return b;
  47.         }
  49.         public override bool Close()
  50.         {
  51.             mqttClientService.Close();
  52.             mqttClientService = null;
  53.             IsOpen = false;
  54.             OnPushData = null;
  55.             return true;
  56.         }
  58.         public override string Command(string name, string data)
  59.         {
  60.             var outData = string.Empty;
  62.             var dataObj = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(data);
  63.             switch (name)
  64.             {
  65.                 case "Publish":
  66.                     string topic = dataObj.topic;
  67.                     string payload = dataObj.data;
  68.                     int? level = dataObj.level;
  69.                     bool? retain = dataObj.retain;
  70.                     if (!level.HasValue)
  71.                     {
  72.                         level = 1;
  73.                     }
  74.                     if (!retain.HasValue)
  75.                     {
  76.                         retain = false;
  77.                     }
  78.                     outData =mqttClientService.Publish(topic, payload, level.Value, retain.Value).ToString();
  79.                     break;
  80.                 case "Subscribe":
  81.                     topic = dataObj.topic;
  82.                     level = dataObj.level;
  83.                     if (!level.HasValue)
  84.                     {
  85.                         level = 0;
  86.                     }
  87.                     outData = mqttClientService.Subscribe(topic, level.Value).ToString();
  88.                     break;
  89.             }
  90.             return outData;
  91.         }
  92.     }
  93. }

3.前端测试

  1. <!DOCTYPE HTML PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  2. <html>
  3. <head lang="en">
  4.     <title>Mqtt</title>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  8.     <meta name="format-detection" content="telephone=no">
  9.     <!-- Set render engine for 360 browser -->
  10.     <meta name="renderer" content="webkit">
  11.     <!-- No Baidu Siteapp-->
  12.     <!--<meta http-equiv="Cache-Control" content="no-siteapp" />-->
  13.     <META HTTP-EQUIV="pragma" CONTENT="no-cache">
  14.     <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
  15.     <META HTTP-EQUIV="expires" CONTENT="0">
  16.     <link rel="alternate icon" type="image/png" href="favicon.png">
  17.     <link rel="stylesheet" href="/scripts/amazeui/amazeui.min.css" />
  18.     <link rel="stylesheet" href="../css/main.css" />
  19.     <script src="/scripts/jquery-3.3.1.min.js"></script>
  20.     <script src="/scripts/amazeui/amazeui.min.js"></script>
  21.  
  22.     <script src="/scripts/jquery.signalR-2.4.1.min.js"></script>
  23.     <style>
  24.         .list {
  25.             width: 1000px !important;
  26.         }
  28.         .am-form {
  29.             width: 100%;
  30.             background: #fff;
  31.         }
  33.         .refresh-port {
  34.             width: 80px !important;
  35.             height: 30px !important;
  36.         }
  38.         #msg, #msgWrite {
  39.             clear: both;
  40.         }
  42.         .am-u-sm-4 {
  43.             padding: 3px;
  44.         }
  45.     </style>
  46.     <script type="text/javascript">
  47.         var hostid;// 主机id
  48.         var clientid;// 客户端id
  49.  
  50.         function startHost() {
  51.             var args = $('#txtHostArgs').val();
  52.             dds.iot.com.open({
  53.                 type: 'mqttHostCom',//mqtt主机
  54.                 port: 1,
  55.                 baudRate: 1,
  56.                 extendData: args,
  57.                 //extendData: JSON.stringify({ server: "*", port: 1883 }),
  58.                 onReceive: function (res) {
  59.                     addMsg('host:' + JSON.stringify(res.data))
  60.                     console.log('host', res.data)
  61.                 },
  62.                 onOpen: function (ar) {
  63.                     if (ar.Success) {
  64.                         hostid = ar.Data;
  65.                         addMsg('连接成功！')
  66.                     } else {
  67.                         alert(ar.Message)
  68.                     }
  69.                 }
  70.             })
  71.         }
  72.         function closeHost() {
  73.             dds.iot.com.close(hostid)
  74.         }
  75.         function startClient() {
  76.             var args = $('#txtClientArgs').val();
  77.             dds.iot.com.open({
  78.                 type: 'mqttClientCom',//mqtt客户端
  79.                 port: 1,
  80.                 baudRate: 1,
  81.                 extendData: args,
  82.                 //extendData: JSON.stringify({ server: "localhost", port: 1883, clientid: "1", username: "", password:""}),
  83.                 onReceive: function (res) {
  84.                     addMsg('client:' + JSON.stringify(res.data))
  85.                     console.log('client',res.data)
  86.                 },
  87.                 onOpen: function (ar) {
  88.                     if (ar.Success) {
  89.                         clientid = ar.Data;
  90.                         addMsg('连接成功！')
  91.                     } else {
  92.                         alert(ar.Message)
  93.                     }
  94.                 }
  95.             })
  96.         }
  97.         function subscribe() {
  98.             var topic = $('#txtTopic').val();
  99.             dds.iot.com.exeCommand({ id: clientid, name: "Subscribe", data: { topic: topic, level: 0 } }, function (ar) {
  100.                 if (ar.Success) {
  101.                     addMsg('订阅成功！')
  102.                 } else {
  103.                     addMsg('操作失败：' + ar.Message)
  104.                 }
  105.             })
  106.         }
  107.         function publish() {
  108.             var topic = $('#txtTopic').val();
  109.             var contents = $('#txtContents').val();
  110.             dds.iot.com.exeCommand({ id: clientid, name: "Publish", data: { topic: topic, data: contents } }, function (ar) {
  111.                 if (ar.Success) {
  112.                     addMsg('发布成功！')
  113.                 } else {
  114.                     addMsg('操作失败：' + ar.Message)
  115.                 }
  116.             })
  117.         }
  118.         function closeClient() {
  119.             dds.iot.com.close(clientid)
  120.         }
  121.         var $msg;
  122.         function addMsg(msg) {
  123.             $msg.val($msg.val()+"\n"+msg);
  124.         }
  125.         function clearLog() {
  126.             $msg.val('');
  127.         }
  128.         // 窗口初始化事件（操作窗口大小、标题）
  129.         $(document).bind('dds.window.init', function (e, win) {
  130.             $msg = $("#msg");
  131.         })
  132.     </script>
  133.  
  134. </head>
  135.  
  136. <body>
  137.     <div class="fun_bd" style="padding:10px;">
  138.         <form class="am-form">
  139.             <h3>数据读取</h3>
  140.             <fieldset>
  141.                 <div class="am-form-group">
  142.                     <label for="doc-ipt-email-1" class="am-u-sm-4">主机参数</label>
  143.                     <div class="am-u-sm-6">
  144.                         <input id="txtHostArgs" type="text" value='{ server: "*", port: 1883 }' />
  145.                     </div>
  146.                     <button onclick="startHost()" class="am-btn-primary" type="button">启动主机</button>
  147.                     <button onclick="closeHost()" class="am-btn-danger" type="button">关闭主机</button>
  148.                 </div>
  149.                 <div class="am-form-group">
  150.                     <label for="doc-ipt-email-1" class="am-u-sm-4">客户端参数</label>
  151.                     <div class="am-u-sm-6">
  152.                         <input id="txtClientArgs" type="text" value='{ server: "localhost", port: 1883, clientid: "1", username: "", password:""}' />
  153.                     </div>
  154.                     <button onclick="startClient()" class="am-btn-primary" type="button">启动客户端</button>
  155.                     <button onclick="closeClient()" class="am-btn-danger" type="button">关闭客户端</button>
  156.                 </div>
  157.                 <div class="am-form-group">
  158.                     <label for="doc-ipt-email-1" class="am-u-sm-4">主题</label>
  159.                     <div class="am-u-sm-6">
  160.                         <input id="txtTopic" type="text" value="/dds/iot/mqtt/test" />
  161.                     </div>
  162.                     <button onclick="subscribe()" class="am-btn-primary" type="button">订阅主题</button>
  163.                 </div>
  164.                 <div class="am-form-group">
  165.                     <label for="doc-ipt-email-1" class="am-u-sm-4">主题内容</label>
  166.                     <div class="am-u-sm-6">
  167.                         <input id="txtContents" type="text" value="测试测试" />
  168.                     </div>
  169.                     <button onclick="publish()" class="am-btn-primary" type="button">发布主题</button>
  170.                 </div>
  171.  
  172.                 <!--<div id="msg"></div>-->
  173.                 <textarea id="msg" rows="18"></textarea>
  174.                 <div class="am-form-group">
  175.                     <button onclick="clearLog()" class="am-btn-default" type="button">清除日志</button>
  176.                 </div>
  177.             </fieldset>
  178.         </form>
  179.     </div>
  180.  
  181. </body>
  182.  
  183. </html>

 

代码地址：https://gitee.com/yizhuqing/IoTBrowser

基于Chromium内核使用H5快速开发工控系统界面，使用JS API前端人员既可以完成界面展示与硬件控制。系统自带串口、RFID、电子秤等硬件协议支持，并且支持二次定制开发。可以用来开发人机界面(HMI)或数据采集与监督控制系统(SCADA) 。 使用H5或Vue可以本地打包离线应用，也可以在线加载Web网页来控制设备硬件。

 
 

原文链接：https://www.cnblogs.com/yizhuqing/p/18004476

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

浏览器热门文章

  • 浏览器安装Tampermonkey(俗称油猴子插件)，实现免费观看Vip视频、免费下载付费资源等…… - 进阶-之路
  • vue多次打包后出现浏览器缓存的问题及解决
  • 详解window.open被浏览器拦截的解决方案
  • nodejs读取图片返回给浏览器显示
  • 360浏览器兼容模式下IE内核版本
  • 浏览器报：net::ERR_EMPTY_RESPONSE解决方案
  • java request.getHeader("user-agent")获取浏览器信息的方法
  • selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
  • 《最新出炉》系列入门篇-Python+Playwright自动化测试-15-playwright处理浏览器多窗口切换 - 北京-宏哥
  • Selenium Webdriver 中的 executeScript 使用方法

    • 浏览器推荐文章

  • 优化 GitHub 体验的浏览器插件「GitHub 热点速览」
  • 安装量终于破千了！聊聊浏览器扩展开发的相关问题与解决方案
  • 将传统应用带入浏览器的开源先锋「GitHub 热点速览」
  • GitHub 创始人资助的开源浏览器「GitHub 热点速览」
  • 物联网浏览器(IoTBrowser)-MQTT协议集成和测试
  • 定制你的清爽Mac版Edge浏览器
  • 物联网浏览器(IoTBrowser)-Modbus协议集成和测试
  • 物联网浏览器(IoTBrowser)-顶尖OS2电子秤协议实现
  • 踩坑ffmpeg录制的mp4无法在浏览器上播放
  • 【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号