ESP32でwebサーバーを作る - プログラミング素人のはてなブログ

ESP32でIOTにWebとかUIとか作ってみた

ESP32でつくったローカルサーバーにWebからアクセスしてLEDを操作するやつ、さらにこれをWindowsアプリでも出来るようにする基本技術を身に着けた。 pic.twitter.com/g0gyd20dgl
— とりてん (@s51517765) 2022年2月11日

ESP32でローカルサーバーを構成すること自体はいろんな記事があります。
これらはESP32でサーバー構成したWebページにブラウザでアクセスして操作するものです。
qiita.com
まず、こちらを参考にWebからLEDを点灯させてみます。

サーバープログラムの修正

この参考記事ではWebが画面遷移するので、続けて操作することが出来ません。
まず、これを修正しました。

ルートページで関数handleLED()が実行されるように変更します。

  //このアドレスにアクセスしたときに処理される関数を指定
  server.on("/", handleLED);

Linkの遷移先をルートに変更します。

<a href=\"/?button=on\">ON</a>

\はエスケープで?はクエリです。

// HTMLを組み立てる
String html = "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>LEDをON/OFFする</title></head><body><p>リンクをクリックするとLEDがON/OFFします</p><ul><li><a href=\"/?button=on\">ON</a></li><li><a href=\"/?button=off\">OFF</a></li></ul></body></html>";

handleLED()でhtmlのレンダリング server.send(200, "text/html", html);を追加します。

// LEDのON/OFF
void handleLED()
{
  if (server.hasArg("button"))
  {
    if (server.arg("button").equals("on"))
    {
      digitalWrite(ledPin, HIGH);
    }
    else
    {
      digitalWrite(ledPin, LOW);
    }
    Serial.println(server.arg("button"));
  }
  server.send(200, "text/html", html);
}

これで同一ページ（ルート）に留まったままになります。

クライアントアプリを作成

このESP32によるサーバーアプリをWindowsアプリで操作できるようにしてみます。
WindowsアプリはC#で作成します。

サーバーへのアクセスはブラウザ以外でも可能で、curlでもアクセスが出来ます。
curlはコマンドプロンプトから実行できます。

curl http://172.16.xx.xxx/?button=on

このような形でもESP32サーバーは反応してくれます。

これをC#で実行するには、以下のようにします。

using (var httpClient = new HttpClient())
{
    //   using (var request = new HttpRequestMessage(new HttpMethod("GET"), "http://172.16.xx.xxx/?button=on"))
    using (var request = new HttpRequestMessage(new HttpMethod("GET"), url))
    {
        var response = await httpClient.SendAsync(request);
    }
}

これをボタンによってクエリを切り替えてrequestします。

まとめ

ESP32でサーバーを作成し、C#によるクライアントアプリを作成しました。
github.com