GUIベースのMQTTクライアントアプ「MQTT.fx」の使い方メモ

## 【追記】 有償版として提供する形になったようです
以下が公式のトップに書いてある文章で、ドイツの会社に移管されたような話が書かれています。
![Home.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/597fa480-0cb6-8888-bf7b-bb2982f2c33d.jpeg)

そして、その会社の MQTT.fx のページに進むと、以下のようなプランの記載があり、基本的に有償で提供されるものになっているようでした。
　●MQTT.fx® 5.0 – Softblade
　　https://softblade.de/en/mqtt-fx/
![プラン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/071b6a8b-de7b-ca0d-3fe4-a06004919871.jpeg)

以下の記事などを見て、代替ツールを探して試してみようと思います。
　●MQTTクライアントツールまとめ - Qiita
　　https://qiita.com/emqx_japan/items/44cd01d1289f04b733e1

## はじめに
過去に MQTT を使った作品を試作する途中で利用したり、イベントでの LT 登壇や Qiita に投稿した記事でも登場させていた「[MQTT.fx](https://mqttfx.jensd.de/)」について、簡単な使い方のメモです。

例えば、以下の LT用資料や Qiita の記事に書いたりしていました。

●Scratch で IoT（MQTT）やってみた 〜 MQTT用の拡張機能を自分で実装 〜 / IoTLT vol.66 - Speaker Deck
　https://speakerdeck.com/you/iotlt-vol-dot-66

●MQTTブローカー shiftr.io の新バージョンをチェックしてみる！ 〜デスクトップアプリ編〜 - Qiita
　https://qiita.com/youtoy/items/8cbc9e6fa1cd46ca2c3c

## 導入

[公式のダウンロードページ](https://mqttfx.jensd.de/index.php/download)から、ご自身の OS にあったファイルをダウンロードして、インストールしてください。

## 接続先の設定

クライアントの接続先となる MQTTブローカーに関する設定を行います。
まずは、以下の歯車アイコンを押します。

![MQTT_fx_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9349b111-8aa3-cc58-ff69-9a808ee5c45b.jpeg)

そして、設定画面の左下にあるプラスマークを押しましょう。

![MQTT.fx_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/53104767-4e41-bd6e-4ca1-e63f9f056d23.jpeg)

以下、接続先が MQTTブローカーであることを前提に書きます。
最初の画面で設定を変更するとしたら、以下の箇所になると思います。

「Profile Name」は、自分が判別しやすい名前を何かつけてください。
「Broker Address」は、接続先の MQTTブローカーの IPアドレスや接続先となる URL を入力してください。
「Broker Port」は、接続先の MQTTブローカーが特殊なポートを使う場合でなければ、デフォルトの 1883 で問題ないですが、もし別のポートを使うような場合は、それに合わせて変更します。
「Client ID」は、そのままでも利用できますが、テキストボックス右にある Generateボタンを押して、他とぶつからなそうな ID を生成しておくのが安全かもしれません。

![MQTT.fx_03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e58b5dea-1e4a-93e9-9ee1-db1777a877c5.jpeg)

もし、MQTTブローカーで認証を必要としないようであれば、これだけの設定でも大丈夫です。
MQTTブローカーサービスを利用する場合に、そこでユーザ名・パスワードを必要とするサービスである場合は、画面の真ん中あたりにある「User Credential」を押し、その下に出てくる「User Name」・「Password」にそれぞれ情報を入力してください。

![MQTT.fx_04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2e3bc024-bf5a-217c-e680-7b2d4b929064.jpeg)

その他にも設定可能な項目はありますが、まずは上記の設定項目を覚えておけば、十分な場合もけっこうあります。

設定が終わったら、画面右下の「OK」や「Apply」を押して、設定した内容を反映させましょう。

## 接続先の設定

設定を作成して最初の画面に戻ったら、以下の画像の赤枠で囲んだ部分を押し、その中で自分が利用した設定の Profile Name のものを選びます。

![MQTT.fx_05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9f3063f4-ec13-8d85-0fd5-17b25e09964c.jpeg)

何らか、利用可能な MQTTブローカーの設定が行えた状態になったら、その後に画面上部の「Connect」を押して、MQTTブローカーに接続してください。

## メッセージの送受信（Pub/Sub）

### Subscribe
まずは、Subscribe のほうを設定してみます。

現在、上記の手順で MQTTブローカーにつながった状態にはなっているため、Subscribe のための Topic を設定します。画面の上部にある Publish の1つ右の「Subscribe」を押し、その後、以下の画像の赤枠で囲んだ部分に Topic を入力します。その後、Topic を入力したテキストボックスの右にある Subscribe を押すと、設定した Topic で Subscribe の処理が始まります。

![Sub01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e70fef98-ca66-db2c-4786-adf4438b9644.jpeg)

以下は Topic に「test」を設定している状態です。
Topic を設定し、Subscribe ボタンを押すと、以下の赤枠で囲んだ部分の表示が追加されます。

![Sub02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8ded40a9-e62b-a8b3-b21d-28a0c7519f59.jpeg)

あとは、MQTTブローカーへの Publish が行われて、その際に Topic が「test」となっているものであれば、それを受信できます。Publish側も、MQTT.fx で試してみましょう。

### Publish
それでは、上記で設定した Topic の「test」を設定して、Publish を行ってみます。

画面の上部にある Publish を押し、その後、以下の赤枠で囲まれた部分に Topic を入力します。
また、緑の枠で囲んだ部分に送信するテキストを入力します。
そして、Topic を入力したテキストボックスの右の Publish を押すと、Publish が実行されます。

![Pub01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a25cce99-df2e-3a40-4a40-dddbcf2ebec2.jpeg)

以下は、Topic に「test」を設定し、「Publishのテスト」という文字を Publish する準備をした状態です。
（使い方がぱっと見で分かりづらいところです・・・）

![Pub02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8a7639e3-10ae-5b4f-4ae6-6f86dd3dd21f.jpeg)

そして、Topic を入力したテキストボックス横の Publish を押してみてください。
見た目では、何も起こってないように見えますが、Subscribe のほうが変化しているかどうか見てみてください。

表示を切り替えてみると、以下の赤矢印や赤枠で示した部分が変化しています。
これは、先ほど Subscribe で Publish と同じ Topic（この例では「test」）を設定していたため、 Publish した内容を受信できている、という状態です。

![PubSub.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/46709103-74fd-2c3e-181f-b8ced72f15c0.jpeg)

これで、MQTTブローカー に接続して Pub/Sub を行うことができました。