Web ブラウザと IoT デバイス間で相互に MQTT 通信を行うシステムのエミュレーション
MQTT Mosquitto ブラウザ Web ソケット WebSocket IoTデバイス 監視・制御 SSL/TLS
背景
MQTT プロトコルは IoT 機器の監視・制御に最適な通信方式です。 Mosquitto や EMQX社 から無料で利用できる MQTT Broker が提供されていて手軽に利用できます。 しかし予期せぬサーバーの停止により IoT 機器の監視・制御に不都合をきたしたり、相乗りサーバーのためどうしてもセキュリティに対する不安も残ります。
これらの課題を解決するために VPS サーバーにセキュリティ対策も行った MQTT Broker をインストールして IoT システムを構成しました。 特に Web ブラウザと MQTT Broker 間の MQTT over WebSockets with TLS に多くの試行錯誤をともなったので整理して記録を残します。
ゴール
・VPS サーバーに MQTT Broker インストール
・TLS(SSL) によるセキュリティ対応
・IoT デバイス (C++) と MQTT Broker 間は MQTT over TLS (mqtts://) 通信
・Web ブラウザ (HTML, Java Script, CSS) と MQTT Broker 間 MQTT over WebSockets with TLS (wss://) 通信
本章では Web ブラウザと IoT デバイスのクライアント間で相互に MQTT 通信できる IoT システムのエミュレーションを行います。
前提条件
・Mosquitto (バージョン 2.0.11) インストール済み
・VPSサーバー Linux OS Debian (バージョン 6.1.153-1)
・IoT デバイス ESP32-DevKitC
・開発プラットフォーム Visual Studio Code (バージョン:1.105.0)
・拡張機能 PlatformIO IDE for VSCode (バージョン 3.3.4)
・開発言語 Linux , C++, HTML, Java Script, CSS
・通信プロトコル MQTT over TLS (mqtts://), MQTT over WebSockets with TLS (wss://)
・Windows 11 (バージョン Pro 24H2)
事前準備
事前に必要なポートを開放しておきます。
・443 Web Server with TLS
・8883 MQTT over TLS
・8884 MQTT over WebSockets with TLS
( Mosquitto のデフォルトポートとは異なりますが、ここでは 8883, 8884 を使用します。)
MQTTX・・・インストール
インストール
EMQ Technologies Inc. から MQTT クライアントツール MQTTX を Windows 11 PC にインストールして利用することができます。
図 2 MQTTX のホームページを開いて Dawnload
図 3 Windows タブ > Desktop > x86-64
図 4 任意のフォルダーにダウンロードします。
ファイル名をクリックするとインストーラーが起動されます。
図 5 インストールオプションを選択して > 次へ
図 6 インストール先を選んでください。 > インストール先フォルダを確認 > インストール
図 7 インストール中
図 8 MQTTX セットアップは完了しました。 > 完了
図 9 MQTTX アプリケーションが立ち上がりリリースノートが表示されます。
MQTTX・・・MQTT over TLS
図 10 リリースノートを消すと New Connection 画面が表示されます。
図 11 画面中央の New Connection をクリックすると設定入力画面が表示されます。
図 12 必要な設定情報を入力していきます。
*Name mqtts_client (任意の名前)
*Host mqtts:// (プルダウンメニューから選択)
*Host domain-name (mosquito インストール時設定)
*Port 8883 (mosquito インストール時設定)
Username username (mosquito インストール時設定)
Password password (mosquito インストール時設定)
SSL/TLS ON
SSL Secure OFF
CA or Self signed certificates 選択
CA File SRG_Root_X1.pem (mosquito インストール時設定)
以上、入力ができたら右上の Connect をクリックします。
図 13 右上に MQTT Broker に接続中であることを示す丸い電源ボタンが表示されます。
Subscribe の設定
図 13 画面中央上 ＋ New Subcription をクリックします。
図 14 Subscribe 設定画面が表示されます。
*Topic MQTT topic ここでは MQTT topic と入力しました。( 任意の文字列 )
*QoS 0 デフォルトの 0 で構いません。
Confirm をクリックすると Subscribe の設定は完了です。
Publish の設定
図 15 中央下の Topic と表示されたところに MQTT topic と入力します。
”msg”:”hello” の表示を “title”:”test12345″ に書き換えます。(任意の文字列)
図 16 右下の Publish ボタンをクリックします。
画面右側に Publish したメッセージ が表示されます。(背景緑、文字白)
画面中央に Subsclibe したメッセージがエコーバック表示されます。(背景灰、文字黒)
以上で MQTT over TLS ( mqtts:// ) の設定と Publish、Subsclibe の動作確認が完了しました。
MQTTX・・・MQTT over WebSocket with TLS
図 17 左上 Connections 横 ⊞ ボタン > 新しい接続 を選択すると 新規 画面が表示されます。
必要な設定情報を入力していきます。
*Name wss_client (任意の名前)
*Host wss:// (プルダウンメニューから選択)
*Host domain-name (mosquito インストール時設定)
*Port 8884 (mosquito インストール時設定)
Username username (mosquito インストール時設定)
Password password (mosquito インストール時設定)
SSL/TLS ON
SSL Secure OFF
CA or Self signed certificates 選択
CA File SRG_Root_X1.pem (mosquito インストール時設定)
以上、入力ができたら右上の Connect をクリックします。
図 18 右上に MQTT Broker に接続中であることを示す丸い電源ボタンが表示されます。
subscribe の設定
図 18 画面中央上の ＋ New Subcription をクリックします。
図 19 Subscribe 設定画面が表示されます。
*Topic MQTT topic ここでは MQTT topic と入力しました。
*QoS 0 デフォルトの 0 で構いません。
Confirm をクリックすると Subscribe の設定は完了です。
Publish の設定
図 20 中央下 Topic と表示されたところに MQTT topic と入力します。
“msg”:”hello” の表示を “title”:”test12345″ に書き換えます。(任意の文字列)
図 21 右下の Publish ボタンをクリックします。
画面右側に Publish したメッセージが表示されます。(背景緑、文字白)
画面中央に Subsclibe したメッセージがエコーバック表示されます。(背景灰、文字黒)
以上で MQTT over WebSocket with TLS ( wss:// ) の設定と Publish、Subsclibe の動作確認が完了しました。
MQTT Explorer・・・インストール
オープンソースの MQTT Explorer も使いやすい MQTT クライアントツールです。 Windows 11 PC にインストールして利用することができます。
図 22 MQTT Explorer ホームページを開きます。
図 23 画面を下にスクロール > Windows > Install
図 24 任意のフォルダにダウンロードします。
図 25 ダウンロードしたファイルをクリックするとインストールが始まります。
図 26 インストールが完了すると MQTT Explorer の設定画面が表示されます。
MQTT Explorer・・・MQTT over TLS
図 27 左上の丸い黄色 ＋ をクリックすると new connection 画面が開くので以下を入力します。
name mqtt_client_EX (任意の名前)
Validate certificae OFF
Encryption (tls) ON
Protocol mqtt:// (プルダウンメニューから選択)
Host domain-name (mosquito インストール時設定)
Port 8883 (mosquitto インストール時設定)
Username user-name (mosquito インストール時設定)
Password password (mosquito インストール時設定)
SAVE をクリックしてから ADVACED をクリックします。
図 28 Topic 欄に MQTT topic と入力します。
＋ADD をクリックします。
図 29 MQTT topic が一覧にあるのを確認してから右下の CERTIFICATES をクリックします。
図 30 証明書設定画面が開きます。
図 30 SERVER CERTIFICATE（CA) をクリックして ISRG_Root_X1.pemを参照します。
( mosquito インストール時の設定に合わせる )
図 31 BACK > BACK で戻り、念のため SAVE をクリックします。
図 31 CONNECT をクリックします。
図 32 Subscribe, Publish 操作画面が開きます。
図 33 右下の Topic 欄に MQTT topic と入力します。
json メッセージ入力欄に任意のメッセージを入力します。
今回は {“title”:”test12345″} と入力しました。
図 34 PUBLISH をクリックします。
左上 Subsclibe 欄に MQTT topic {“title”:”test12345″} がエコーバック表示されます。
以上で MQTT over TLS ( mqtts:// ) の設定と Publish、Subsclibe の動作確認が完了しました。
MQTT Explorer・・・MQTT over WebSocket with TLS
図 35 左上の丸い黄色 + をクリックすると new connection 画面が開きます。
図 36 必要な情報を入力していきます。
name wss_client_EX (任意の名前)
Validate certificae OFF
Encryption (tls) ON
Protocol ws:// (プルダウンメニューから選択)
Host host-name (mosquito インストール時設定)
Port 8884 (mosquito インストール時設定)
Basepath mqtt (MQTT WebSockets は path の指定が必要)
Username user-name (mosquito インストール時設定)
Password password (mosquito インストール時設定)
以上、入力ができたら SAVE > ADVANCED をクリックします。CERTIFICATES をクリックします。
図 37 Topic 任意の値を指定します。ここでは MQTT topic を使用します。
＋ADD をクリックして Topic 一覧に MQTT topic と表示されたことを確認します。
CERTIFICATES をクリックします。
図 38 SERVER CERTIFICATE（CA) をクリックして ISRG_Root_X1.pemを参照します。
( mosquito インストール時の設定に合わせる )
図 39 BACK > BACK で戻り、SAVE をクリックしてから CONNECT をクリックします。
図 40 Subscribe, Publish 操作画面が開きます。
図 41 右下の Topic 欄に MQTT topic と入力します。
json メッセージ入力欄に任意のメッセージ {“title”:”test12345″} を入力します。
図 42 PUBLISH をクリックすると左上の Subsclibe 欄に トピック名とメッセージ
MQTT topic {“title”:”test12345″} がエコーバック表示されました。
以上で MQTT over WebSocket with TLS ( wss:// ) の設定と Publish、Subsclibe の動作確認が完了しました。
IoT システム動作エミュレーション
MQTT Broker mosquitto をインストールした VPS と MQTT クライアントツール MQTTX、MQTT Explorer を使って最終目標である IoT システムの動作エミュレーションを行います。
Web ブラウザから VPS サーバー経由で IoT デバイス の監視・制御を行う想定です。（図 43 )
Web ブラウザには MQTT Explorer 、IoT デバイスには MQTTX を使用します。
監視
IoT デバイスの監視は IoTデバイスから Publish された情報を VPS サーバーを経由して Web ブラウザで Subsclibe します。
図 44 MQTT Explorer を立ち上げて wss_client_EX を選択します。
CONNECT をクリックして MQTT Broker に接続します。
右中央の Topic 欄に MQTT topic と入力します。
図 45 MQTTX を立ち上げて mqtts_client を選択します。
Connect をクリックして MQTT Broker に接続します。
メッセージ欄に {“device”:”IoT”,”client”:”MQTTX”} と入力します。
右下角の Publish ボタンをクリックします。
図 46 MQTT Explorer 左上の $SYS の下に Subscribe した結果が表示されます。
MQTT topic {“device”:”IoT”,”client”:”MQTTX”}
図 47 MQTTX 画面右側には Publish した履歴 (背景緑)、画面中央には エコーバックを
Subsclibe した履歴 (背景灰) が表示されます。
図 48 MQTT Explorer で Subscribe したメッセージ部分を拡大しました。
図 49 MQTTX で Publish したメッセージ分を拡大しました。
制御
IoT デバイスの制御は Web ブラウザから Publish された情報を VPS サーバーを経由して、IoTデバイスで Subsclibe します。
図 50 MQTTX を立ち上げて Connections から mqtts_client を選択します。
Connect をクリックすると MQTT Broker に接続されて赤い電源ボタンが表示されます。
中央の Subscliption 欄に図 13 で作成した MQTT topic があることを確認します。
図 51 MQTT Explorer を立ち上げて wss_client_EX を選択して CONNECT をクリックします。
MQTT Broker に接続されて右上に DISCONNECT が表示されます。
右中央の Topic 欄に MQTT topic と入力します。
json メッセージ入力欄に {“device”:”Web”,”client”:”MQTT Explorer”} と入力します。
PUBLISH をクリックします。
図 52 MQTTX 中央に Subsclibe したメッセージが表示されます。
{“device”:”Web”,”client”:”MQTT Explorer”}
図 53 MQTT Explorer 左上にはエコーバックを Subsclibe したメッセージが表示されます。
図 54 MQTTX で Subsclibe したメッセージの部分を拡大しました。
図 55 MQTT Explorer で Publish したメッセージのエコーバック部分を拡大しました。
以上で IoT システム動作エミュレーションが完了しました。
(YI)
コメント