ESP32 Asynchroner Webserver

AJAX ermöglicht es, Daten mit dem Server auszutauschen und bestimmte Teile der Website zu aktualisieren, ohne die gesamte Seite neu zu laden. Die Methode jQuery ajax() stellt die grundlegende Funktionalität von AJAX in jQuery bereit. Dieser Artikel zeigt, wie man jQuery ajax() und ESPAsyncWebServer verwendet.

In diesem Beispiel verwenden wir den Code von der Esp32 Web Updater- und SPIFFS-Dateimanagerseite . Der folgende komprimierte Ordner enthält alle in diesem Artikel enthaltenen Dateien.

.ESP32 ASYNC WEBSERVER JQUERY AJAX PROJEKTDATEIEN herunterladen

Werbung

Ausführlichere Informationen zur Verwendung des ESP32 Asynchroner Webserver finden hier.

Lassen Sie uns die Hardware vorbereiten. Schließen wir eine LED mit einem 330-Ohm-Widerstand an den gpio2-Pin eines ESP32 an und schließen wir einen Spannungsteiler bestehend aus einem LDR und einem 10k-Widerstand an den gpio36-Pin an, basierend auf dem Bild unten.

Entpacken wir den heruntergeladenen komprimierten Ordner. Kopieren wir dann den Ordner Esp32-AsyncWebserver-jQuery-ajax in das Verzeichnis …/Arduno. Öffnen wir die Arduino IDE, wählen wir im Menü File – Sketchbook/sketchbook die Datei Esp32-AsyncWebserver-jQuery-ajax aus, geben wir in der Datei config.h für die WLAN-Verbindung benötigte SSID und das Passwort ein und laden wir diese dann auf das ESP32-Entwicklungsboard hoch.

const char* ssid = "SSID";
const char* password = "Wifi_jelszó";

const char* http_username = "admin";
const char* http_password = "admin";

const char* host = "esp32-asyncwebserver";

...

Öffnen wir im Browser die Adresse http://esp32-asyncwebserver.local/manager. Die Standardanmeldeinformationen sind admin/admin. Wir können dies auch in der Datei config.h ändern.

Laden wir auf der sich öffnenden Seite die Dateien jquery-3.6.3.min.js und index.html aus dem Projektordner hoch und gehen wir dann zu http://esp32-asyncwebserver.local.

Geben wir in der Datei config.h den Namen der hochgeladenen jQuery-Datei mit einem Schrägstrich am Anfang ein. Hier wurden die Variablen des Code-Snippets hinzugefügt, mit denen die Basisskizze erweitert wurde.

...

const char* jquery = "/jquery-3.6.3.min.js";

const char ldrPin = 36;
String sensorValue = "0";

const char ledPin = 2;
String ledValue = "true";

In der Funktion loop() lesen wir jede Sekunde den Wert des LDR-Lichtsensors. Bei der Verwendung des asynchronen Webservers vermeiden wir Verzögerungen nach Möglichkeit, daher verzichten wir auf die Funktion delay(). Das folgende Codefragment implementiert ein Timing mit Hilfe der Funktion millis(), damit das Programm nicht aufhört zu laufen.

Millis = millis();
if (Millis - previousMillis >= 1000) 
{
   previousMillis = Millis;
   sensorValue = String(analogRead(ldrPin));
}

Der folgende Code verarbeitet Anforderungen, die von der hochgeladenen Datei index.html gesendet werden.

/**********   Dein server.on-Code hier ...  ***********/

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(SPIFFS, "/index.html", "text/html", false, processor);
  });

  server.on(jquery, HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(SPIFFS, jquery, "text/javascript");
  });

  server.on("/sensorvalue", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(200, "text/text", sensorValue);
  });

  server.on("/ledvalue", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(200, "text/text", ledValue);
  });


  server.on("/ledswitch", HTTP_POST, [](AsyncWebServerRequest *request)
  {
    ledValue = request->getParam(0)->value();

    if(ledValue == "true")
    {
      ledValue = "false";
      digitalWrite(ledPin, LOW);
    }
    else if(ledValue == "false")
    {
      ledValue = "true";
      digitalWrite(ledPin, HIGH);
    }
    request->send(200);
  });

  /***************  Dein server.on-Code so weit *******************/

Die Funktion server.on(“/”, HTTP_GET ….}) lädt die Homepage, die hochgeladene Datei index.html.

Die Funktion server.on(jquery, HTTP_GET ….}) bedient die jQuery-Datei, die im Head-Abschnitt der index.html-Datei aufgerufen wird.

<!DOCTYPE html>
<html>
    <head>
        <title>ESP32 asyncWebserver-jQuery-ajax</title>
        <script src="jquery-3.6.3.min.js"></script>
.....

Die Javascript-Codes werden in den Körper der jQuery ready()-Methode geschrieben, das ready()-Ereignis tritt auf, wenn das DOM geladen wird.

<script>
  $(document).ready(function() {
    ....
</script>

Die Funktion server.on(“/sensorvalue“, HTTP_GET …}) erhält jede Sekunde eine Anfrage und gibt als Antwort den Wert des LDR-Lichtsensors zurück. Im HTML-Code verwenden wir dafür die Funktion setInterval() von jQuery, sie läuft in Intervallen, die in Millisekunden angegeben sind. Wir haben die Funktion jQuery ajax get() in den Hauptteil der Funktion setInterval() platziert, die den Wert des Lichtsensors von der angegebenen URL abruft.

setInterval(function () {
  $.get("/sensorvalue", function(data){
    $('#sensor_result').html(data);
  });
},1000);

Im Body der jQuery get() Methode wird der Wert der empfangenen Daten in das <div> Element mit der sensor_result id eingetragen.

<div id="sensor_result" style="height:40px;"></div>

server.on(“/ledvalue“, HTTP_GET …}) gibt den Status der LED zurück, wir verwenden dies, um die Beschriftung der Schaltfläche zu ändern, die zum Umschalten der LED verwendet wird. Die Funktion get() wird verwendet, um den Status der LED vom Server abzurufen und ihn dann in einem versteckten HTML-Element zu speichern. Dieser Wert wird auch an eine Variable übergeben. Wir untersuchen den Wert der Variablen und ändern die Beschriftung der Schaltfläche entsprechend.

$.get("ledvalue", function(data) {
  $('#led_status').val(data);
});
					
var str = $("#led_status").val();
				
if(str == "true") {
  $("#ledswitch_button").text("Kapcsold be a ledet!");
}
else {
  $("#ledswitch_button").text("Kapcsold ki a ledet!");
}

Wenn die Schaltfläche in der Datei index.html gedrückt wird, wird der Status der LED aus dem versteckten HTML-Element in der jQuery-Ereignishandlerfunktion click() gelesen, die Beschriftung der Schaltfläche entsprechend gesetzt und der neue Status der LED angezeigt wird mit der jQuery-Methode post() an den Server gesendet. Danach rufen wir den aktuellen Zustand der LED mit der Funktion get() ab und übergeben ihn an das versteckte HTML-Element.

$("#ledsw itch_button").click(function() {
  str = $("#led_status").val();
					
  if(str == "true") {
    $("#ledswitch_button").text("Kapcsold be a ledet!");
  }
  else {
    $("#ledswitch_button").text("Kapcsold ki a ledet!");
  }
  $.post("ledswitch", {
    led: str
  });
  $.get("ledvalue", function(data) {
    $('#led_status').val(data);
  });
});

Die Funktion server.on(“/ledswitch“, HTTP_POST, ….}) empfängt das Ereignis, das von der Schaltfläche gesendet wird, die zum Schalten der LED verwendet wird. Hier wird die LED ein- oder ausgeschaltet und der Wert der Variablen, die den Zustand der LED speichert, eingestellt.

Obwohl jQuery viel mehr kann als das, was in diesem Beispiel gezeigt wird, hoffe ich, dass es hilft zu verstehen, wie jQuery ajax und ESPAsyncWebServer zusammenarbeiten.

werbung