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

Posted By on 2018年8月23日

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

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

 mgo-tec電子工作
WebSocket でスマホから Arduino化 WROOM のLEDを調光してみる
https://www.mgo-tec.com/blog-entry-websocket-wroom03.html
WebSocket 通信を使用して、Arduino 化した ESP-WROOM-02 ( ESP8266 ) に接続したLEDを スマホ で Wi-Fi リアルタイム調光制御してみました。 しかも、WROOM で生成したデータも同時ストリーミング受信してスマホに表示させてます。双方向ストリーミング通信です。

 

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

 

また、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）