ReactプロジェクトでMQTTを使用する方法

![ReactプロジェクトでMQTTを使用する方法](https://assets.emqx.com/images/ba50fcec7eaf8bb613f14922dc744446.png?imageMogr2/thumbnail/1520x684)

React(React.jsまたはReactJSとも呼ばれる)は、ユーザーインターフェースまたはUIコンポーネントを構築するためのオープンソースのフロントエンドJavaScriptライブラリです。これはFacebookと個人開発者や企業のコミュニティによって維持されています。Reactは、シングルページまたはモバイルアプリケーションの開発のベースとして使用できます。しかし、ReactはデータをDOMにレンダリングすることだけを担当しており、したがってReactアプリケーションの作成には通常、状態管理とルーティングのために追加のライブラリが必要です。ReduxとReact Routerは、そのようなライブラリの代表的な例です。[1]

この記事では、主にクライアントと[MQTTブローカー](https://www.emqx.com/ja/blog/the-ultimate-guide-to-mqtt-broker-comparison)の接続、サブスクライブ、メッセージング、サブスクライブ解除などを実装するために、Reactプロジェクトで[MQTT](https://www.emqx.com/ja/blog/the-easiest-guide-to-getting-started-with-mqtt)を使用する方法を紹介します。

## プロジェクトの初期化

### 新しいプロジェクト

リファレンスリンク: https://legacy.reactjs.org/docs/getting-started.html

- `Create React App`を使用した新しいReactアプリケーションの作成

  ```shell
  npx create-react-app react-mqtt-test
  ```

  TypeScriptを使用する必要がある場合は、コマンドラインの末尾に--template typescriptパラメータを追加してください

  ```shell
  npx create-react-app react-mqtt-test --template typescript
  ```

  次に、Reactプロジェクトで必要なTypeScriptタイプライブラリを追加します

  ```shell
  npm install --save typescript @types/node @types/react @types/react-dom @types/jest
  # または
  yarn add typescript @types/node @types/react @types/react-dom @types/jest
  ```

  この記事の例ではTypeScriptの使用に焦点を当てませんが、使用したい場合は、作成例と完全なコード例を参照した後にTypeScript機能を追加できます。

- CDN経由でインポート

  ```html
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  ```

### MQTTクライアントライブラリのインストール

ReactはJavaScriptライブラリであるため、MQTTクライアントライブラリとして[MQTT.js](https://www.emqx.com/ja/blog/mqtt-js-tutorial)を使用できます。

> 以下の方法2、3は、CDNリンク経由で作成されたReactプロジェクトを参照するのにもっと適しています。

1. コマンドライン経由でのインストール、npmまたはyarnコマンドのいずれかを使用

   ```shell
   npm install mqtt --save
   # または
   yarn add mqtt
   ```

2. CDN経由でインポート

   ```html
   <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
   ```

3. ローカルにダウンロードしてから、相対パスを使用してインポート

   ```html
   <script src="/your/path/to/mqtt.min.js"></script>
   ```

## MQTTの使用

### MQTTブローカーへの接続

この記事では、EMQXが提供する[無料のパブリックMQTTブローカー](https://www.emqx.com/ja/mqtt/public-mqtt5-broker)を使用します。このサービスは、EMQXの[MQTT IoTクラウドプラットフォーム](https://www.emqx.com/ja/cloud)に基づいて作成されています。サーバーアクセス情報は次のとおりです。

- ブローカー: **broker.emqx.io**
- TCPポート: **1883**
- Websocketポート: **8083**

### 接続

```javascript
const [client, setClient] = useState(null);
const mqttConnect = (host, mqttOption) => {
  setConnectStatus('Connecting');
  setClient(mqtt.connect(host, mqttOption));
};
useEffect(() => {
  if (client) {
    console.log(client)
    client.on('connect', () => {
      setConnectStatus('Connected');
    });
    client.on('error', (err) => {
      console.error('Connection error: ', err);
      client.end();
    });
    client.on('reconnect', () => {
      setConnectStatus('Reconnecting');
    });
    client.on('message', (topic, message) => {
      const payload = { topic, message: message.toString() };
      setPayload(payload);
    });
  }
}, [client]);
```

### サブスクライブ

```javascript
const mqttSub = (subscription) => {
  if (client) {
    const { topic, qos } = subscription;
    client.subscribe(topic, { qos }, (error) => {
      if (error) {
        console.log('Subscribe to topics error', error)
        return
      }
      setIsSub(true)
    });
  }
};
```

### サブスクライブ解除

```javascript
const mqttUnSub = (subscription) => {
  if (client) {
    const { topic } = subscription;
    client.unsubscribe(topic, error => {
      if (error) {
        console.log('Unsubscribe error', error)
        return
      }
      setIsSub(false);
    });
  }
};
```

### パブリッシュ

```javascript
const mqttPublish = (context) => {
  if (client) {
    const { topic, qos, payload } = context;
    client.publish(topic, payload, { qos }, error => {
      if (error) {
        console.log('Publish error: ', error);
      }
    });
  }
}
```

### 切断

```javascript
const mqttDisconnect = () => {
  if (client) {
    client.end(() => {
      setConnectStatus('Connect');
    });
  }
}
```

## テスト

次の簡単なブラウザアプリケーションをReactを使用して作成しました。これには、接続の作成、トピックへのサブスクライブ、メッセージの送受信、サブスクライブ解除、切断の機能があります。

完全なプロジェクトのサンプルコード: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React。

![reactmqttpage.png](https://assets.emqx.com/images/d1c51195c056f3b4afb267edaeb217f0.png?imageMogr2/thumbnail/1520x)

別のクライアントとして、メッセージの送受信をテストするために[MQTT 5.0クライアントツール - MQTTX](https://mqttx.app/)を使用します。

![reactmqttx.png](https://assets.emqx.com/images/621ba9544ea69f9ee7b24203846d0409.png?imageMogr2/thumbnail/1520x)

MQTTXを使用してトピックにメッセージを送信するときに見られるように、MQTTXはブラウザ側からのメッセージを正常に受信できます。

![reactmqtttest.png](https://assets.emqx.com/images/da008ae3544a83a3efa78266190ea364.png?imageMogr2/thumbnail/1520x)

## まとめ

要約すると、ReactプロジェクトでのMQTT接続の作成を実装し、クライアントとMQTTブローカー間のサブスクライブ、メッセージの送受信、サブスクライブ解除、切断をシミュレートしました。

この記事では、React v16.13.1を使用するため、フックコンポーネント機能を使用してデモコードを示す例として使われます。または、必要に応じて、プロジェクト構築にクラスコンポーネント機能を使用するために、完全なコード例のClassMqttコンポーネントを参照できます。

次に、EMQXが提供する[MQTTプロトコルのわかりやすいガイド](https://www.emqx.com/ja/mqtt-guide)の記事シリーズをチェックして、MQTTプロトコルの機能を学習し、MQTTのさらに高度なアプリケーションを探索し、MQTTアプリケーションとサービス開発を始めることができます。

## リソース

- [VueでMQTTを使用する方法](https://www.emqx.com/en/blog/how-to-use-mqtt-in-vue)
- [AngularでMQTTを使用する方法](https://www.emqx.com/en/blog/how-to-use-mqtt-in-angular)  
- [ElectronでMQTTを使用する方法](https://www.emqx.com/en/blog/how-to-use-mqtt-in-electron)
- [Node.jsでMQTTを使用する方法](https://www.emqx.com/en/blog/how-to-use-mqtt-in-nodejs)
- [WebSocket上でMQTTを使用するためのクイックスタートガイド](