Kombinierter Webserver - Webclient am ESP8266
In dieser mehrteiligen Anleitung werde ich einen kombinierten Webserver - Webclient für den ESP8266 zeigen. Die Arduino IDE kommt zwar mit vielen Beispielen und mit allem was man benötigt aber offenbar haben Einsteiger Probleme bei der Auswahl der richtigen Vorgangsweise.
Als Anwendungsfall sei eine kleine Wetterstation genannt: Ein ESP8266 liest Wettersensoren aus, stellt eine Weboberfläche zur Anzeige am Smartphone bereit (=Webserver). Zusätzlich sendet der ESP8266 die Daten in periodischen Abständen an einen zentralen Server. Dazu schlüpft der ESP8266 in die Rolle eines Webclients.
Anschließend bauen wir eine zweite Wetterstation mit einem lokalen Webserver (blau) die Daten von einer anderen Wetterstation (grün) empfängt. Der ESP8266 schlüpft daher in beide Rollen: Einerseits ist er Webserer (blau) und andererseits sendet er Daten an einen anderen Server (grün).
Zu Trainingszwecken verbauen wir in der Wetterstation noch eine LED und ein Relais das wir über die Weboberfläche schalten wollen. Auch hier agiert der ESP wieder als webserver (blau). Behalte immer im Hinterkopf, welche Rolle der ESP8266 gerade einnimmt.
Übersicht ESP8266 Webserver und Webclient
Grundsätzlich spricht nichts dagegen, einem ESP8266 mit einem Webserver und einem Webclient auszustatten.
Wir werden daher einen Sketch für den ESP8266 erstellen der u. a. folgendes enthält:
- einen Webserver
- einen Webclient
Im wesentlichen verwenden wir dazu diese zwei Beispiele aus der Arduino IDE:
- ESP8266Webserver | HelloServer
- ESP8266HTTPClient | BasicHttpclient
Da die Erklärungen etwas größer ausfallen werden, teile ich das Tutorial in folgende Schritte:
- Einleitung (diese Seite)
- Der Webserver - erste Schritte und behübschen
- Der Webserver - Seite Aktualisieren mittes fetch API
- Der Webserver - GPIO Schalten über Webseite
- Der Webclient - Senden mittels HTTP-POST
- Der Webserver - Empfangen von sonstigen Daten
- Eine Zusammenfassung
Am Ende haben wir dann einen Webserver-Webclient der ähnlich wie hier aussieht:
Streng genommen ist das kein Webserver Tutorial - sondern eine detailierte Erklärung zu meinem Muster-Sketch. Für das Durcharbeiten der weiteren 6 Teile solltest du dir etwa 1 Stunde für die Code-Analyse vornehmen.
Es geht weiter mit Webserver - erste Schritte und Designüberlegungen