Ein Webserver auf dem ESP32
Mit Hilfe eines Webservers lässt sich mit dem ESP32 via WLAN eine Kommunikation mit dem Browser eines
Endgeräts im WLAN etablieren.
Dies funktioniert mit jedem Gerät, das sich per WLAN mit dem ESP32 verbinden kann, also auch mit Tablets oder
Smartphones. Lediglich ein Webbrowser muss auf diesem Gerät laufen.
Die Kommunikation kann dann mit dem HTTP Protokoll erfolgen.
Beispiel: Ein Status-Button auf dem ESP32
Aufgaben-Beschreibung
Ein Beispiel für eine Kommunikation mit dem HTTP-Protokoll ist ein Status-Button, der auf Anfragen eines Clients reagiert.
Der ESP32 dient dabei als Webserver, der eine Website als HTML-Ressource zur Verfügung stellt. Diese kann von jedem Webbrowser auf einem Client angezeigt werden.
Der Button wird als Link dargestellt. Das Anklicken des Link-Buttons generiert eine GET-Request an den Webserver. Diese GET-Request wird vom ESP32 ausgewertet und der Mikrocontroller kann dann auf die Anfrage mit einer modifizierten HTTP-Datei reagieren.
Der Status-Button soll einen Toggle-Switch repräsentieren, dessen Zustand in einer Variablen auf dem ESP32 gespeichert wird.
Der ESP32 soll als unabhängiger Access-Point (AP) ein WLAN aufspannen, in welches sich ein Client einloggen kann.
Die Programmierung soll mit Hilfe der WiFi-Library für das Arduino Framework realisiert werden.
Aufspannen eines WLANs (ESP32 als AP)
Der ESP32 muss im AP-Modus betrieben werden.
Webserver starten
Auf dem ESP32 muss mit WiFiServer.begin() ein Webserver auf Port 80 gestartet
werden.
Auf Client warten
Mit WiFiServer.available() wird auf einen Client gewartet. Sobald ein Client
vorhanden ist, wird eine Instanz vom Typ WifiClient erzeugt. Mit dieser
Instanz wird nun weiter gearbeitet.
Client-Kommunikation auswerten
Die Kommunikation mit dem Client muss nun ausgewertet werden.
Wesentlich ist die Ressource, die der Client in seiner GET-Anfrage anfordert. Dazu muss die Request Line ausgewertet werden. Das request-target entspricht dem href
Befehl_Attribut eines Links (<a> Tag), der Teil der HTML-Website ist, die
dem Client übermittelt wird.
Aufbau der HTML-Ressource für den Client
Die HTML-Ressource, die an den Client übermittelt wird entspricht einer HTML-Website, deren Grundstruktur der eines HTML-Dokuments entsprechen muss.
Die Seite muss einen Hyperlink enthalten, der vom ESP32 ausgewertet werden kann.
Mit Hilfe von CSS kann die übermittelte Seite und deren Inhalt gestaltet
werden.
Quelltext für den ESP32
Der Quelltext zeigt die Lösung der Aufgabe.