ESP32-WROOM-32EでWebServerを実装する

こんにちは、ENGかぴです。

WebServerライブラリでWebサーバーを実装するとクライアント（スマホなど）のリクエストに対応したレスポンスを返信する事ができます。Webサーバーを使って温湿度センサー（SHT35-DIS）のデータを表示して動作確認しました。

ESP32-WROOM-32E開発ボード（秋月電子）を使用しArduino IDEで開発を行います。また、AE-SHT35（秋月電子）を使用しています。

ESP32-WROOM-32Eを使って動作確認したことをまとめています。

ESP32-WROOM-32Eで学べるソフト開発と標準ライブラリの使い方

WebServerライブラリを使用する
動作確認
ソースコード全体
関連リンク

WebServerライブラリを使用する

WiFiライブラリを使用してアクセスポイントをアクセスポイントを作る方法を下記記事にまとめています。

ESP32-WROOM-32EでWiFiのアクセスポイントを実装

本記事においてもWiFiのアクセスポイントとして使用していますがWebServerを追加する方法を中心に説明しています。

PR：企業で求められる即戦力技術を身に付けるテックキャンプエンジニア転職

WebServerの準備

#include <WebServer.h>

WebServer Wserver(80); //WebServer情報に関する変数（インスタンス）

void setup() {
  //省略--アクセスポイントを設定--
  Wserver.on("/", HTTP_GET, HtmlSet); //URLを指定して処理する関数を指定
  Wserver.onNotFound(handleNotFound); //URLが存在しない場合の処理する関数を指定
  Wserver.begin(); //Webサーバーの開始
}

WebServerライブラリを使用するためにインクルードします。WebServerクラスの変数としてWserverをインスタンス化し、引数に通信ポート（デフォルトは80）を指定します。以降はインスタンス化したWserverを使用します。

on()ではURLに対して接続要求がある場合に処理する関数を指定します。第1引数にはURLアドレスの階層を示す文字を指定します。

例えばブラウザーから「192.168.11.2」を指定する場合は”/”となり「192.168.11.2/ti」を指定して表示する場合は”/ti”を指定します。

第2引数にHTTPの種類（HTTP_GETやHTTP_POST）などを指定します。アクセスした場合に関数の処理のみでHTMLを操作しない場合は第2引数は省略可能です。HTMLからデータを読み出したりデータをフォームから取得したりする場合は用途に応じてHTTP_GETやHTTP_POSTを指定する必要があります。

HTTP_GETはデータを読み込む場合に使用、HTTP_POSTは設定したデータを取得するときに使用するという使い分けがあります。

第3引数に接続要求に対するURLが存在する場合に処理する関数を指定します。

onNotFound()はURLが見つからない場合の処理する関数を指定します。

begin()で指定したポートでWebServerが動作開始します。指定しない場合はポート80で動作開始します。

クライアント接続の待機

void loop() {

  Wserver.handleClient(); //接続待ち
}

WebServerは handleClient()によってクライアントからのリクエストを常時監視します。クライアントからリクエストがあれば登録したURLに対応する処理が呼び出されます。

PR：RUNTEQ（ランテック）- マイベスト３年連続1位を獲得した実績を持つWebエンジニア養成プログラミングスクール

HTMLデータの生成

void HtmlSet(void){
  String str = "";

  str += "<html lang=\"ja\">";
  str += "<head>";
  str += "<meta http-equiv=\"refresh\" content=\"5\">";//5秒おきにリフレッシュ
  str += "<meta charset=\"UTF-8\">";
  str += "<title>Sensor SHT35</title>";
  str += "</head>";
  str += "<body>";
  str += "<h1>ESP32-SHT35-DIS温湿度センサ</h1>";
  //省略
  str += "</body>";
  str += "</html>";

  Wserver.send(200,"text/html", str); 
  //HTTPレスポンス200でhtmlデータとして送信
}

クライアントからのリクエストに対してHTMLデータで返信するためHtmlSet()を実装します。

HTMLデータの作成方法は様々ですがString型を使って文字列を生成して送信する方法を紹介します。strをString型で宣言しHTMLデータになるように+=でstrに文字列を付け加えていきます。

一文字でも間違うと表示できなくなるためテキストファイルなどでHTML形式で文章を生成しGoogle Chromeで開いて表示できることを確認しておくとよいでしょう。

ESP32のString型は65535バイト分（２バイト）までしか対応していないため文字の増やし過ぎには注意が必要です。

HTMLデータを生成した後はWebServerのメンバー関数であるsend()を使ってクライアントに返信します。

第1引数ではHTTPのレスポンスでとして200（リクエストOK）を指定しています。第2引数では返信するテキスト文字がHTMLタイプであることを通知しています。第3引数では返信する文字列を指定します。

PR：わからないを放置せず、あなたにあったスキルを身に着けるコツを教えるテックジム　「書けるが先で、理解が後」を体験しよう！