ESP32のWiFiネットワークとWeb通信に関するメモ　その２

2018年8月23日2018年11月12日

これまで開発検討をしておりました。

以前のその１で参考にさせて頂いた下記サイトの

www.mgo-tec.com

403 Forbidden

https://www.mgo-tec.com/blog-entry-websocket-wroom03.html

websocketライブラリとしてmgo-tecさんが作成されていた「EasyWebSocket」を使おうかを検討を進めていたのですが、次のような事項により見送ることとしました。

• スタイルシート(css)とjavascriptはhtmlファイル内に記述しなければならない

• 使用できる画面のパーツ（ボタンやスライダースイッチ等）が限られること

その後、いろいろネットをググってみたところ

Qiita

車速連動ボリュームを作った - Qiita

https://qiita.com/rukihena/items/029b6f9240ca79aad2a1

#はじめに電子工作モノを考えたときに「機能的には単純なんだけど設定UIを用意するのが大変」というケースがあると思います。そんな場合に、ESP8266を使って、WiFiで接続したスマホで設定して、設定した後はWiFiをOFFって使...

で使用されていたwebsocketライブラリ「arduinoWebSockets」を発見しサンプルを動かしたりして試してみた。

ESP32ではなく使用されているCPUがESP8266であるなど幾つか解決しなければならない課題もあると思われますがこちらを使うことにしました。

なお、websocketライブラリ「arduinoWebSockets」は次のサイトで取得できます。

GitHub

Links2004/arduinoWebSockets

https://github.com/Links2004/arduinoWebSockets

arduinoWebSockets. Contribute to Links2004/arduinoWebSockets development by creating an account on GitHub.

また、htmlファイルやcssファイル、javascriptファイル、画像ファイルもesp32からブラウザにダウロードしたいのでWebSocketサーバだけでなくWebサーバもESP32上で動かしたいと考えています。

ESP8266ではあるがqiita.comのrukihenaさんの記事「https://qiita.com/rukihena/items/029b6f9240ca79aad2a1」でWebSocketサーバとWebサーバを立ち上げられているので可能であると思う。

ESP8266とESP32ではWebサーバ周りのライブラリの仕様が変更されているようだが何とかなるのではと思う。

htmlファイルやcssファイル、javascriptファイル、画像ファイルはSPIFFSを使ってESP32に保存しプログラムで読み込んで利用したいと考えている。

まぁ、いろいろちょこちょこと動作確認プログラムを作成して調べた限りでは実現できそうと判断した。

ということでいろいろ検討した結果、

• websocketライブラリは「arduinoWebSockets」を使う。

• ESP32にはWebサーバとWebSocketサーバの２つを立ち上げる。

• htmlファイルやcssファイル、javascriptファイル、画像ファイルはSPIFFSを使ってESP32のフラッシュメモリに保存しプログラムで利用する。

• ESP32はWiFiアクセスポイントサーバとしAndroidタブレット（ちょっと古めのandroid 4.03）を使って接続する。

• 使用するブラウザは Chromeとする。

と決めて実際の開発作業（以下のコンポーネント）を始めたいと思う。

• ESP32側プログラムの設計＆作成（Arduino IDE C++）

• ユーザインタフェースとしてのWebブラウザ側画面の設計＆作成（htmlとcss）

• ユーザインタフェースのWebブラウザ側でESP32側とやり取りするプログラムの設計＆作成（Javascript）