React Native で MQTT.js SDK を使ってデプロイメントに接続する方法
本記事では、Expo で構築した React Native アプリケーション内で MQTT.js を使用し、クライアントと MQTT ブローカー間の接続、サブスクライブ、メッセージ送受信、サブスクライブ解除などの機能を実装する方法を紹介します。
前提条件
React Native クライアントを使って EMQX Cloud に接続する前に、以下の前提条件を満たしていることを確認してください。
- MQTT ブローカーのデプロイ
- React Native アプリケーションの作成
MQTT ブローカーのデプロイ
アプリケーションをEMQX Cloudに接続するには、デプロイメントを作成して設定する必要があります。
サーバレスデプロイメント
EMQX Cloudコンソールでサーバレスデプロイメントを作成します。
デプロイメントが作成されて稼働したら、デプロイメントの概要ページに移動し、以下を含むMQTT接続情報を確認します。
ブローカーアドレス
ポート番号（サーバレスではTLSポートのみ対応）
サーバレスデプロイメントはTLS接続が必須です。概要ページからCA証明書をダウンロードし、TLS用のポート
8883を使用してください。デプロイメントのアクセス制御 -> クライアント認証で、デフォルト認証（ユーザー名／パスワード）を設定します。
詳細はサーバレスポートガイドを参照してください。
Dedicated Flex または BYOC デプロイメント
EMQX CloudコンソールでDedicated FlexまたはBYOCのデプロイメントを作成できます。
作成後、デプロイメントの概要ページに移動し、以下を含むMQTT接続情報を取得します。
ブローカーアドレス
MQTTおよびWebSocket用のTCPおよびTLSポート番号（TCPおよびTLS接続の両方に対応）
デプロイメントのアクセス制御 -> クライアント認証で、デフォルト認証（ユーザー名／パスワード）を設定します。
詳細なポート設定については、Dedicated & BYOCポートガイドをご覧ください。
React Native アプリケーションの作成
Expo を使って新しい React Native アプリケーションを作成します。
npx create-expo-app@latest mqtt-test参考リンク：https://docs.expo.dev/get-started/create-a-project/。
依存関係のインストール
MQTT.js は、JavaScript で書かれた MQTT プロトコル用の完全オープンソースのクライアントサイドライブラリで、Node.js とブラウザの両方で利用可能です。MQTT.js の詳細や使い方については、MQTT.js GitHub を参照してください。
MQTT.js は npm、yarn、pnpm でインストール可能です。本例では npm コマンドでのインストール方法を示します。
コマンドラインからインストールします。
shellnpm install mqtt # または yarn add mqtt # または pnpm add mqtt必要な箇所で MQTT.js をインポートします。
jsimport mqtt from "mqtt";
WebSocket ポートで接続する
クライアント ID、ユーザー名、パスワードを以下のように設定できます。クライアント ID は一意である必要があります。
const clientId =
"emqx_react_native_" + Math.random().toString(16).substring(2, 8);
const username = "emqx_test";
const password = "emqx_test";以下のコードでクライアントと MQTT ブローカー間の接続を確立できます。
const client = mqtt.connect("ws://broker.emqx.io:8083/mqtt", {
clientId,
username,
password,
// ...その他のオプション
});WebSocket セキュアポートで接続する
TLS/SSL 暗号化が有効な場合、接続時のパラメーターオプションは WebSocket ポートでの接続と同じですが、プロトコルを wss に変更し、正しいポート番号を指定する必要があります。
以下のコードでクライアントと MQTT ブローカー間の接続を確立できます。
const client = mqtt.connect("wss://broker.emqx.io:8084/mqtt", {
clientId,
username,
password,
// ...その他のオプション
});サブスクライブとパブリッシュ
トピックのサブスクライブ
サブスクライブするトピックと対応するQoSレベルを指定します。
const doSubscribe = () => {
setSubBtnText("Subscribing...");
client?.subscribe(subTopic, { qos: 0 }, (error) => {
if (error) {
console.error("トピックのサブスクライブに失敗しました:", subTopic, error);
setSubBtnText("Subscribe");
} else {
setSubBtnText("Subscribed");
console.log("トピックをサブスクライブしました:", subTopic);
}
});
};トピックのサブスクライブ解除
以下のコードで、指定したトピックのサブスクライブを解除できます。
const doUnsubscribe = () => {
client?.unsubscribe(subTopic, {}, (error) => {
if (error) {
console.error("トピックのサブスクライブ解除に失敗しました:", subTopic, error);
setSubBtnText("Subscribe");
} else {
console.log("トピックのサブスクライブを解除しました:", subTopic);
setSubBtnText("Subscribe");
}
});
};メッセージのパブリッシュ
メッセージをパブリッシュする際は、MQTT ブローカーに対して対象のトピックとメッセージ内容を指定する必要があります。
const doPublish = () => {
client?.publish(pubTopic, pubMessage, { qos: 0 }, (error) => {
if (error) {
console.error("メッセージのパブリッシュに失敗しました:", error);
} else {
console.log("トピックにメッセージをパブリッシュしました:", pubTopic);
}
});
};メッセージの受信
以下のコードはメッセージイベントを監視し、受信したメッセージを保存します。
client.on("message", (topic, payload) => {
setReceivedMsg((prevMsg) => {
return prevMsg.concat(`\n${payload.toString()}`);
});
});MQTT ブローカーからの切断
クライアントをブローカーから切断するには、以下のコードを使用します。
const doDisconnect = () => {
client?.end();
setClient(null);
setConnectBtnText("Connect");
};上記は主要なコードスニペットのみを示しています。完全なプロジェクトコードは MQTT Client - React-Native-Expo をご参照ください。ダウンロードして実際に試すことも可能です。
接続のテスト
React Native を使って、接続の作成、トピックのサブスクライブ、メッセージの送受信、サブスクライブ解除、切断ができるシンプルなアプリケーションを作成しました。
別のクライアントとして MQTT 5.0 クライアントツール - MQTTX を使い、メッセージの送受信をテストします。
MQTTX が React Native 側からのメッセージを正常に受信できることが確認でき、MQTTX からトピックにメッセージを送信した際にも同様に受信できます。
まとめ
本記事では、React Native プロジェクトで MQTT 接続を作成し、クライアントと MQTT サーバー間でのサブスクライブ、メッセージのパブリッシュ、サブスクライブ解除、切断のシナリオを実装しました。
完全なサンプルコードは MQTT Client - React-Native-Expo からダウンロード可能です。また、MQTT Client example page では他言語のデモ例も多数公開していますので、ぜひご覧ください。