Blynk の「Device MQTT API」を試す： プレイグラウンドでアプリ上の操作の結果を得る

最近、以下の内容を試していた「Blynk」に関する記事です。

- [【解決】Raspberry Pi Pico W ＋ MicroPython で BlynkLib.py を使った時のエラーに関する対処メモ - Qiita](https://qiita.com/youtoy/items/ac1510b76b43936c33fb)
- [Blynk の「Device HTTPS API」を使ってデバイスの接続状態・ピンの値を取得する - Qiita](https://qiita.com/youtoy/items/49726427bf3797fcf518)

今回、その Blynk関連でリアルタイム通信に便利そうな「Device MQTT API」を試します。

●Device MQTT API | Blynk Documentation
　https://docs.blynk.io/en/blynk.cloud-mqtt-api/device-mqtt-api

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b87340df-0e96-8bd4-f78f-06c29deb7af7.png)

MQTT は、これまでガジェットと PC やスマホとの連携など、デバイス間で IoT の通信をするのに以下の記事にあるように活用してきたものなので、Blynk との組み合わせでも使えるようにしたいと思いました。

●「MQTT user:youtoy」の検索結果 - Qiita
　https://qiita.com/search?q=MQTT%20user%3Ayoutoy&sort=created

## サンプル
Blynk で Device MQTT API を使う際に、参考になるサンプルがいろいろあるようです。

その中で、自分が気になったもののリンクをピックアップしてみます。

- HTML ＋ JavaScript
   - [Blynk-MQTT-Samples/HTML5_WebSocket at main · Blynk-Technologies/Blynk-MQTT-Samples](https://github.com/Blynk-Technologies/Blynk-MQTT-Samples/tree/main/HTML5_WebSocket)
- Arduino用
   - [Blynk-MQTT-Samples/Arduino_Blynk_MQTT at main · Blynk-Technologies/Blynk-MQTT-Samples](https://github.com/Blynk-Technologies/Blynk-MQTT-Samples/tree/main/Arduino_Blynk_MQTT)
- MicroPython用
   - [Blynk-MQTT-Samples/MicroPython at main · Blynk-Technologies/Blynk-MQTT-Samples](https://github.com/Blynk-Technologies/Blynk-MQTT-Samples/tree/main/MicroPython)
- Node-RED用
   - [Blynk-MQTT-Samples/Node-RED at main · Blynk-Technologies/Blynk-MQTT-Samples](https://github.com/Blynk-Technologies/Blynk-MQTT-Samples/tree/main/Node-RED)

自分にとっては、よく使う環境用のものが様々あり、使えるようになれば活用する機会が多そうです。

## 設定周り
### MQTTブローカーのエンドポイントの設定
Blynk の Device MQTT API は、通常 MQTT を利用する時と同様に MQTTブローカーへの接続が必要です。

そのエンドポイントの設定をまずは見てみます。設定に関する情報は、以下のページを見ると良さそうです。

●Authentication | Blynk Documentation
　https://docs.blynk.io/en/blynk.cloud-mqtt-api/device-mqtt-api/authentication

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/38707365-7138-4135-50cf-b1807f670bb2.png)

ポート番号を含めた接続先を、テキストで書き出してみます。

- Broker: blynk.cloud
- TCP port: 1883
- Secure SSL/TLS port: 8883
- Secure WebSocket ports: 443, 9443

上記を見ると、MQTT over WebSocket と MQTT over TCP の両方が使えるようです。
そして、それらを使う場合のポート番号は、MQTT でよくある番号になっているようです。

### MQTT のクライアント側の認証用設定
次に、MQTT のクライアント側で用いる認証用の設定について見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c6cc9d72-38b9-9d7d-8496-c9c8e3e22682.png)

以下、クライアント側で使う認証用の情報をテキストで書き出したものです。

- ClientID: "" (or any UTF-8 encoded string, up to 64 characters long)
- Username: "device"
- Password: 【自分のトークン】
- Keepalive: 45 seconds (recommended)
- Clean Session: True

ClientID は上記の規則を守っていれば、任意の内容にできるかと思うので、ポイントになるところは「Username」「Password」になりそうです。Username」は固定の文字列で、「Password」は自分のトークンを用いるというやり方になるようです。

## お試しで使えるクライアント（プレイグラウンドのページ）
あとは、実際に MQTT での通信を試していきます。

それを試す環境についてドキュメントの情報を見ていると、簡単に使えるクライアント（テスト用環境？）が用意されているようでした。具体的には、以下のページで「online playground page」と書かれているところです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/42f0a392-6815-e87b-c28a-34bbb522172d.png)

そのリンク先に進むと、以下のプレイグラウンドのページが表示されます。

●Blynk MQTT client
　https://html-preview.github.io/?url=https://github.com/Blynk-Technologies/Blynk-MQTT-Samples/blob/main/HTML5_WebSocket/WebSocket-Blynk-MQTT-minimal.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/22a7a96c-ed13-848f-443b-99a8d5de4270.png)

このページで、トークンを入力して Connectボタンを押すと、以下のように MQTTブローカーへの接続ができました。

### V1ピンの ON/OFF 時の通信を受けとる
そして、接続後に Blynk のスマホアプリで設定済みだった「V1」ピンの ON/OFF の操作を試しました。そうすると、以下の内容が出力されました。

```
Connecting to wss://blynk.cloud:443/mqtt
。。。
Got downlink/ds/Integer V1, value: 1
Got downlink/ds/Integer V1, value: 0
```

V1ピンの ON/OFF の切り替わりが、1/0 の値として得られているようです。
また、その時の MQTT のトピックとメッセージは、「Got」の後の「downlink/」で始まる部分のようです。

プレイグラウンドのおかげで、簡単に動作確認を行うことができました。

## トピック
MQTT で通信する際に必要な「トピック」について、公式ドキュメントの情報を見ておきます。

●Topic Structure | Blynk Documentation
　https://docs.blynk.io/en/blynk.cloud-mqtt-api/device-mqtt-api/topic-structure

今回のお試しは、クライアント側でデータを受けとる側だったので、関連するトピックの情報は以下の Downlink になりそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0f016f39-ab96-76b3-d379-cb33ccc3590f.png)

以下を見ると Uplink もあるので、クライアント側から状態変化を起こすこともできそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9ec0029b-30d9-b92c-314f-4419580d123e.png)

V1 ピンを MQTT で変えるというのも、「ds/【DATASTREAM】」を使うとできそうな気がします。

## お試しで使えるクライアント（プレイグラウンドのページ）の続き
### V1ピンの ON/OFF を MQTT で変える
上記の話について、具体的には以下のように「トピック：ds/Integer V1」「ペイロード：0（または 1）」をパブリッシュすると、スマホアプリ側に変化を生じさせることができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7ddcc899-8736-75a3-4040-70641393e3ec.png)

## おわりに
今回はプレイグラウンドのおかげで、簡単にお試しを進められました。
今後は、過去にやったように自前で MQTT のクライアントを用意して、アプリやデバイスとの連携を試せればと思います。