ESP8266 と Web アプリを MQTT で繋いでみた | Autumn-Color.com/ちょっとそこまで旅をします。

お久しぶりにです。

みやかわです。

巷で MQTT が流行っているらしいので触ってみたいなぁということで触ってみたことをつらつら書いてゆきます。

やってみたこと

Web アプリとマイコンを繋いだら面白そうだなぁということで、Web アプリから MQTT を通してマイコン( ESP8266 ) に繋いでいるサーボモータを制御することにしました。

今回つくってみたやつの動画

https://www.youtube.com/embed/4tJ3RWdavFs

00:05　Web アプリ側でブローカーに接続
00:15　Web アプリ側でブローカーに “1” を送信すると、サブスクライブしているマイコンが “1” を受け取り、サーボモータが左回転する
00:27　Web アプリ側でブローカーに “2” を送信すると、サブスクライブしているマイコンが “2” を受け取り、サーボモータが右回転する

MQTT とは

TCP/IP をベースに作られた通信プロトコル。初めは IBM が考案したが、現在は OASIS の標準となった。

詳しくは公式を参照

https://www.ibm.com/developerworks/jp/iot/library/iot-mqtt-why-good-for-iot/index.html

いろんな人が MQTT についてメリット・デメリットを書いていただいているのでそこらへんは割愛。個人的にわかりやすいと思ったやつを下記に貼っておきます。

https://gist.github.com/voluntas/e0a90f3e22316144ed3a

個人的に気になった機能である MQTT over Websocket についてちょこっと調べたことをまとめます。

MQTT over Websocket

Websocket でブローカーと通信ができるようになる機能です。

MQTT は Websockets と TCP に互換性があります。

なんでこの機能があるのかとググってみたのですが、明確な答えは見付からず。。。

WebSocket でもブローカーとつなげられれば接続できる幅が増えて便利だよねということなのか。

確かに現時点(2020/04/12)において、Webアプリでつなげるときに MQTT に対応しているブラウザがない※ ため、ブラウザで対応している WebSocket と互換性があるのはありがたいです。 ※ https://caniuse.com/#search=mqtt より

W3C に MQTT の仕様書(ドラフト) があるのでそのうちブラウザに対応されるんでしょうかね。

https://w3c.github.io/trace-context-mqtt/

MQTT に Websocket と互換性がある経緯を知っている人がいましたら教えてください。

無料で使えるブローカー

そのほか調べたこととして無料で使えるブローカーをまとめてあるサイトがあったので貼っておきます。

https://github.com/mqtt/mqtt.github.io/wiki/public\_brokers

MQTT のコミュニティサイトですね。

つくってみた

本記事の冒頭に動画を貼りましたが、Web アプリから MQTT を通してマイコン( ESP8266 ) に繋いでいるサーボモータを制御するものを作ってみました。

動画再掲

https://www.youtube.com/watch?v=4tJ3RWdavFs

ソースコードは GitHub に上げてあります

https://github.com/Momijinn/Connect\_Webapp\_and\_ESP8266\_with\_MQTT

概要

構成図は以下です。

Broker は Adafruit の Broker (io.adafruit.com) を使用しました。

選定理由として、無料で SSL で通信することができるためです。

Webアプリとマイコン(ESP8266)で双方向通信をしていることを確認したいため、topic は二つ作りました。

Web 側: userName/feed/web にデータを送信し, userName/feed/esp のデータを取得す
マイコン側: userName/feed/esp にデータを送信し, userName/feed/web のデータを取得する

Webアプリ

Webアプリ側は nuxt.js で作ってあります。

簡単にいい感じに Webアプリが作れるので大変便利です。

MQTT を使うために使用したライブラリは MQTT.js を使用しました。

選定理由は、npmjs.com にて一番人気だったことと、MQTT.js と nuxt.js(vue.js) を使ってやってみた事例がなかったので挑戦してみました。

メインでコーディングしていたところは下記の箇所です。

https://github.com/Momijinn/Connect\_Webapp\_and\_ESP8266\_with\_MQTT/blob/master/web\_app/pages/index.vue

一応このプログラムは github page に上げているので、わざわざビルドしなくても Webページ上で動いてるものを使うことができます。（動作確認しましたが正常に動作しない場合があります）

https://momijinn.github.io/Connect\_Webapp\_and\_ESP8266\_with\_MQTT/

SSL に対応しているブローカーを使用していれば接続できるかと思います。

(Example)

マイコン

ESP8266 とサーボモータ（sg60）を用意して、以下のように接続

Servo Motor -> ESP8266
Vcc -> VOUT
Ground -> GND
PWM -> IO15

プログラムは下記ものものになります。

https://github.com/Momijinn/Connect\_Webapp\_and\_ESP8266\_with\_MQTT/blob/master/mqtt\_arduino\_servo/mqtt\_arduino\_servo.ino

使用しているライブラリは knolleary/pubsubclient です。選定理由は、ESP8266/ESP32 マイコンに対応していためです。

Wifi のSSID/PASS やら MQTT のブローカーの設定やらを入れていただけると動きます。

// wifi ssid and wifi password
const char* ssid = "your_ssid";
const char* ssid_pwd = "your_password";

// mqtt
const char* server = "io.adafruit.com";
int port = 1883;
const char* user_name = "userName";
const char* key = "password";
const char* client_id = "client_id";
const char* send_topic = "userName/feeds/esp";
const char* recv_topic = "userName/feeds/web";