EMQX Cloud

日本語

简体中文
English

日本語

简体中文
English

Appearance

お問い合わせ
お問い合わせ

ReactでMQTT.js SDKを使ってデプロイメントに接続する方法 ​

本記事では、Reactフレームワークで構築されたWebアプリケーションにおいて、MQTT.jsを使用し、クライアントとMQTTブローカー間の接続、サブスクライブ、メッセージ送受信、サブスクライブ解除などの機能を実装する方法を主に紹介します。

前提条件 ​

Reactクライアントを使ってEMQX Cloudに接続する前に、以下の前提条件を満たしていることを確認してください。

  • MQTTブローカーのデプロイ
  • Reactアプリケーションの作成

MQTTブローカーのデプロイ ​

アプリケーションをEMQX Cloudに接続するには、デプロイメントを作成して設定する必要があります。

サーバレスデプロイメント ​

  1. EMQX Cloudコンソールでサーバレスデプロイメントを作成します。

  2. デプロイメントが作成されて稼働したら、デプロイメントの概要ページに移動し、以下を含むMQTT接続情報を確認します。

    • ブローカーアドレス

    • ポート番号（サーバレスではTLSポートのみ対応）

  3. サーバレスデプロイメントはTLS接続が必須です。概要ページからCA証明書をダウンロードし、TLS用のポート8883を使用してください。

  4. デプロイメントのアクセス制御 -> クライアント認証で、デフォルト認証（ユーザー名／パスワード）を設定します。

詳細はサーバレスポートガイドを参照してください。

Dedicated Flex または BYOC デプロイメント ​

  1. EMQX CloudコンソールでDedicated FlexまたはBYOCのデプロイメントを作成できます。

  2. 作成後、デプロイメントの概要ページに移動し、以下を含むMQTT接続情報を取得します。

    • ブローカーアドレス

    • MQTTおよびWebSocket用のTCPおよびTLSポート番号（TCPおよびTLS接続の両方に対応）

  3. デプロイメントのアクセス制御 -> クライアント認証で、デフォルト認証（ユーザー名／パスワード）を設定します。

詳細なポート設定については、Dedicated & BYOCポートガイドをご覧ください。

Reactアプリケーションの作成 ​

参考リンク：https://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.jsは、JavaScriptで書かれた完全オープンソースのMQTTプロトコル用クライアントライブラリで、Node.jsおよびブラウザで利用可能です。MQTT.jsの詳細や使い方はMQTT.js GitHubをご参照ください。

MQTT.jsはNPMやYarnでインストールできるほか、CDNや相対パス経由でのインポートも可能です。本例ではNPMコマンドでのインストール方法を示します。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>

WebSocketポートでの接続 ​

クライアントID、ユーザー名、パスワードは以下のコードで設定できます。クライアントIDは一意である必要があります。

js
const clientId = "emqx_react_" + Math.random().toString(16).substring(2, 8);
const username = "emqx_test";
const password = "emqx_test";

以下のコードでクライアントとMQTTブローカー間の接続を確立できます。

js
const client = mqtt.connect("ws://broker.emqx.io:8083/mqtt", {
  clientId,
  username,
  password,
  // ...その他のオプション
});

WebSocketセキュアポートでの接続 ​

TLS/SSL暗号化が有効な場合、接続のパラメータオプションはWebSocketポート接続時と同じですが、プロトコルをwssに変更し、適切なポート番号を指定する必要があります。

以下のコードでクライアントとMQTTブローカー間の接続を確立できます。

js
const client = mqtt.connect("wss://broker.emqx.io:8084/mqtt", {
  clientId,
  username,
  password,
  // ...その他のオプション
});

サブスクライブとパブリッシュ ​

トピックのサブスクライブ ​

サブスクライブするトピックと対応するQoSレベルを指定します。

javascript
const mqttSub = (subscription) => {
    if (client) {
      const { topic, qos } = subscription
      client.subscribe(topic, { qos }, (error) => {
        if (error) {
          console.log('トピックのサブスクライブエラー', error)
          return
        }
        console.log(`トピックをサブスクライブしました: ${topic}`)
        setIsSub(true)
      })
    }
  }

トピックのサブスクライブ解除 ​

以下のコードで、指定したトピックと対応するQoSレベルのサブスクライブを解除できます。

javascript
const mqttUnSub = (subscription) => {
  if (client) {
    const { topic, qos } = subscription
    client.unsubscribe(topic, { qos }, (error) => {
      if (error) {
        console.log('サブスクライブ解除エラー', error)
        return
      }
      console.log(`サブスクライブ解除したトピック: ${topic}`)
      setIsSub(false)
    })
  }
}

メッセージのパブリッシュ ​

メッセージをパブリッシュする際は、MQTTブローカーに対して対象のトピックとメッセージ内容を指定する必要があります。

javascript
const mqttPublish = (context) => {
  if (client) {
    const { topic, qos, payload } = context;
    client.publish(topic, payload, { qos }, (error) => {
      if (error) {
        console.log("パブリッシュエラー: ", error);
      }
    });
  }
};

メッセージの受信 ​

以下のコードはメッセージイベントを監視し、メッセージ受信時に受信したメッセージとトピックをコンソールに出力します。

js
client.on("message", (topic: string, message) => {
  console.log(`受信したメッセージ: ${message} トピック: ${topic}`);
});

MQTTブローカーからの切断 ​

クライアントをブローカーから切断するには、以下のコードを使用します。

javascript
const mqttDisconnect = () => {
  if (client.connected) {
    try {
      client.end(false, () => {
        setConnectStatus('Connect')
        console.log('正常に切断されました')
      })
    } catch (error) {
      console.log('切断エラー:', error)
    }
  }
}

上記は主要なコードスニペットのみを示しています。完全なプロジェクトコードはMQTT Client - Reactをご参照ください。ダウンロードして実際に試すことができます。

接続のテスト ​

Reactを使って作成した以下の簡単なブラウザアプリケーションでは、接続の作成、トピックのサブスクライブ、メッセージの送受信、サブスクライブ解除、切断が可能です。

reactmqttpage.png

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

reactmqttx.png

MQTTXからブラウザ側に正常にメッセージが届くことが確認でき、MQTTXでトピックにメッセージを送信した際の様子が以下の画像です。

reactmqtttest.png

FAQ ​

  1. 自己署名証明書の使い方は？双方向TLS/SSL認証は使えますか？

    ブラウザの制限により、現時点ではサポートされていません。詳細はMQTT.jsのIssueをご参照ください：ブラウザでTLS/SSL双方向認証接続を使う方法？およびNode.jsでは双方向認証が可能だがブラウザでは未対応。

まとめ ​

本記事では、ReactプロジェクトでMQTT接続を作成し、クライアントとMQTTサーバー間でのサブスクライブ、メッセージパブリッシュ、サブスクライブ解除、切断のシナリオをシミュレートしました。

React v18.2.0を使用しているため、例示コードはHookコンポーネントを用いていますが、必要に応じて完全な例のClassMqttコンポーネントを参照し、クラスコンポーネントでの構築も可能です。

完全なサンプルソースコードはMQTT Client - Reactページからダウンロードでき、他言語のデモ例もMQTT Client例ページでご覧いただけます。