如何在Angular我的项目中应用 MQTT
前言
Angular 是一个基于 TypeScript 构建的开发平台。它包含一个基于组件的框架，用于构建可伸缩的 Web 利用；一组完满集成的库，涵盖路由、表单治理、客户端-服务器通信等各种性能；一套开发工具，可帮忙用户开发、构建、测试和更新代码。
MQTT 是一种基于公布/订阅模式的轻量级物联网音讯传输协定。该协定提供了一对多的音讯散发和应用程序的解耦，传输耗费小，可最大限度缩小网络流量，同时具备三种不同音讯服务质量等级，满足不同投递需要的劣势。
本文将介绍如何在 Angular 我的项目中应用 MQTT 协定，实现客户端与 MQTT 服务器的连贯、订阅、收发音讯、勾销订阅等性能。
我的项目初始化
新建我的项目
参考链接如下：应用 Angular CLI 创立 Angular 我的项目
示例：
ng new my-app装置 MQTT 客户端库
本次应用的是库为 ngx-mqtt，这个库不仅仅是 MQTT.js 的包装器，用于 angular >= 2。它应用 observables 并负责订阅解决和音讯路由， ngx-mqtt 非常适合具备许多组件和许多订阅者的应用程序。
通过命令行装置 ngx-mqtt，能够应用 npm 或 yarn 命令（二者选一）
npm install ngx-mqtt --save yarn add ngx-mqttMQTT 的应用
连贯 MQTT 服务器
本文将应用 EMQX 提供的收费公共 MQTT 服务器，该服务基于 MQTT 云服务器 - EMQX Cloud 创立。EMQX 是一款大规模分布式物联网 MQTT 音讯服务器，可高效牢靠连贯海量物联网设施，实时处理散发音讯与事件流数据，助力构建要害业务的物联网平台与利用。
服务器接入信息如下：
- Broker: broker.emqx.io
- TCP Port: 1883
- WebSocket Port: 8083
连贯要害代码：
import { IMqttMessage, IMqttServiceOptions, MqttService, IPublishOptions,} from 'ngx-mqtt';import { IClientSubscribeOptions } from 'mqtt-browser';import { Subscription } from 'rxjs';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'],})export class AppComponent { constructor(private _mqttService: MqttService) { this.client = this._mqttService; } private curSubscription: Subscription | undefined; connection = { hostname: 'broker.emqx.io', port: 8083, path: '/mqtt', clean: true, // 保留会话 connectTimeout: 4000, // 超时工夫 reconnectPeriod: 4000, // 重连工夫距离 // 认证信息 clientId: 'mqttx_597046f4', username: 'emqx_test', password: 'emqx_test', protocol: 'ws', } subscription = { topic: 'topic/mqttx', qos: 0, }; publish = { topic: 'topic/browser', qos: 0, payload: '{ "msg": "Hello, I am browser." }', }; receiveNews = ''; qosList = [ { label: 0, value: 0 }, { label: 1, value: 1 }, { label: 2, value: 2 }, ]; client: MqttService | undefined; isConnection = false; subscribeSuccess = false; // 创立连贯 createConnection() { // 连贯字符串, 通过协定指定应用的连贯形式 // ws 未加密 WebSocket 连贯 // wss 加密 WebSocket 连贯 // mqtt 未加密 TCP 连贯 // mqtts 加密 TCP 连贯 try { this.client?.connect(this.connection as IMqttServiceOptions) } catch (error) { console.log('mqtt.connect error', error); } this.client?.onConnect.subscribe(() => { this.isConnection = true console.log('Connection succeeded!'); }); this.client?.onError.subscribe((error: any) => { this.isConnection = false console.log('Connection failed', error); }); this.client?.onMessage.subscribe((packet: any) => { this.receiveNews = this.receiveNews.concat(packet.payload.toString()) console.log(`Received message ${packet.payload.toString()} from topic ${packet.topic}`) }) }}订阅主题
连贯 MQTT 服务器胜利之后，调用以后 MQTT 实例的 subscribe 办法，传入 Topic 和 QoS 参数，即可订阅胜利。
doSubscribe() { const { topic, qos } = this.subscription this.curSubscription = this.client?.observe(topic, { qos } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => { this.subscribeSuccess = true console.log('Subscribe to topics res', message.payload.toString()) })}勾销订阅
unsubscribe 办法能够开释订阅持有的资源。
doUnSubscribe() { this.curSubscription?.unsubscribe() this.subscribeSuccess = false}音讯公布
unsafePublish公布带有可选选项的主题的音讯，如 QoS、Retain 等选项，如下所示。
doPublish() { const { topic, qos, payload } = this.publish console.log(this.publish) this.client?.unsafePublish(topic, payload, { qos } as IPublishOptions)}断开连接
disconnect 断开与 MQTT 客户端的连贯，传入参数 True 示意强制断开与 MQTT 客户端的连贯。
destroyConnection() { try { this.client?.disconnect(true) this.isConnection = false console.log('Successfully disconnected!') } catch (error: any) { console.log('Disconnect failed', error.toString()) }}测试
咱们应用 Angular 编写了如下简略的浏览器利用，该利用具备：创立连贯、订阅主题、收发音讯、勾销订阅、断开连接等性能。
应用 MQTT 5.0 客户端工具 - MQTT X 作为另一个客户端进行音讯收发测试。
在 MQTT X 发送第二条音讯之前，在浏览器端进行勾销订阅操作，浏览器端将不会收到 MQTT X 发送的后续音讯。
总结
综上所述，咱们实现了在 Angular 我的项目中创立 MQTT 连贯，模仿了客户端与 MQTT 服务器进行订阅、收发音讯、勾销订阅以及断开连接的场景。
Angular 作为三大支流的前端框架之一，既可能在浏览器端应用，也可能在挪动端应用，联合 MQTT 协定及 MQTT 物联网云服务 能够开发出很多乏味的利用，比方客服聊天零碎或实时监控物联网设施信息的管理系统等。
版权申明： 本文为 EMQ 原创，转载请注明出处。
原文链接：https://www.emqx.com/zh/blog/how-to-use-mqtt-in-angular