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.

ESP8266 Webserver Webclient

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).

ESP8266 Webserver Webclient Zusammenspiel mit Browser

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:

Am Ende haben wir dann einen Webserver-Webclient der ähnlich wie hier aussieht:

ESP8266 Webserver Schalten von Ausgängen

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

Links

  • Download des finalen Sketch ESP8266 Webserver WebClient
  • Amazon (Suchlink für NodeMCU V2 mit CP2102 *)
  • Amazon (Alternativ: Wemos D1 pro Mini *)

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Affiliate/Provision-Links. Wenn du auf so einen Verweis klickst und über diesen Link einkaufst, bekomme ich von deinem Einkauf eine (kleine) Provision. Für dich verändert sich der Preis dadurch nicht. Ich empfehle nur Produkte die ich selber besitze und wenn ich überzeugt bin, dass sie für andere interesssant sind.

 

Protokoll

erstellt: 2018-09-02 | Stand: 2024-03-22