Make

ESP8266 と Web アプリを MQTT で繋いでみた

Make
この記事は約7分で読めます。
スポンサーリンク

お久しぶりにです。

みやかわです。

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

スポンサーリンク

やってみたこと

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

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

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

MQTT とは

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

詳しくは公式を参照

MQTT の基本知識
この記事では、MQTT プロトコルを技術の面から紹介します。MQTT とは何か、MQTT が IoT アプリケーションに適している理由、そして MQTT を使用したアプリの開発を始める方法を説明します。

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

MQTT とはなんだったのか
MQTT とはなんだったのか. GitHub Gist: instantly share code, notes, and snippets.

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

MQTT over Websocket

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

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

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

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

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

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

Trace Context: MQTT protocol

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

無料で使えるブローカー

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

mqtt/mqtt.github.io
website. Contribute to mqtt/mqtt.github.io development by creating an account on GitHub.

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

つくってみた

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

動画再掲

MQTT テスト

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

Momijinn/Connect_Webapp_and_ESP8266_with_MQTT
Connect Web Application(Nuxt.js) and ESP8266 with MQTT(Message Queue Telemetry Transport). - 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) を使ってやってみた事例がなかったので挑戦してみました。

 

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

Momijinn/Connect_Webapp_and_ESP8266_with_MQTT
Connect Web Application(Nuxt.js) and ESP8266 with MQTT(Message Queue Telemetry Transport). - Momijinn/Connect_Webapp_and_ESP8266_with_MQTT

 

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

web_app
My neat Nuxt.js project

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

(Example)

マイコン

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

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

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

Momijinn/Connect_Webapp_and_ESP8266_with_MQTT
Connect Web Application(Nuxt.js) and ESP8266 with MQTT(Message Queue Telemetry Transport). - Momijinn/Connect_Webapp_and_ESP8266_with_MQTT

使用しているライブラリは 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";

Broker

上記でも記載したように Broker はAdafruit のものを使いました。

設定等々は下記のサイトにわかりやすく記載してあります。

AdafruitのMQTTブローカーを使う - Qiita
俺たちのAdafruit Adafruit(エイダフルート)は安い部品の通販サイトとしてよく見かけます。 社長がピンクの髪の女の人だというのをさっきググって知りました。 MQTTブローカーも提供しており、貧乏人のために無料枠もあ...

実際に使ってみて

ちょこっと触れた程度なので詳しく良い点や悪い点を書くことが難しいですが、Toipc でデータを送信、受信できることが大変良いと思います。

データの受信者側は、欲しい Topic を設定するだけで更新されるたびにデータを受け取ることができるのは便利です。

WebSocket のみでこのようなことを行うとサーバー側でいろいろと設定しなければならず、ちょっと面倒臭いですが、MQTT の場合はないようです。

まとめ

MQTT を使って Webアプリとマイコンを繋いでみました。

感触としては、 WebSocket よりも断然相互通信が楽です。

今後、IoT で遊ぶ機会があるときは MQTT を使っていきたいと思います。

 

以上、 WebアプリとマイコンをMQTT を繋いでみたレポでした。

コメント

タイトルとURLをコピーしました