Node-RED MCU Editionでネットワーク接続(HTTP, MQTT)してみた。

# はじめに

Node-RED MCU Editionの環境構築、簡単なフロー、Lチカの動作確認まで終わったので、ついにネットワーク接続(HTTP, MQTT)を試してみます。

環境構築と動作確認については以下を参照してください。

https://qiita.com/kitazaki/items/15cba2f4622bf3682083

GPIOの動作確認については以下を参照してください。

https://qiita.com/kitazaki/items/bac2b860b7d26fb450f4

# 前提条件

- Intel MacBook Pro (2017)
- macOS Big Sur (バージョン 11.7)
- M5Stick-C
  - ボタンA (GPIO37)

<img src="https://camo.qiitausercontent.com/b6894130d783cc6bb98b0f30a6446db07a155899/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f37323437392f31323937616331382d353261382d313534322d323566362d6362356237376365353132662e706e67">

- HTTPサーバ (Node-RED)
- MQTTサーバ (Aedes MQTT broker)

![スクリーンショット 2022-10-10 21.23.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/380ddb5b-78f3-c8f9-87f6-1f2740a2c17c.png)

M5Stick-Cを使用して、ボタンAを押したらHTTPリクエストを送信する、または、MQTTパブリッシュする動作をさせます。

# Node-REDフローを作成する (HTTPサーバ, MQTTサーバ)

MQTTサーバはノードの追加が必要になります。
右上のメニューから「パレットの管理」→「ノードを追加」タブを選択します。
「ノードを検索」のフォーム入力から以下のノードを入力し、「ノードを追加」ボタンを押します。
ポップアップメッセージが表示されますので、「追加」を選択します。

- node-red-contrib-aedes

ノードの追加が終わったあと、以下のフローを作成します。

![10-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/07bbc705-9c86-98bb-ab91-39feee829a59.jpeg)

(サンプルフロー)

```json:flows.json
[{"id":"f2cdbff0e8dc76fd","type":"tab","label":"フロー 1","disabled":false,"info":"","env":[]},{"id":"c2ec89c692ba2f71","type":"inject","z":"f2cdbff0e8dc76fd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":180,"wires":[["81981d58f7d14f69"]]},{"id":"81981d58f7d14f69","type":"debug","z":"f2cdbff0e8dc76fd","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":440,"y":180,"wires":[]},{"id":"aa79e518924f43b8","type":"http in","z":"f2cdbff0e8dc76fd","name":"","url":"/status","method":"get","upload":false,"swaggerDoc":"","x":250,"y":60,"wires":[["9a82e00c0cad5ccc","7b415c82f15e924c"]]},{"id":"9a82e00c0cad5ccc","type":"change","z":"f2cdbff0e8dc76fd","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"status\":\"ok\",\"message\":\"health endpoint\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":60,"wires":[["77a70795471228f6"]]},{"id":"77a70795471228f6","type":"http response","z":"f2cdbff0e8dc76fd","name":"","statusCode":"","headers":{},"x":650,"y":60,"wires":[]},{"id":"7b415c82f15e924c","type":"debug","z":"f2cdbff0e8dc76fd","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":440,"y":100,"wires":[]},{"id":"db538d38c6f04527","type":"aedes broker","z":"f2cdbff0e8dc76fd","name":"","mqtt_port":1883,"mqtt_ws_bind":"port","mqtt_ws_port":null,"mqtt_ws_path":"","cert":"","key":"","certname":"","keyname":"","dburl":"","usetls":false,"x":430,"y":300,"wires":[["f3c22c6272ac56da"],["a3238c0710b0a66a"]]},{"id":"f3c22c6272ac56da","type":"debug","z":"f2cdbff0e8dc76fd","name":"debug 3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":660,"y":280,"wires":[]},{"id":"a3238c0710b0a66a","type":"debug","z":"f2cdbff0e8dc76fd","name":"debug 4","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":660,"y":320,"wires":[]},{"id":"bd60d3fcf2f3eeda","type":"mqtt in","z":"f2cdbff0e8dc76fd","name":"","topic":"/test","qos":"2","datatype":"auto-detect","broker":"61e4e665807b8674","nl":false,"rap":true,"rh":0,"inputs":0,"x":470,"y":380,"wires":[["276f14da304fe886"]]},{"id":"b1413c150ea3a010","type":"mqtt out","z":"f2cdbff0e8dc76fd","name":"","topic":"/test","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"61e4e665807b8674","x":650,"y":440,"wires":[]},{"id":"6859c48a64c86d84","type":"inject","z":"f2cdbff0e8dc76fd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":440,"y":440,"wires":[["b1413c150ea3a010"]]},{"id":"276f14da304fe886","type":"debug","z":"f2cdbff0e8dc76fd","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":660,"y":380,"wires":[]},{"id":"61e4e665807b8674","type":"mqtt-broker","name":"","broker":"localhost","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"userProps":"","sessionExpiry":""}]
```

# Node-REDフローを作成する (Node-RED MCU Edition)

## HTTPクライアントの場合

![10-2-1_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/444fab85-bd4f-43fb-0cce-43e7f59033fb.jpeg)

### 「rpi - gpio in」ノード　・・Button Aノード

- BCM GPIO → 37を入力します
- デバウンス → 0を入力します
- 名前 → Button Aと入力します

![スクリーンショット 2022-10-10 21.46.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/300b4998-2cbe-3faa-6731-6acdbcc5875d.png)

### 「switch」ノード

「rpi - gpio in」ノードはM5Stick-CのボタンAを押した時に「0」、離した時に「1」を出力します。

- 入力が「0」と一致する場合 → 1へ出力します
- 入力が「1」と一致する場合 → 2へ出力します

![スクリーンショット 2022-10-10 21.47.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/ffded0f4-5d22-072b-5e4e-3ac6f7da3e6d.png)

### 「http request」ノード

- URL → HTTPサーバ(Node-RED)のURLを入力します (例. HTTP://ホスト名/パス 、または、HTTP://IPアドレス/パス )
  - 2022年10月11日時点で、HTTPS:// はサポートされていません。
- コネクションkeep-aliveを有効化 → チェックボックスにチェックを入れます
- Disable strict HTTP parsing → チェックボックスにチェックを入れます

![10-2-10_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/b89fe9cb-808b-66c1-c057-dc669ecb310d.png)


## MQTTクライアントの場合

![10-3-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/83774b70-d9ef-812b-0d7d-60fd7a53206f.jpeg)

### 「rpi - gpio in」ノード　・・Button Aノード

- BCM GPIO → 37を入力します
- デバウンス → 0を入力します
- 名前 → Button Aと入力します

![スクリーンショット 2022-10-10 21.46.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/300b4998-2cbe-3faa-6731-6acdbcc5875d.png)

### 「mqtt out」ノード

- サーバ → 編集ボタン(鉛筆マーク)を押して、MQTTサーバ(Aedes MQTT broker)のホスト名とポート番号を入力します
- トピック → /testを入力します (MQTTサーバのトピックと合わせる)

![10-4-1_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8c9692e6-ff3d-a388-4362-ebfef7a0b1fa.jpeg)

![10-4-2_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a96d5af7-f340-0425-b07e-43f1e205868a.jpeg)

# M5Stick-Cへインストールする 

## node-red-mcu-pluginを使用する場合

ネットワーク接続するためにはWi-FiのSSIDとパスワードを指定する必要があります。

### 「MCU」タブの設定をする

- 「Show more options...」を押します

![20-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/b4bf37a5-3c22-793f-b099-194e96b5f615.jpeg)

- Wi-FiのSSIDとパスワードを設定します

(2022/11/3 更新)

![mcu-wifi-1_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/051dbd45-d674-12a0-85ae-3df76334026c.jpeg)

### Node-REDフローをMCUで実行する

「Build」を押すとNode-REDフローが実行されます。
「Console Monitor」タブを押すと、ターミナル画面でビルド実行の様子を確認できます。
ビルド完了後、実機(M5Stick-C)へ書き込みまで行われます。

![20-4_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/4acacb27-9321-72dc-fa25-6239ca2f0457.jpeg)

![20-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d3c1773b-0794-e4ae-dbaa-3999cbbe73c2.jpeg)

## Node-RED MCU Editionを使用する場合

ネットワーク接続するためにはmcconfigコマンドの引数でWi-FiのSSIDとパスワードを指定する必要があります。

### Node-REDフローをJSON形式でエクスポートする

- 右上のメニューから「書き出し」を選択します
- 「JSON」タブを選択します
- 「書き出し」を選択します
- クリップボードにNode-REDフローがJSON形式でコピーされます

### Node-REDフロー(JSON形式)をflows.jsonファイルに保存する

node-red-mcu ディレクトリのflows.jsonファイルに保存します。

### Node-REDフローをMCUで実行する

実機(M5Stick-C)で動かします。

- ssid → Wi-FiのSSIDを指定します
- password → Wi-Fiのパスワードを指定します

```bash
$ UPLOAD_PORT=/dev/cu.usbserial-C152AAC745 mcconfig -d -m -p esp32/m5stick_c ssid="SSID" password="パスワード"
```

(実行例: ssidがwifi-ap、passwordが12345678の場合)

```bash
$ UPLOAD_PORT=/dev/cu.usbserial-C152AAC745 mcconfig -d -m -p esp32/m5stick_c ssid="wifi-ap" password="12345678"
```

※ シリアルボート番号は環境によって異なりますので、以下のコマンドで確認します。

```bash
$ ls /dev/cu.*
```

正常にWi-Fiへ接続されると、xsbugデバッガーのLOGにSSIDとIPアドレスが表示されます。
M5Stick-CのボタンAを押すと、HTTPリクエストが送信され、xsbugデバッガーのMESSAGESに応答結果が表示されます。

![10-5-1_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e5a047fc-233f-3c4e-6a49-3ec251f140c3.jpeg)

![11-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/9b67991b-90ab-f77e-36e0-d3c736563ca8.jpeg)

### 参考

ボタンAを押した時、および、離した時に連続でHTTPリクエストを送信した場合、8〜9回くらい実行した後、M5Stick-Cの動作が停止する事象が発生しました。
そのため、switchノードを使用して、ボタンAを押した時だけHTTPリクエストを送信するフローにしています。

![10-6-1_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/680f6dd2-8907-ff85-e517-3e71a102f324.jpeg)

MQTTリクエストを送信する場合はM5Stick-Cの動作が停止する事象は発生しなかったので、シンプルなフロー(ボタンAを押した時、および、離した時にMQTTパブリッシュするフロー)にしています。