## 前言

[Angular](https://angular.io/) 是一個基於 TypeScript 構建的開發平臺。它包括一個基於元件的框架，用於構建可伸縮的 Web 應用；一組完美整合的庫，涵蓋路由管理、客戶端-伺服器通訊等各種功能；一套開發工具，可幫助使用者開發、構建、測試和更新程式碼。

[MQTT](https://www.emqx.com/zh/mqtt) 是一種基於釋出/訂閱模式的**輕量級物聯網訊息傳輸協議**。該協議提供了一對多的訊息分發和應用程式的解耦，傳輸消耗小，可最大限度減少網路流量，同時具有三種不同訊息服務質量等級，滿足不同投遞需求的優勢。

本文將介紹如何在 Angular 專案中使用 MQTT 協議，實現客戶端與 MQTT 伺服器的連線、訂閱、收發訊息、取消訂閱等功能。

## 專案初始化

### 新建專案

參考連結如下：[使用 Angular CLI 建立 Angular 專案](https://angular.cn/guide/setup-local#install-the-angular-cli)

示例：

```haxe
ng new my-app
```

### 安裝 MQTT 客戶端庫

本次使用的是庫為 [ngx-mqtt](https://sclausen.github.io/ngx-mqtt/)，這個庫不僅僅是 MQTT.js 的包裝器，用於 angular >= 2。它使用 observables 並負責訂閱處理和訊息路由， ngx-mqtt 非常適合具有許多元件和許多訂閱者的應用程式。

透過命令列安裝 ngx-mqtt，可以使用 npm 或 yarn 命令（二者選一）

```livecodeserver
 npm install ngx-mqtt --save
 yarn add ngx-mqtt
```

## MQTT 的使用

### 連線 MQTT 伺服器

本文將使用 EMQX 提供的[免費公共 MQTT 伺服器](https://www.emqx.com/zh/mqtt/public-mqtt5-broker)，該服務基於 [MQTT 雲伺服器 - EMQX Cloud](https://www.emqx.com/zh/cloud) 建立。EMQX 是一款大規模分散式物聯網 MQTT 訊息伺服器，可高效可靠連線海量物聯網裝置，實時處理分發訊息與事件流資料，助力構建關鍵業務的物聯網平臺與應用。

伺服器接入資訊如下：

- Broker: **broker.emqx.io**
- TCP Port: **1883**
- WebSocket Port: **8083**

連線關鍵程式碼：

```typescript
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 引數，即可訂閱成功。

```javascript
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 方法可以釋放訂閱持有的資源。

```javascript
doUnSubscribe() {
  this.curSubscription?.unsubscribe()
  this.subscribeSuccess = false
}
```

### 訊息釋出

unsafePublish釋出帶有可選選項的主題的訊息，如 QoS、Retain 等選項，如下所示。

```javascript
doPublish() {
  const { topic, qos, payload } = this.publish
  console.log(this.publish)
  this.client?.unsafePublish(topic, payload, { qos } as IPublishOptions)
}
```

### 斷開連線

disconnect 斷開與 MQTT 客戶端的連線，傳入引數 True 表示強制斷開與 MQTT 客戶端的連線。

```typescript
destroyConnection() {
  try {
    this.client?.disconnect(true)
    this.isConnection = false
    console.log('Successfully disconnected!')
  } catch (error: any) {
    console.log('Disconnect failed', error.toString())
  }
}
```

## 測試

我們使用 Angular 編寫了如下簡單的瀏覽器應用，該應用具備：建立連線、訂閱主題、收發訊息、取消訂閱、斷開連線等功能。
[![1](http://img.blog.itpub.net/blog/2022/10/13/dcd65e6e4da5de97.png?x-oss-process=style/bb "1")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-angular "1")

使用 [MQTT 5.0 客戶端工具 - MQTT X](https://mqttx.app/zh) 作為另一個客戶端進行訊息收發測試。
[![2](http://img.blog.itpub.net/blog/2022/10/13/1f9dcb6693dcc57c.png?x-oss-process=style/bb "2")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-angular "2")

在 MQTT X 傳送第二條訊息之前，在瀏覽器端進行取消訂閱操作，瀏覽器端將不會收到 MQTT X 傳送的後續訊息。

## 總結

綜上所述，我們實現了在 Angular 專案中建立 MQTT 連線，模擬了客戶端與 MQTT 伺服器進行訂閱、收發訊息、取消訂閱以及斷開連線的場景。

Angular 作為三大主流的前端框架之一，既能夠在瀏覽器端使用，也能夠在移動端使用，結合 MQTT 協議及 [MQTT 物聯網雲服務](https://www.emqx.com/zh/cloud) 可以開發出很多有趣的應用，比如客服聊天系統或實時監控物聯網裝置資訊的管理系統等。

>版權宣告： 本文為 EMQ 原創，轉載請註明出處。
>
>原文連結：[https://www.emqx.com/zh/blog/how-to-use-mqtt-in-angular](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-angular)

如何在Angular專案中使用MQTT

相關文章