React NativeでMQTTを使用する方法
Chuanbiao Ou
React Nativeは、Facebookのオープンソースのクロスプラットフォームなモバイルアプリ開発フレームワークで、ネイティブモバイルアプリケーションプラットフォームのためのReactの派生物です。React Nativeは、ウェブフロントエンド開発に精通している技術スタッフが、最小限の学習曲線でモバイルアプリケーション開発を始めることができるように、JavascriptとHTML JSX、CSSを使用してモバイルアプリケーションを開発します。 React Nativeはまた、ネイティブアプリケーションに近いパフォーマンスとエクスペリエンスを提供します。
MQTTは、パブリッシュ/サブスクライブモデルに基づく軽量なIoTメッセージングプロトコルであり、厳しく制約されたハードウェアデバイスと低帯域幅、高レイテンシーネットワーク上で安定した転送を可能にします。 簡単な実装、QoSサポート、小さいメッセージサイズなどにより、IoT業界で広く使用されています。
この記事では、クライアントからMQTTブローカーへのメッセージの送受信のためのReact NativeプロジェクトでのMQTTの使用に焦点を当てています。
新しいReact Nativeプロジェクトの作成
ここでは、macOS開発環境とiOSアプリケーションプラットフォームでRNMQTTDemoという名前のプロジェクトを作成する例を示します。 詳細は、開発環境の設定を参照してください。
プロジェクトが作成された後、プロジェクトルート環境で次のコマンドを実行して、必要な依存関係をプロジェクトにインストールします。
npm install @react-native-async-storage/async-storage @rneui/base @rneui/themed
MQTTクライアントモジュールのインストール
npm install react_native_mqtt
react_native_mqttは、iOSとAndroidをサポートするReact Nativeプロジェクトに使用されるMQTTクライアントモジュールです。
MQTTクライアントモジュールの使用方法
MQTTサーバーへの接続
EMQXの無料のパブリックMQTTサーバーを使用します。これは、EMQXのMQTTクラウドに基づいています。 サーバーアクセス情報は以下のとおりです。
- ブローカー:
broker.emqx.io - TCPポート: 1883
- Websocketポート: 8083
クライアントインスタンスの作成
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サーバーへの接続
connect = () => {
this.setState(
{ status: 'isFetching' },
() => {
client.connect({
onSuccess: this.onConnect,
useSSL: false,
timeout: 3,
onFailure: this.onFailure
});
}
);
}
サブスクライブ
subscribeTopic = () => {
this.setState(
{ subscribedTopic: this.state.topic },
() => {
client.subscribe(this.state.subscribedTopic, { qos: 0 });
}
);
}
パブリッシュ
sendMessage = () =>{
var message = new Paho.MQTT.Message(options.id + ':' + this.state.message);
message.destinationName = this.state.subscribedTopic;
client.send(message);
}
アンサブスクライブ
unSubscribeTopic = () => {
client.unsubscribe(this.state.subscribedTopic);
this.setState({ subscribedTopic: '' });
}
プロジェクトの実行
完全なRNMQTTDemoプロジェクトは、https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React-Native にあります。
プロジェクトのルート環境で、2つの新しいターミナルウィンドウを作成し、次のコマンドを実行します。
npx react-native start
npx react-native run-ios
すると、iOSエミュレーターでアプリケーションが実行されます。トップにクライアントIDが表示されます。
MQTT接続テスト
MQTT 5.0クライアントツール - MQTTXを使用して、関連するテストを実行します。 react-native-demoという名前の接続を作成し、すべての構成項目でデフォルト値を使用し、接続に成功した後に、トピック名testTopicでサブスクリプションを追加するために、接続ボタンをクリックします。
接続
APPのCONNECTボタンをクリックすると、インターフェースが次のように表示されます。 接続に成功すると、上部のClientID行の内容が緑色に変わり、MQTTサーバーに正常に接続されたことを示します。
サブスクライブ
サブスクライブしたいトピックを入力します。ここでは、testTopicを例として使用します。 次に、SUBSCRIBEボタンをクリックします。 サブスクリプション後のインターフェースは、次のように表示されます。
パブリッシュ
公開するメッセージの内容を入力し、入力が終わったらPUBLISHボタンをクリックします。 現在サブスクライブされているトピックで受信したメッセージが下部にリストされ、黒背景のメッセージは現在のクライアントによって送信されたものです。 現在のクライアントのIDはid_67485で、インターフェースは次のように表示されます。
同時に、MQTTXのreact-native-demo接続のもとで、testTopicトピックにいくつかのメッセージを公開します。 クライアントID id_67458によってトピックに公開されたメッセージも表示されます。
アンサブスクライブ
APPのUNSCRIBEボタンをクリックします。その後、{ "msg": "hello test" }をtestTopicトピックにMQTTXで投稿すると、次のように表示されます。
testTopicトピックからアンサブスクライブすると、このトピックのMQTTXからのメッセージは受信されません { "msg": "hello test" }。
まとめ
ここまでで、React Nativeを使用してiOSプラットフォーム上にMQTTアプリを構築し、クライアントをMQTTサーバーに接続し、トピックをサブスクライブし、メッセージの送受信を実装し、サブスクライブを解除する機能を実装しました。
React Nativeを使用することで、開発者は標準のiOSプラットフォームコンポーネントを使用して、ネイティブアプリとほぼ同等のパフォーマンスを発揮するアプリを開発できます。 シームレスなクロスプラットフォームにより、チームは開発中の変更を保存するだけでより速く作業でき、iOSシミュレーターでの実際の結果が示したとおりです。 効率的なネイティブに近いパフォーマンス、ホットリローディング、広範なコミュニティのサポートが、多くのモバイルアプリ開発者にとってReact Nativeを最良の選択肢にしています。 React NativeとMQTTプロトコル、MQTTクラウドサービスを組み合わせることで、ユーザーはさまざまな興味深く革新的なアプリも開発できます。
次に、EMQXが提供するMQTTプロトコルのわかりやすいガイドの記事シリーズをチェックして、MQTTプロトコルの機能を学び、MQTTのより高度なアプリケーションを探索し、MQTTアプリケーションとサービスの開発を開始してください。