关于iot:如何在Angular项目中使用MQTT

如何在 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-mqtt

MQTT 的应用

连贯 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