React Native 是 Facebook 推出並開源的跨平臺移動應用開發框架，是 React 在原生移動應用平臺的衍生產物，支援 iOS 和安卓兩大平臺。React Native 使用 Javascript 語言，類似於 HTML 的 JSX，以及 CSS 來開發移動應用，因此熟悉 Web 前端開發的技術人員只需很少的學習就可以進入移動應用開發領域，同時 React Native 也提供了接近原生應用的效能和體驗。

[MQTT](https://www.emqx.com/zh/mqtt) 是一種基於釋出/訂閱模式的 **輕量級物聯網訊息傳輸協議** ，可在嚴重受限的硬體裝置和低頻寬、高延遲的網路上實現穩定傳輸。它憑藉簡單易實現、支援 QoS、報文小等特點，佔據了物聯網協議的半壁江山。

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

### 新建 React Native 專案

這裡以建立一個名為 `RNMQTTDemo` 的專案為例，開發環境為 macOS，應用平臺為 iOS，具體過程參考 [Setting up the development environment](https://reactnative.dev/docs/environment-setup)。

專案建立完成後，在專案根目錄環境下，執行以下命令安裝所需依賴：

```coffeescript
npm install @react-native-async-storage/async-storage @rneui/base @rneui/themed
```

### 安裝 MQTT 客戶端模組

```cmake
npm install react_native_mqtt
```

react_native_mqtt 是一個在 React Native 專案中使用的 MQTT 客戶端模組，支援 iOS 和 Android。

### MQTT 客戶端模組使用

#### 連線 MQTT 伺服器

這裡使用 EMQ 提供的免費公共 [MQTT 伺服器](https://www.emqx.com/zh/mqtt/public-mqtt5-broker)，該服務基於 EMQ 的 [MQTT 物聯網雲平臺](https://www.emqx.com/zh/cloud) 建立。伺服器接入資訊如下：

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

#### 建立客戶端例項

```yaml
init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  sync : {}
});
const options = {
  host: 'broker.emqx.io',
  port: 8083,
  path: '/testTopic',
  id: 'id_' + parseInt(Math.random()*100000)
};
client = new Paho.MQTT.Client(options.host, options.port, options.path);
```

#### 連線 MQTT 伺服器

```coffeescript
  connect = () => {
    this.setState(
      { status: 'isFetching' },
      () => {
        client.connect({
          onSuccess: this.onConnect,
          useSSL: false,
          timeout: 3,
          onFailure: this.onFailure
        });
      }
    );
  }
```

#### 主題訂閱

```pf
  subscribeTopic = () => {
    this.setState(
      { subscribedTopic: this.state.topic },
      () => {
        client.subscribe(this.state.subscribedTopic, { qos: 0 });
      }
    );
  }
```

#### 訊息釋出

```pf
  sendMessage = () =>{
    var message = new Paho.MQTT.Message(options.id + ':' + this.state.message);
    message.destinationName = this.state.subscribedTopic;
    client.send(message);
  }
```

#### 取消訂閱

```pf
  unSubscribeTopic = () => {
    client.unsubscribe(this.state.subscribedTopic);
    this.setState({ subscribedTopic: '' });
  }
```

### 執行專案

完整的 RNMQTTDemo 專案地址：https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React-Native 。

在專案根目錄環境下，新建兩個終端視窗，分別執行以下命令：

```actionscript
npx react-native start
npx react-native run-ios
```

執行完後將看到應用執行在 iOS 的模擬器中，其中頂部顯示的是當前客戶端的 id，如下圖：

[![MQTT React Native iOS](http://img.blog.itpub.net/blog/2022/06/13/bc93c6dd4e548b77.png?x-oss-process=style/bb "MQTT React Native iOS")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native "MQTT React Native iOS")

### MQTT 連線測試

這裡使用 [MQTT 5.0 客戶端工具 - MQTT X](https://mqttx.app/zh) 進行相關測試，建立一個名為 react-native-demo 的連線，所有配置項均使用預設值，點選連線按鈕，連線成功後新增一個主題名稱為 testTopic 的訂閱，顯示如下：

[![MQTT 5.0 客戶端工具 - MQTT X](http://img.blog.itpub.net/blog/2022/06/13/3b79ed258a115160.png?x-oss-process=style/bb "MQTT 5.0 客戶端工具 - MQTT X")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native "MQTT 5.0 客戶端工具 - MQTT X")

#### 連線

點選 APP 中的 CONNECT 按鈕，連線成功後的介面顯示如下，其中頂部 ClientID 一行的內容變成綠色，表示已成功連線到 MQTT 伺服器。

[![連線 MQTT 伺服器](http://img.blog.itpub.net/blog/2022/06/13/ad22d7656446a157.png?x-oss-process=style/bb "連線 MQTT 伺服器")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native "連線 MQTT 伺服器")

#### 主題訂閱

輸入需要訂閱的主題，這裡以 `testTopic` 為例，然後點選 SUBSCRIBE 按鈕，訂閱後的介面顯示如下：

[![訂閱 MQTT 主題](http://img.blog.itpub.net/blog/2022/06/13/fc24b89d1c8ceec8.png?x-oss-process=style/bb "訂閱 MQTT 主題")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native "訂閱 MQTT 主題")

#### 訊息釋出

輸入需要釋出的訊息內容，輸入完成後點選 PUBLISH 按鈕，最下方會列出當前訂閱主題下接收到的訊息，其中黑色背景的訊息是當前客戶端發出去的，id_67485 就是當前客戶端的 id，介面顯示如下：

[![MQTT 訊息釋出](http://img.blog.itpub.net/blog/2022/06/13/9053e00da734a0d6.png?x-oss-process=style/bb "MQTT 訊息釋出")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native "MQTT 訊息釋出")

同時在 MQTT X 的 react-native-demo 連線下，也往 `testTopic` 主題釋出一些訊息，同時也能看到客戶端 id 為 id_67458 往該主題釋出的訊息，顯示如下：

[![MQTT 訊息釋出1](http://img.blog.itpub.net/blog/2022/06/13/de70a79aa43961c1.png?x-oss-process=style/bb "MQTT 訊息釋出1")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native "MQTT 訊息釋出1")

#### 取消訂閱

在 APP 中點選 UNSCRIBE 按鈕，然後在 MQTT X 上繼續往 testTopic 主題釋出一條內容為 `{ "msg": "hello test" }` 的訊息，顯示如下：

[![MQTT 訊息釋出2](http://img.blog.itpub.net/blog/2022/06/13/f06d919a68bc4162.png?x-oss-process=style/bb "MQTT 訊息釋出2")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native "MQTT 訊息釋出2")

取消訂閱 testTopic 主題後，未收到 MQTT X 往該主題釋出的訊息 `{ "msg": "hello test" }`

[![MQTT 取消訂閱](http://img.blog.itpub.net/blog/2022/06/13/166a2c6633f66b3e.png?x-oss-process=style/bb "MQTT 取消訂閱")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native "MQTT 取消訂閱")

### 總結

至此，我們完成了在 iOS 平臺上利用 React Native 構建一個 MQTT 應用，實現了客戶端與 MQTT 伺服器的連線、主題訂閱、收發訊息、取消訂閱等功能。

透過 React Native，開發者可以使用標準的 iOS 平臺元件，開發出的應用幾乎與原生應用的效能相似；無縫的跨平臺可以讓團隊更快地工作，同時開發過程中只需將改動儲存，即可在 iOS 模擬器中檢視實際效果。高效、接近原生的效能、熱過載和廣泛的社群支援，使得 React Native 成為很多移動應用開發者的最佳選擇，而結合 React Native、MQTT 協議以及 [MQTT 雲服務](https://www.emqx.com/zh/cloud)，我們也可以開發出很多有趣的創新應用。

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

如何在 React Native 專案中使用 MQTT

相關文章