ESP32でjQuery使ってRequest処理する(DHT11を例に)

ずっと前に書いたコードでわかりにくかった部分があったのでQiitaに書いとく
##内容
・Webserver上でRequestに応じて動的に文字を変えたい
・jQuery使って簡潔に記述する
・DHT11を例に用いる
##環境
・ESP32－DevKitC (尼で買ったパチもん)
・Arduino IDE -1.8.7
・espressif/arduino-esp32  -1.0.1
・jQuery -3.3.1

・DHT11 -> 27番ピンで読み取り
・adafruit/DHT-sensor-library -1.3.4
・adafruit/Adafruit_Sensor -1.0.3
##仕様
・Webserverアクセス時にページ内に温度,湿度が取得,表示される
・ページ内の取得ボタンを押すと温度,湿度の表示が更新される

##ソースコード
実際に書いたソースコードの一部を改変,抜粋して以下に掲載する

ESP32でサーバー立てた事がある人だったり,jQueryの知識がある人なら

```js:jQuery部分
// /ReloadTandHにGETリクエストして,その内容を表示する
$(document).on(clickEventType,'#ReloadTandH',function () {$.get('ReloadTandH',function (data) {$('#TandH').html(data);});});
```

```cpp:GET処理部分
// GETの処理
if(currentLine.endsWith("GET /ReloadTandH")){
   float t = dht.readTemperature();
   float h = dht.readHumidity();

   // ちなみに,ここ2回取得しないと上手く行かなかった
   t = dht.readTemperature();
   h = dht.readHumidity();
   // Request返す
   client.print(String(t) + "℃ " + String(h) + "%");
   break;
}
```

を見ればわかると思う

※もちろんモータ制御やLED点灯なども同様に,jQueryでGETしてあげればWebページ上で簡単に操作が行える

必要な部分を全部書くと

```cpp:Esp32jQueryRequest.ino
#include <WiFi.h>
#include <DHT.h>

const char* ssid = "hogehoge";
const char* password = "yj114514";
IPAddress ip(192,168,1,30);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255, 255, 255, 0);
IPAddress DNS(192,168,1,1);
WiFiServer server(80);

const int pinDHT = 27;
DHT dht(pinDHT, DHT11);

String str = "<!DOCTYPE html>\n"
             "<html lang=\"ja\">\n"
             "<head>\n"
             "    <meta charset=\"UTF-8\">\n"
             "    <title>yajusnpi</title>\n"
             "    <meta http-equiv=\"Content-Script-Type\" content=\"text/javascript\">\n"
             "    <meta http-equiv=\"Content-Style-Type\" content=\"text/css\">\n"
             "    <script src=\"https://code.jquery.com/jquery-3.3.1.js\"></script>\n"
             "    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n"
             "    <style>\n"
             "        body{\n"
             "            -webkit-touch-callout:none;\n"
             "            -webkit-user-select:none;\n"
             "            background-color: lightgray;\n"
             "        }\n"
             "        #TandH{\n"
             "            display: inline-block;\n"
             "            position: relative;\n"
             "            width: 50%;\n"
             "            font-size: 16px;\n"
             "            color: #FFF;\n"
             "            text-decoration: none;\n"
             "            text-align: center;\n"
             "            font-weight: bold;\n"
             "            border: 4px;\n"
             "            height: 50px;\n"
             "            line-height: 50px;\n"
             "            background: linear-gradient(90deg, dodgerblue 50%, orange 50%);\n"
             "        }\n"
             "        .borderReload{\n"
             "            border: 1px solid black;\n"
             "            border-radius: 10px;\n"
             "            box-shadow: inset 0px 0px 4px 2px darkgray;\n"
             "            padding: 5px 10px 10px;\n"
             "        }\n"
             "        .btn {\n"
             "            display: inline-block;\n"
             "            position: relative;\n"
             "            font-size: 16px;\n"
             "            color: #FFF;\n"
             "            text-decoration: none;\n"
             "            text-align: center;\n"
             "            font-weight: bold;\n"
             "            border-radius: 8px;\n"
             "        }\n"
             "        #ReloadTandH{\n"
             "            border-radius: 100%;\n"
             "            display: inline-block;\n"
             "            height: 25px;\n"
             "            width: 25px;\n"
             "            line-height: 25px;\n"
             "            background-color: dodgerblue;\n"
             "            border-bottom: 6px solid blue;\n"
             "        }\n"
             "        .btn:active {\n"
             "            transform: translateY(4px);\n"
             "            border-bottom: none;\n"
             "        }\n"
             "    </style>\n"
             "</head>\n"
             "<body>\n"
             "<script>\n"
             "    $(function(){\n"
             "        var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend');\n"
             "        $(document).off(clickEventType);\n"
             "        $(document).on(clickEventType,'#ReloadTandH',function () {$.get('ReloadTandH',function (data) {$('#TandH').html(data);});});\n"
             "    });\n"
             "</script>\n"
             "</body>\n"
             "</html>\n";

void setup() {
    Serial.begin(115200);
    dht.begin();
    delay(10);

    Serial.println();
    Serial.println();
    Serial.println("Connecting to ");
    Serial.println(ssid);

    WiFi.config(ip, gateway, subnet, DNS);
    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED){
        delay(10);
        Serial.println(".");
    }
    Serial.println("");
    Serial.println("WiFi connected.");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());

    server.begin();
}

void loop() {
    WiFiClient client = server.available();
    
    if (client) {
        Serial.println("New Client.");
        String currentLine = "";
        while (client.connected()) {
            if (client.available()) {
                char c = client.read();
                Serial.write(c);
                if (c == '\n') {
                    float t = dht.readTemperature();
                    float h = dht.readHumidity();

                    if (currentLine.length() == 0) {
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-type:text/html");
                        client.println();

                        client.print(str);

                        client.print("<html><body><div style=\"text-align:center;\"><span class=\"borderReload\">");
                        t = dht.readTemperature();
                        h = dht.readHumidity();
                        client.print("<span class=\"btn\" id=\"ReloadTandH\">↻</span>");
                        client.print("</span>&nbsp<span id=\"TandH\">" + String(t) + "℃ " + String(h) + "%" +"</span>");
                        client.print("</div></body></html>\n");
                        
                        client.println();
                        break;
                    } else {
                        currentLine = "";
                    }
                } else if (c != '\r') {
                    currentLine += c;
                }
                
                if(currentLine.endsWith("GET /ReloadTandH")){
                    float t = dht.readTemperature();
                    float h = dht.readHumidity();

                    t = dht.readTemperature();
                    h = dht.readHumidity();
                    client.print(String(t) + "℃ " + String(h) + "%");
                    break;
                }
            }
        }
        client.stop();
        Serial.println("Client Disconnected.");
    }
}
```

こんな感じになる
（もっとシンプルなページにすればよかったかな...）

※このコード見てわかんなかったらサンプルスケッチのWiFi/SimpleWiFiServerを見るなり,[簡単なサンプルが載ってるサイト](https://kokensha.xyz/iot/control-servo-from-web-with-esp32/)を見るとわかりやすいかもしれない