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

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

この記事では、主にクライアントとMQTTブローカーの接続、サブスクライブ、メッセージング、サブスクライブ解除などを実装するために、ReactプロジェクトでMQTTを使用する方法を紹介します。

プロジェクトの初期化

新しいプロジェクト

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

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

  npx create-react-app react-mqtt-test
  

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

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

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

  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経由でインポート

  <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を使用できます。

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

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

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

2. CDN経由でインポート

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

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

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

MQTTの使用

MQTTブローカーへの接続

この記事では、EMQXが提供する無料のパブリックMQTTブローカーを使用します。このサービスは、EMQXのMQTT IoTクラウドプラットフォームに基づいて作成されています。サーバーアクセス情報は次のとおりです。

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

接続

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]);

サブスクライブ

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)
    });
  }
};

サブスクライブ解除

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

パブリッシュ

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

切断

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

テスト

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

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

別のクライアントとして、メッセージの送受信をテストするためにMQTT 5.0クライアントツール - MQTTXを使用します。

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

まとめ

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

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

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

リソース

• VueでMQTTを使用する方法
• AngularでMQTTを使用する方法
• ElectronでMQTTを使用する方法
• Node.jsでMQTTを使用する方法
• [WebSocket上でMQTTを使用するためのクイックスタートガイド](