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服务器
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些前端面试题以及学习路线给大家
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-zTmR0uoD-1718764955167)]