Mosquitto で MQTT 双方向通信　(6)システム全体動作確認

2026.02.20

Web ブラウザから IoT デバイスの監視と制御

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 に多くの試行錯誤をともなったので整理して記録を残します。

ゴール

図 1　Web ブラウザ IoT デバイス 間 MQTT 通信

・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 デバイスの監視と制御ができることを確認します。

前提条件

・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)
・これまでの投稿すべてについて動作確認ができていること。
　　(1)Mosquitto を VPS にインストール
　　(2)Web ブラウザと IoT 間 動作エミュレート
　　(3)Web ブラウザ ソフトウエアコード
　　(4)IoT デバイスハードウエア
　　(5)IoT デバイス ソフトウエアコード

システム構成

システムの構成は上記 図 1 を参照します。　構成要素の詳細は下記に示す投稿を参照します。

MQTT Broker
　(1)Mosquitto を VPS にインストール
Web ブラウザ
　(3)Web ブラウザ ソフトウエアコード
IoT デバイス
　(4)IoT デバイスハードウエア
　(5)IoT デバイス ソフトウエアコード

データフォーマット

このシステムでは JSON 形式の データフォーマットを使用します。( 図 2 )

図 2

(a)時刻（ 23 桁）
　　　フォーマットは ISO8601 に準じています。
(b)クライアント情報（ 7 桁）
　　　”BROWSER”・・・Ｗｅｂ ブラウザ
　　　”ESP32__”・・・IoT デバイス
(c)IoT デバイス IO19 端子の状態（ 4 桁）
　　　”HIGH”・・・IO19 端子=HIGH
　　　”LOW_”・・・IO19 端子=LOW
　　　”NULL”・・・Web ブラウザから送信する場合は “NULL” を設定しています。
(d)Web ブラウザからの制御信号（ 4 桁）
　　　”ON__”・・・ON ボタン押下信号
　　　”OFF_”・・・OFF ボタン押下信号
　　　”NULL”・・・IoT デバイスから送信する場合は “NULL” を設定しています。

動作確認手順

1. Web ブラウザ立ち上げ
・(3)Web ブラウザ ソフトウエアコード で作成した HTML ファイルを開きます。（図 3 ）
　　　　　　　　　　　　　例）https://ドメイン名/OOO.html

図 3

2. IoT デバイス 立ち上げ
・PC で Visual Studio Code を立ち上げます。
・ (5)IoT デバイス ソフトウエアコード で作成したコードを開きます。
・USB ケーブルを使って IoT デバイスを PC に接続します。（図 4 ）

図 4


・Visual Studio Code > アリさんマーク > PROJECT TASKS > esp32dev > Monitor
・C++ が実行されて Visual Studio Code 画面下部にターミナル出力が表示されます。（図 5）
・Wi-Fi 接続確立、MQTT 接続確立、subscribe 開始のメッセージが表示されます。
・publish selected at loop・・・C++起動時自動的に publish したメッセージが表示されます。
・Message received on topic: MQTT topic・・・publish のループバックが表示されます。

* 実行するタスク: C:\Users\tatsu\.platformio\penv\Scripts\platformio.exe device monitor –environment esp32dev — Terminal on COM9 | 115200 8-N-1 — Available filters and text transformations: debug, default, direct, esp32_exception_decoder, hexlify, log2file, nocontrol, printable, send_on_enter, time — More details at https://bit.ly/pio-monitor-filters — Quit: Ctrl+C | Menu: Ctrl+T | Help: Ctrl+T followed by Ctrl+H ets Jul 29 2019 12:21:46 rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT) configsip: 0, SPIWP:0xee clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00 mode:DIO, clock div:2 load:0x3fff0030,len:1184 load:0x40078000,len:13192 load:0x40080400,len:3028 entry 0x400805e4 ESP32 ⇔ MQTT Broker 間通信 通信プロトコル： MQTT over TLS Connecting to WiFi E (617) wifi:Association refused temporarily, comeback time 1999 mSec ……. Connected to WiFi WiFi connected. *IP address: 192.168.12.23 Connecting to MQTT Broker as esp32-client-CC:7B:5C:E9:01:A0… Connected to MQTT broker subscribe started at setup publish selected at loop {“date”:”2026-02-16T17:29:10.000″,”client”:”ESP32__”,”state”:”HIGH”,”control”:”NULL”} End_of_Publish_+++++++++++++++++++++++++++++++++++++++++++++++++ Message received on topic: MQTT topic {“date”:”2026-02-16T17:29:10.000″,”client”:”ESP32__”,”state”:”HIGH”,”control”:”NULL”} End_of_mqttCallback———————————————

図 5

・Web ブラウザには subscribed 窓に IoT デバイスからのメッセージが表示されます。（図 6）
・”client”:ESP32__” より送信クライアントは ESP32__（IoT デバイス）だとわかります。
・”state”:”HIGH” より IoT デバイス IO19 端子の状態は HIGH であることがわかります。

図 6

3. Web ブラウザ ON ボタンクリック
・published 窓に送信したメッセージ、subscribed 窓にそのエコーバックが表示されます。
・送信クライアントは Web ブラウザであることが “client”:”BROWSER” からわかります。(図 7)
・送信した制御信号は ON であることが “controll”:”ON__” からわかります。

図 7

IoT デバイスは赤の LED が点灯します。( 図 8 )

図 8

・ターミナル出力には受信したメッセージが表示されます。( 図 9 )
・”client”:”BROWSER” より Web ブラウザからのメッセージであることがわかります。
・”control”:”ON__” より制御信号が ON　であることがわかります。

Message received on topic: MQTT topic {“date”:”2026-02-16T17:32:25.609″,”client”:”BROWSER”,”state”:”NULL”,”control”:”ON__”} ON___pin21=HIGH End_of_mqttCallback———————————————

図 9

4. Web ブラウザ OFF ボタンクリック
・published 窓に送信したメッセージ、subscribed 窓にそのエコーバックが表示されます。
・送信クライアントは Webブラウザであることが “client”:”BROWSER”からわかります。(図 10)
・送信した制御信号は OFF であることが “controll”:”OFF_” からわかります。

図 10

IoT デバイスは赤の LED が消灯して緑の LED が点灯します。( 図 11 )

図 11

・ターミナル出力には受信したメッセージが表示されます。( 図 12 )
・”client”:”BROWSER” より Web ブラウザ からのメッセージであることがわかります。
・”control”:”OFF_” より制御信号が OFF であることがわかります。

Message received on topic: MQTT topic {“date”:”2026-02-16T17:32:52.600″,”client”:”BROWSER”,”state”:”NULL”,”control”:”OFF_”} OFF__pin2=HIGH End_of_mqttCallback———————————————

図 12


5. IoT デバイス入力端子 IO19　HIGH → LOW
・IoT デバイス IO19 端子（白のリード線）を HIGH から LOW へ接続を変更します。(図 13 )

図 13

・ターミナル出力には送信したメッセージとエコーバックのメッセージが表示されます。(図 14 )
・”client”:”ESP32__” よりクライアントは ESP32__（IoT デバイス）だとわかります。
・ “state”:”LOW_” より IO19 端子の状態が LOW に変化したことがわかります。

publish selected at loop {“date”:”2026-02-16T17:33:49.000″,”client”:”ESP32__”,”state”:”LOW_”,”control”:”NULL”} End_of_Publish_+++++++++++++++++++++++++++++++++++++++++++++++++ Message received on topic: MQTT topic {“date”:”2026-02-16T17:33:49.000″,”client”:”ESP32__”,”state”:”LOW_”,”control”:”NULL”} End_of_mqttCallback———————————————

図 14

・ブラウザの subscribed 窓にメッセージが表示されます。(図 15 )
・”client”:”ESP32__” より IoT デバイスから届いたメッセージであることがわかります。
・”state”:”LOW_” より IoT デバイス IO19 端子が LOW に変化したことがわかります。

図 15

6. IoT デバイス入力端子 IO19　LOW → HIGH
・IoT デバイスの IO19 端子（白のリード線）を LOW から HIGH へ接続を変更します。( 図 16)

図 16

・ターミナル出力には送信したメッセージとエコーバックのメッセージが表示されます。(図 17)
・”client”:”ESP32__” よりクライアントは ESP32__（IoT デバイス）だとわかります。
・ “state”:”HIGH” より IO19 端子の状態が HIGH に変化したことがわかります。

publish selected at loop {“date”:”2026-02-16T17:34:34.000″,”client”:”ESP32__”,”state”:”HIGH”,”control”:”NULL”} End_of_Publish_+++++++++++++++++++++++++++++++++++++++++++++++++ Message received on topic: MQTT topic {“date”:”2026-02-16T17:34:34.000″,”client”:”ESP32__”,”state”:”HIGH”,”control”:”NULL”} End_of_mqttCallback———————————————

図 17

・ブラウザの subscribed 窓にメッセージが表示されます。(図 18 )
・”client”:”ESP32__” より IoT デバイスから届いたメッセージであることがわかります。
・”state”:”HIGH” より IoT デバイス IO19 端子が HIGH に変化したことがわかります。

図 18


以上、Web ブラウザから IoT デバイスの監視と制御ができることが確認できました。

MQTT 用語集

MQTT（Message Queuing Telemetry Transport）
IoTデバイス向けの軽量なパブリッシュ/サブスクライブ型通信プロトコルです。

  1. 基本的な登場人物
    Broker（ブローカー）
    メッセージの仲介役となるサーバー。送信者から届いたメッセージを、適切な受信者へ振り分けます。
    Client（クライアント）
    ブローカーに接続するデバイスやアプリ。送信側（Publisher）と受信側（Subscriber）の両方になり得ます。
    Publisher（パブリッシャー）
    メッセージを送信する側のクライアント。
    Subscriber（サブスクライバー）
    メッセージを受信するために、特定のトピックを購読（登録）する側のクライアント。
  2. メッセージ通信の概念
    Topic（トピック）
    メッセージを分類するためのパス（例：home/living/sensor）。受信側はこのトピックを指定して購読します。
    Payload（ペイロード）
    メッセージの実データ部分。中身はテキストやバイナリなど任意です。
    Publish（パブリッシュ）
    クライアントが特定のトピックに対してメッセージを送信すること。
    Subscribe（サブスクライブ）
    クライアントが特定のトピックを受け取れるようにブローカーに登録すること。
  3. 品質と信頼性の設定
    QoS（Quality of Service）
    メッセージの到達保証レベルです。
    QoS 0 (At most once)
    最高1回。届かなくても再送せず、最も軽量。
    QoS 1 (At least once)
    最低1回。必ず届くが、重複する可能性がある。
    QoS 2 (Exactly once)
    正確に1回。重複なく確実に届ける、最も信頼性が高い。
    Keep Alive（キープアライブ）
    クライアントとブローカーの接続が維持されているか確認するための定期的な信号。
    LWT（Last Will and Testament / 遺言）
    クライアントが予期せず切断された際、ブローカーが代わりに他者へ通知するメッセージ。

    Google 検索結果を引用させていただきました。

リンク

Mosquitto で MQTT 双方向通信　
(1)Mosquitto を VPS にインストール
(2)Web ブラウザと IoT 間 動作エミュレート
(3)Web ブラウザ ソフトウエアコード
(4)IoT デバイスハードウエア
(5)IoT デバイス ソフトウエアコード
(6)システム全体動作確認

(YI)　[完]

コメント

error: Content is protected !!
タイトルとURLをコピーしました