angular项目实现mqtt的订阅与发布 ngx-mqtt
angular项目实现mqtt的订阅与发布
如果要写一个exe可执行文件,可以使用angular编写,然后使用electron打包成一个exe文件。
https://github.com/maximegris/angular-electron
我们可以使用现成的angular链接mqtt的插件实现订阅和发布——ngx-mqtt
https://github.com/sclausen/ngx-mqtt
安装 ngx-mqtt
首先在angular项目中安装 ngx-mqtt
npm install ngx-mqtt --save
配置mqtt服务器
然后需要在app.module.ts或者使用mqtt的组件中配置mqtt服务器信息。
import {
IMqttMessage,
MqttModule,
IMqttServiceOptions
} from 'ngx-mqtt'; export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
hostname: '192.168.1.123', // mqtt 服务器ip
port: 8083, // mqtt 服务器端口
path: '/mqtt'
}; @NgModule({
declarations: [HomeComponent],
imports: [CommonModule, FormsModule, SharedModule, HomeRoutingModule, MqttModule.forRoot(MQTT_SERVICE_OPTIONS)]
})
在需要的组件中使用ngx-mqtt订阅和发布消息。
首先引入
import {Subscription} from 'rxjs';
import {IMqttMessage, MqttService} from 'ngx-mqtt';
构造函数中注入依赖
constructor(private _mqttService: MqttService) {
// ...
}
订阅mqtt消息
this.subscription = this._mqttService.observe('my/topic').subscribe((message: IMqttMessage) => {
console.log(message.payload.toString());
});
其中 this._mqttService.observe(“ 这里面是要订阅的主题——topic ”),回调函数 message 为订阅后,发布者发布相关主题数据时收到的数据。
发布消息
this._mqttService.unsafePublish(topicText, messageText, {qos: 1, retain: true});
topicText:是发布的主题(topic)
messageText:是发布的内容(payload)
{qos: 1, retain: true}
retain参数:
当我们使用MQTT客户端发布消息(PUBLISH
)时,如果将RETAIN标志位设置为true
,那么MQTT服务器会将最近收到的一条RETAIN标志位为true
的消息保存在服务器端(内存或文件),例如开启系统,查看设备的开关状态,我们可以获取上一次设备的状态直接设置开关的开关状态,使开关和设备的真实状态对应起来。
qos 参数:
- QOS0不可靠,因此适合大量数据的传输,因为很大量的数据,完全避免不丢包是很难的,网络环境、现实环境什么的。想要保证的话,大量的数据,一般是要做断点续传。而且小编的经验,像类似 “轮询” 这样不断地得到一些检测数据,这种数据,中间丢几包是基本不会影响业务的。
- QOS1可靠,一般的场景够用,因为总能接到数据嘛。缺点就是 “可能造成” 1条数据,接了多次。
- QOS2严格可靠,保证相同的消息只接收一条,(请稍微构思一下内部的实现…虽然不复杂,但要一定的流程来保证的,对吧),在每一次通讯都这样执行的话,势必会造成性能的考验,因此小编对QOS2的意见是 “如非必要,慎用,特别是个人/小团队,没有那么多资金租用特别好的服务器”。
然后根据自己的具体逻辑,就可以实现angular mqtt消息的订阅和转发了!
连接mqtt服务器
配置好 mqtt 服务器后,运行会自动连接设置好的mqtt服务器,直接进行订阅或者发布消息就可以。
export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
hostname: '192.168.1.123', // mqtt 服务器ip
port: 8083, // mqtt 服务器端口
path: '/mqtt'
};
但是!BUT!
如果运行过程中需要切换mqtt服务器,因此需要重新配置mqtt服务器,然后重新连接。
首先在界面引进配置mqtt的参数
import {MQTT_SERVICE_OPTIONS} from './home.module';
然后重新配置一下连接mqtt服务器的参数
MQTT_SERVICE_OPTIONS.hostname = "这个地方填修改的mqtt服务器ip";
MQTT_SERVICE_OPTIONS.port = Number("这个地方填写修改的mqtt服务器的端口");
// 如果需要其他的配置自己添加修改
配置信息修改完成,重新连接
this._mqttService.connect(MQTT_SERVICE_OPTIONS);
angular项目实现mqtt的订阅与发布 ngx-mqtt的更多相关文章
- Angular 个人深究(二)【发布与订阅】
Angular 个人深究(二)[发布与订阅] 1. 再入正题之前,首先说明下[ 发布与订阅模式](也叫观察者模式) 1) 定义:定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个 ...
- .net core service && angular项目 iis发布
项目结构 .net core 后端服务站点 angular 前端页面站点 项目模板来自于abp或者52abp .net core 后端服务站点发布到IIS 发布报错 .Net Core使用IIS部署出 ...
- 我在生产项目里是如何使用Redis发布订阅的?(一)使用场景
转载请注明出处! 导语 Redis是我们很常用的一款nosql数据库产品,我们通常会用Redis来配合关系型数据库一起使用,弥补关系型数据库的不足. 其中,Redis的发布订阅功能也是它的一大亮点.虽 ...
- spring boot高性能实现二维码扫码登录(下)——订阅与发布机制版
前言 基于之前两篇(<spring boot高性能实现二维码扫码登录(上)——单服务器版>和<spring boot高性能实现二维码扫码登录(中)——Redis版>)的基础, ...
- VB.net Wcf事件广播(订阅、发布)
这篇东西原写在csdn.net上,最近新开通了博客想把零散在各处的都转移到一处. 一.源起 学WCF有一段时间了,可是无论是微软的WebCast还是其他网上的教程,亦或我购买的几本书中,都没有怎么 ...
- 【C#】Event事件的订阅和发布
学习笔记:学习了委托和事件的用法.事件是一种特殊的委托,记录下事件从订阅到发布的流程. 学习资料源于视频:http://www.maiziedu.com/course/510-6891/ 新建一个De ...
- MQTT协议笔记之发布流程
MQTT协议笔记之发布流程 前言 这次要讲到客户端/服务器的发布消息行为,与PUBLISH相关的消息类型,会在这里看到. PUBLISH 客户端发布消息经由服务器分发到所有对应的订阅者那里.一个订阅者 ...
- Python实现MQTT接收订阅数据
一.背景 目前MQTT的标准组织官网:http://www.mqtt.org,里面列出了很多支持的软件相关资源. 一个轻量级的MQTT服务器是:http://www.mosquitto.org,可以运 ...
- Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
随机推荐
- Selenium实战(三)——滑动解锁+窗口截图
一.简单滑块的实例 当单机滑块时,改变的只是CSS样式,HTML代码如下: <div class="slide-to-unlock-progress" style=" ...
- Codeforces Round #622 (Div. 2).C2 - Skyscrapers (hard version)
第二次写题解,请多多指教! http://codeforces.com/contest/1313/problem/C2 题目链接 不同于简单版本的暴力法,这个数据范围扩充到了五十万.所以考虑用单调栈的 ...
- 2019-08-23 纪中NOIP模拟A组
T1 [JZOJ2908] 矩阵乘法 题目描述 给你一个 N*N 的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第 K 小数. 数据范围 对于 $20\%$ 的数据,$N \leq 100$,$Q ...
- 如何通过注解方式给项目添加Swagger功能
在Java后端,每次开发一个新的接口后需要自测,此时可以借助Swagger功能很好地完成自测,下面将通过注解的方式来添加Swagger. (1)代码部分 package com.bien.edge; ...
- display: inline-block 布局
三个元素display: inline-block; 布局 ,其中一个元素中存在其他元素也用了display: inline-block; 无法垂直居中,将这个元素设置为display: inline ...
- web服务器、Web中间件和Web容器的区别
web服务器>web中间件>web容器 Tomcat(servlet容器) 是 Tomcat中间件 也是 Tomcat服务器 看了谢公子的csdn文章,让我彻底分清了这三者的区别. ...
- 计算器程序编写_python
一.计算一串字符串的最终值,相当于eval函数功能: #!/usr/bin/env python # _*_ coding:utf-8 _*_ #Author:chenxz import re def ...
- Centos7安装gitlab-ce
1.官方推荐方式安装 参考https://www.gitlab.com.cn/installation/#centos-7?version=ce sudo yum install -y curl po ...
- Nginx防止DDOS流量攻击
DDOS流量攻击:频繁的发送请求,造成宽带占用,其他客户端无法访问 Nginx解决DDOS流量攻击,利用limit_req_zone限制请求次数 limit_con ...
- PP: Multi-Horizon Time Series Forecasting with Temporal Attention Learning
Problem: multi-horizon probabilistic forecasting tasks; Propose an end-to-end framework for multi-ho ...