共计 3560 个字符，预计需要花费 9 分钟才能阅读完成。
如何在 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
