M5StackでMQTT通信できなくて結局Wifiが繋がってなかっただけの話

買ってきたばかりの初めてのM5stack(M5Go)をWebの記事を参照しながら設定してなかなか思うように通信できなくて困った話を記録します。

#はじめに

##やりたかったこと
M5stack上で取得したセンサのデータをmosquito(MQTT)を使ってWifi経由でubuntu上に構成したNode-REDで受信したかった。

##結局は
結論から行くと"wifi connect"を入れることでAppモード時もネットワークにつながるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/187a20b4-23f0-6901-ebdb-ef528230a740.png)


##環境
- M5GO: ファームウェアバージョンV1.8.4
- env2センサ: M5GOに接続して気圧,気温,湿度を取得
- UIflow: V1.8.4（同じローカルのネットワークに存在するWindowsのFirefoxから[https://flow.m5stack.com/](https://flow.m5stack.com/)にアクセス）
- mosquitto: ブローカーホスト:ローカルネットワーク上のubuntuで稼働
- Node-RED: ローカルネットワーク上のubuntuでDocker内で稼働
- MQTTX: Version: v1.6.0 Windowsにインストール

#mosquitoの準備
ubuntuにmosquittoを設定します。

```console:tarminal
$ sudo apt install mosquitto mosquitto-clients #mosquittoをインストール
$ mosquitto #mosquittoブローカーの起動
```

#mosquittoの動作確認
ubuntuとWindowsの間で試しにメッセージを送信して動作を確認します。

ubuntu上のターミナルを新規に立ち上げてからサブスクライブを開始します。

```console:tarminal
$ mosquitto_sub -d -t topicA
```
WindowsのMQTTクライアントは[MQTTX](https://mqttx.app/)を利用しました。
ダウンロードの後インストールして起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/ad090132-b191-2abe-dcf0-d70ac89a38b5.png)
＋ボタンを押してNEWを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/7aba9a78-c0a4-07c4-21d6-8053c7aa5b13.png)

- Name: 任意の接続名称
- Client ID: 自動割り当てのままで可
- Host: ブローカーのIPアドレスを入力
- 右上のConnectを押して接続を保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/3c113417-8c74-fcd4-6a85-4c54a59deb01.png)

- New Subscriptionを押して登録画面を出します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/11b07518-3eec-a08d-8eae-8b6f0d40f077.png)

- Topic: ubuntu上でサブスクライブしたときのトピック名"topicA"を入力します。
- Confirmを押して登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/a8a0f01c-7903-c521-84a8-e2f8352a967c.png)

- 赤枠のところにトピック名"topicA"を入力します。
- 右下の送信ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/58da08b2-c43c-f5f1-cd31-6432b0bce4ce.png)

ubuntu上のターミナルに送信した内容が表示されてMQTTが動いていることは確認できました。

#Node-REDの準備
Dockerを使ってNode-REDを準備します。

```console:tarminal
$ docker run -it -p 1880:1880 --name mynodered nodered/node-red
```
2回目以降なら

```console:tarminal
$ docker start mynodered 
```
Firefoxから[http://127.0.0.1:1880](http://127.0.0.1:1880)にアクセスしてNode-REDに入ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/56881a2c-2ec0-ad4e-2390-a6d0d0a1db16.png)
ネットワークから"mqtt inノード"を配置してデバッグノードにつなぎます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/5d9abe06-be3b-4325-1bd9-65a2d6de79d2.png)
- サーバ: ブローカーのIPアドレスまたはホスト名
- トピック: トピック名（今回はtopicA）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/74cf77a8-91a8-43d3-4132-2e70e751d67f.png)

#Node-REDまでの接続確認
WindowsのMQTTXから送信ボタンを押してNode-REDのデバッグメッセージが出ることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/b678a5dc-462b-3746-85fb-4f5f9bf64254.png)

#M5stack(M5GO)の準備
ブラウザから[https://flow.m5stack.com/](https://flow.m5stack.com/)にアクセスします。
API Keyを聞かれますのでM5stack上に表示されるKeyを入力してUIflowからスケッチを描きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/52916984-a9a1-1ef9-b95e-62e1f1dfd489.png)

おもむろにRunを押します。
書き込み成功！
画面にも測定結果が表示された！

#繋がらない...
画面には測定結果が更新されていますし、動いているようだけれどもMQTTはうんともすんとも言わない。
開発元の動画、Youtubeの海外の方が上げてる動画、Google画像検索どれみても問題なさそうに見えました。
UIflowをクラウド経由で利用できているのだからネットワークにつながってないなんて思いもしてません。


2時間ほどの格闘の末AppモードでWifiが起動してない可能性に気が付きおうちのルーターの接続状況を見に行きます。


M5GOちゃんは接続リストに居ませんせんでした。
インターネットモードでUIflow利用中など接続中には"esp-XXXXXXXX"という名前でつながっています。

それらしいブロック"wifi connect(log in lcd true)"を"Network"から見つけました。
配置します。
"wifi connect(log in lcd true)"の場所はSetupのすぐあとの方がよいかもしれません。
"log in lcd"はお好みでfalseでも問題ないです。Wifi接続中の画面がLCD画面に出るか出ないかだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001078/708b36fb-a2fd-4c89-f51c-458e25c199f9.png)

そしてRun
あっさり成功。

#参考にさせていただいた情報源様
https://qiita.com/macole/items/c59dd0ef4b62f8253712
https://qiita.com/NWLab/items/cb3f434705708c40755b
https://take6shin-tech-diary.com/mqtt/