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

その後、以下の3つのコンポーネントのプログラムを作成し完成しました。

1.ESP32側プログラムの設計&作成(Arduino IDE C++)

httpアクセスを受けてWebブラウザとのWebsocket通信の開始を行いデータの送受信を行うプログラムとなります。
http通信はesp32標準のライブラリを利用し、websocket通信には「arduinoWebSockets」ライブラリを利用しました。

2.ユーザインタフェースとしてのWebブラウザ画面の設計&作成(htmlとcss)

作成した画面はこんな感じとなりました。
左真ん中の●を左右にスライドしてモーターの制御をします。

 

3.ユーザインタフェースのWebブラウザ側でESP32側とやり取りするプログラムの設計&作成(Javascript)

Webブラウザ側の画面の操作に対応した動きやesp32へのデータの送信、esp32からのデータの受信を行うプログラムとなります。Webブラウザで動作します。