Dein eigener ESP8266 Web Server

Der Microcontroller ESP8266 eignet sich nicht nur perfekt, um Daten aus dem Internet abzurufen und zu verarbeiten. Mit ein paar Zeilen Code baust du dir daraus deinen eigenen ESP8266 Web Server.

So kannst du mit deinem Smartphone oder Computer z.B. auf aktuelle Messdaten von Sensoren zugreifen, oder auch Bauteile an- und ausschalten – Internet of Things pur! 🙂

Lerne in diesem Projekt, wie du mit deinem ESP8266 einen einfachen Web Server aufsetzt, der dir bei einem Aufruf im Browser eine einfache Webseite als Antwort liefert.

Der Code für deinen Web Server

Da ein Aufbau auf einem Breadboard bei diesem Projekt entfällt (du benötigst nur deinen Microcontroller), können wir gleich mit dem Sketch starten. Wenn du den ESP8266 bisher noch nicht verwendet hast, lies zunächst dieses Tutorial, um den ESP8266 mit der Arduino IDE programmieren zu können.

Die einzige Bibliothek, die du brauchst, ist die ESP8266WiFi.h – wenn du sie noch nicht installiert hast, hol das gleich in deinem Bibliotheksverwalter nach. Anschließend integrierst du sie ganz am Anfang deines Sketchs:

#include <ESP8266WiFi.h>

Ebenfalls noch vor der Funktion void Setup() hinterlegst du deine Zugangsdaten für dein WiFi-Netzwerk, legst den Port des Servers fest und definierst eine Variable:

// Daten des WiFi-Netzwerks
const char* ssid     = "Dein Netzwerkname";
const char* password = "Dein Passwort";

// Port des Web Servers auf 80 setzen
WiFiServer server(80);

// Variable für den HTTP Request
String header;

Grundlegende Informationen darüber, wie ein HTTP Request – also der Abruf von Daten von einem Server – funktioniert, kannst du in diesem Beitrag nachlesen.

Den ESP8266 Web Server mit dem WLAN verbinden

In der Setup-Funktion startest du den Seriellen Monitor und verbindest deinen Server mit dem Internet. Sobald die Verbindung steht, gibt er im Monitor die IP-Adresse aus – diese kannst du in einem Browser auf deinem Computer oder Smartphone wie eine normale Internet-Adresse aufrufen.

void setup() {
  Serial.begin(115200);

  // Mit dem WiFi-Netzwerk verbinden
  Serial.print("Connecting to WiFi");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Lokale IP-Adresse im Seriellen Monitor ausgeben und Server starten
  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

Der Loop – Server aufrufen und Daten abrufen

Jetzt ist es soweit: Du rufst den ESP8266 Web Server in deinem Browser auf. Dieser empfängt deinen HTTP Request und antwortet darauf mit einer einfachen Webseite. Mit einer sehr einfachen Webseite, wie du gleich sehen wirst. 🙂

Zunächst benötigst du eine Zeile Code, die dafür sorgt, dass dein Server auf Clients (also Aufrufe) wartet:

WiFiClient client = server.available(); 

Wenn das der Fall ist, erscheint eine entsprechende Meldung im Seriellen Monitor. Anschließend benötigst du eine neue Variable für den Text, den der Client mit seinem Request sendet:

if (client) {                        
    Serial.println("Client available");
    String currentLine = "";     

Jetzt folgt ein While Loop, der dafür sorgt, dass sowohl dein Server den HTTP Request empfangen kann als auch eine Antwort an den Client senden kann. Die Anfrage des Clients speicherst du – Byte für Byte – einer Hilfsvariablen (c), die wiederum Stück für Stück die Variable header füllt, die du ganz am Anfang des Sketchs definiert hast.

Sobald ein Zeilenumbruch (\n) kommt und der Client anschließend eine Leerzeile sendet (currentLine. length() == 0), ist die Anfrage beendet. Zeit für eine Antwort!

while (client.connected()) { 

      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        header += c;

        if (c == '\n') {

          if (currentLine.length() == 0) {

Der ESP8266 Web Server antwortet und sendet das HTML für die Webseite

Bevor die Webseite in deinem Browser erscheint, erhält dieser zunächst eine Statusmeldung vom Server: 200 OK steht hierfür für den geglückten Request. Danach kommt die Information, welche Daten gleich gesendet werden, nämlich Text in Form von HTML: Content-type:text/html. Danach noch die Info, dass die Verbindung geschlossen wird, sobald der Request vollständig abgeschlossen wurde – und eine Leerzeile.

client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();

Endlich Zeit für die Webseite. Wie angekündigt ist diese sehr einfach, denn sie besteht nur aus einer einzigen Überschrift. Aber das reicht ja für den Anfang. 🙂

Überschriften sind in HTML hierarchisch geordnet und erhalten ein entsprechendes Tag – von H1 bis H6. Üblicherweise hat jede Webseite (genau) eine H1-Überschrift für den Titel der Webseite.

Die Überschrift steht zwischen dem öffnenden <h1> und dem schließenden HTML-Tag </h1>. Im öffnenden Tag bringst du allerdings noch die Information unter, dass der Text zentriert auf dem Bildschirm erscheinen soll: align=\”center\”.

Noch ein Hinweis: Die umgedrehten Schrägstriche (Backslashes) benötigst du im Code, um die Anführungszeichen zu “maskieren”. Ansonsten würde die Arduino IDE sie als Teil von C++ interpretieren statt als Text, der über die Funktion client.println() von deinem ESP8266 Web Server ausgegeben wird.

Möchtest du mehr über HTML und CSS wissen? In unserem Webserver-Kurs und E-Book lernst du die Grundlagen eines schicken Interfaces für den Server.

client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\"></head>");
client.println("<body><h1 align=\"center\">Hier spricht dein Server! :)</h1></body></html>");

Alles, was in deinem Sketch jetzt noch folgt, sind Abfragen für die Variable currentLine und etwas Code zum Beenden der Verbindung des Clients mit dem Server. Diese Zeilen findest du hier im vollständigen Sketch unten.

Der vollständige Sketch

// Library für WiFi-Verbindung
#include <ESP8266WiFi.h>

// Daten des WiFi-Netzwerks
const char* ssid     = "Dein Netzwerkname";
const char* password = "Dein Passwort";

// Port des Web Servers auf 80 setzen
WiFiServer server(80);

// Variable für den HTTP Request
String header;

void setup() {
  Serial.begin(115200);

  // Mit dem WiFi-Netzwerk verbinden
  Serial.print("Connecting to WiFi");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Lokale IP-Adresse im Seriellen Monitor ausgeben und Server starten
  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();   // Auf Clients (Server-Aufrufe) warten

  if (client) {                             // Bei einem Aufruf des Servers
    Serial.println("Client available");
    String currentLine = "";                // String definieren für die Anfrage des Clients

    while (client.connected()) { // Loop, solange Client verbunden ist

      if (client.available()) {
        char c = client.read();             // Ein (1) Zeichen der Anfrage des Clients lesen
        Serial.write(c);                    // und es im Seriellen Monitor ausgeben
        header += c;
        if (c == '\n') {                    // bis eine Neue Zeile ausgegeben wird

          // Wenn der Client eine Leerzeile sendet, ist das Ende des HTTP Request erreicht
          if (currentLine.length() == 0) {

            // Der Server sendet nun eine Antwort an den Client
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            // Die Webseite anzeigen
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\"></head>");
            client.println("<body><h1 align=\"center\">Hier spricht dein Server! :)</h1></body></html>");

            // Die Antwort mit einer Leerzeile beenden
            client.println();
            // Den Loop beenden
            break;
          } else { // Bei einer Neuen Zeile, die Variable leeren
            currentLine = "";
          }
        } else if (c != '\r') {  // alles andere als eine Leerzeile wird
          currentLine += c;      // der Variable hinzugefüht
        }
      }
    }
    // Variable für den Header leeren
    header = "";
    // Die Verbindung beenden
    client.stop();
    Serial.println("Client disconnected");
    Serial.println("");
  }
}

Letzte Aktualisierung am 1.10.2022 / Affiliate Links / Bilder von der Amazon Product Advertising API