angular项目实现mqtt的订阅与发布 ngx-mqtt
<h1>angular项目实现mqtt的订阅与发布</h1><p>如果要写一个exe可执行文件，可以使用angular编写，然后使用electron打包成一个exe文件。</p>
<p>https://github.com/maximegris/angular-electron</p>
<p><img src="https://img2018.cnblogs.com/blog/1334178/201909/1334178-20190916191250816-1506315356.png" alt="" width="734" height="537"></p>
<p> </p>
<p> </p>
<p> 我们可以使用现成的angular链接mqtt的插件实现订阅和发布——<strong>ngx-mqtt</strong></p>
<p>https://github.com/sclausen/ngx-mqtt</p>
<h2>安装 ngx-mqtt</h2>
<p>首先在angular项目中安装 ngx-mqtt</p>
<div class="cnblogs_code">
<pre>npm install ngx-mqtt --save</pre>
</div>
<h2>配置mqtt服务器</h2>
<p>然后需要在app.module.ts或者使用mqtt的组件中配置mqtt服务器信息。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">import {
IMqttMessage,
MqttModule,
IMqttServiceOptions
} from </span>'ngx-mqtt'<span style="color: rgba(0, 0, 0, 1)">;
export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions </span>=<span style="color: rgba(0, 0, 0, 1)"> {
hostname: </span>'192.168.1.123',<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> mqtt 服务器ip</span>
port: 8083,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> mqtt 服务器端口</span>
path: '/mqtt'<span style="color: rgba(0, 0, 0, 1)">
};
@NgModule({
declarations: ,
imports:
})</span></pre>
</div>
<p> 在需要的组件中使用ngx-mqtt订阅和发布消息。</p>
<p>首先引入</p>
<div class="cnblogs_code">
<pre>import {Subscription} from 'rxjs'<span style="color: rgba(0, 0, 0, 1)">;
import {IMqttMessage, MqttService} from </span>'ngx-mqtt';</pre>
</div>
<p> 构造函数中注入依赖</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"> constructor(private _mqttService: MqttService) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ...</span>
}</pre>
</div>
<h2>订阅mqtt消息</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.subscription = <span style="color: rgba(0, 0, 255, 1)">this</span>._mqttService.observe('my/topic').subscribe((message: IMqttMessage) =><span style="color: rgba(0, 0, 0, 1)"> {
console.log(</span>message.payload.toString()<span>)</span><span>; <br>});</span></pre>
</div>
<p> 其中 this._mqttService.observe(“ 这里面是要订阅的主题——topic ”)，回调函数 message 为订阅后，发布者发布相关主题数据时收到的数据。</p>
<h2> 发布消息</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>._mqttService.unsafePublish(topicText, messageText, {qos: 1, retain: <span style="color: rgba(0, 0, 255, 1)">true</span>});</pre>
</div>
<p> <strong>topicText</strong>：是发布的主题（topic） </p>
<p> <strong>messageText</strong>：是发布的内容（payload） </p>
<p><em id="__mceDel"> </em>{qos: 1, retain: true}</p>
<p> <strong>retain参数</strong>：</p>
<p> 当我们使用MQTT客户端发布消息（<code>PUBLISH</code>）时，如果将RETAIN标志位设置为<code>true</code>，那么MQTT服务器会将最近收到的一条RETAIN标志位为<code>true</code>的消息保存在服务器端（内存或文件），例如开启系统，查看设备的开关状态，我们可以获取上一次设备的状态直接设置开关的开关状态，使开关和设备的真实状态对应起来。</p>
<p> <strong>qos</strong> 参数：</p>
<ol>
<li>QOS0不可靠，因此适合大量数据的传输，因为很大量的数据，完全避免不丢包是很难的，网络环境、现实环境什么的。想要保证的话，大量的数据，一般是要做断点续传。而且小编的经验，像类似 “轮询” 这样不断地得到一些检测数据，这种数据，中间丢几包是基本不会影响业务的。</li>
<li>QOS1可靠，一般的场景够用，因为总能接到数据嘛。缺点就是 “可能造成” 1条数据，接了多次。</li>
<li>QOS2严格可靠，保证相同的消息只接收一条，（请稍微构思一下内部的实现…虽然不复杂，但要一定的流程来保证的，对吧），在每一次通讯都这样执行的话，势必会造成性能的考验，因此小编对QOS2的意见是 “如非必要，慎用，特别是个人/小团队，没有那么多资金租用特别好的服务器”。</li>
</ol>
<p> 然后根据自己的具体逻辑，就可以实现angular mqtt消息的订阅和转发了！</p>
<h2>连接mqtt服务器</h2>
<p>配置好 mqtt 服务器后，运行会自动连接设置好的mqtt服务器，直接进行订阅或者发布消息就可以。</p>
<div class="cnblogs_code">
<pre>export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions =<span style="color: rgba(0, 0, 0, 1)"> {
hostname: </span>'192.168.1.123',<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> mqtt 服务器ip</span>
port: 8083,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> mqtt 服务器端口</span>
path: '/mqtt'<span style="color: rgba(0, 0, 0, 1)">
};</span></pre>
</div>
<p>但是！BUT！</p>
<p>如果运行过程中需要切换mqtt服务器，因此需要重新配置mqtt服务器，然后重新连接。</p>
<p>首先在界面引进配置mqtt的参数</p>
<div class="cnblogs_code">
<pre>import {MQTT_SERVICE_OPTIONS} from './home.module';</pre>
</div>
<p>然后重新配置一下连接mqtt服务器的参数</p>
<div class="cnblogs_code">
<pre>MQTT_SERVICE_OPTIONS.hostname = "这个地方填修改的mqtt服务器ip"<span style="color: rgba(0, 0, 0, 1)">;
MQTT_SERVICE_OPTIONS.port </span>= Number("这个地方填写修改的mqtt服务器的端口"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 如果需要其他的配置自己添加修改</span></pre>
</div>
<p>配置信息修改完成，重新连接</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>._mqttService.connect(MQTT_SERVICE_OPTIONS);</pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！<br>
【重要说明】本博文为个人学习记录，观点仅为个人见解，不代表技术领域的最终结论。撰写目的主要在于自我总结与经验分享，欢迎批评指正，本人将虚心改进。内容仅供参考，非专业建议，请理性判断。<br>
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014<br>
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/<br>
【Gitee地址】叫我+V ：https://gitee.com/wjw1014<br><br><br>
来源：https://www.cnblogs.com/wjw1014/p/11529344.html
頁:
[1]