In unserer digitalen Welt spielen Webserver eine entscheidende Rolle. Sie sind das Rückgrat des Internets, ermöglichen die Bereitstellung von Webseiten und sind unter anderem auch für die Kommunikation zwischen Geräten innerhalb des Internet der Dinge zu gebrauchen. Während traditionelle Webserver wie Apache2 oder NGNIX auf Computern laufen, hat die Technologie enorme Fortschritte gemacht, sodass nun auch kleine, energieeffiziente Mikrocontroller wie der ESP8266 in der Lage sind, einen Webserver zu betreiben.

Der ESP8266 ist wegen seiner WLAN-Fähigkeit und der einfachen Programmierbarkeit beliebt, und perfekt dafür geeignet, IoT-Projekte mit einem Webserver zu realisieren. Über diesen Webserver können dann Informationen angezeigt werden. Ein Webserver kann aber genau gut ein Interface bereitstellen, über das dann Abläufe auf dem ESP8266 gestartet werden können.

Zum Kapitel springen Hardware

Für die Einrichtung eines Webservers auf dem ESP8266 ist die benötigte Hardware erfreulich übersichtlich. Im Kern des Projekts steht natürlich der ESP8266 selbst. Der ESP8266 ist in verschiedenen Ausführungen erhältlich, von einfachen Modellen wie dem ESP-01s, der für einfache Aufgaben geeignet ist, bis hin zu fortgeschritteneren Versionen wie dem D1 Mini oder einem NodeMCU-Board. Letztere beiden verfügen über zusätzliche Pins und einem integrierten USB-Anschluss für eine unkomplizierte Programmierung.

Solltest du nicht wissen, wie man einen ESP8266 programmiert, kannst du dir gerne diese Schritt-für-Schritt Anleitung anschauen. Darin wird der Start mit dem ESP8266, speziell dem D1 Mini erklärt und beinhaltet alle notwendigen Informationen die zu zum Programmieren eines ESP8266 Boards brauchst.

Zum Kapitel springen Programmcode

Der folgende Programmcode ist der Kern unseres Webserver-Projekts. Er stellt einen einfachen Webserver auf dem ESP8266 bereit. Zusätzlich ist auch eine mDNS-Funktionalität ( multicast DNS) integriert, um den ESP8266 über eine benutzerfreundliche lokale Domain zu erreichen. Dies macht es einfacher, auf unseren Webserver zuzugreifen, ohne sich die IP-Adresse merken zu müssen – ein großer Vorteil, insbesondere in Netzwerken, in denen sich die IP-Adresse des Geräts ändern könnte.

Nach diesem Tutorial werdet ihr euren ESP8266 sehr wahrscheinlich über diese Domain: http://makesmart-esp.local/ erreichen können.

Der Code ist so gestaltet, dass er praktisch "Plug & Play" ist. Nachdem du deine WLAN-Zugangsdaten angepasst hast, kannst du den Code direkt auf den ESP8266 hochladen. Der Sketch umfasst die Einrichtung des Webservers, eine einfache Behandlung von Webanfragen und die Integration des mDNS.

const char* ssid = "makesmartWLAN";
const char* password = "makesmart_passwort";

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

const char* ssid = "makesmartWLAN";
const char* password = "makesmart_passwort";

// http://makesmart-esp.local/ 
const char* dns_name = "makesmart-esp";

void eigeneFunktion();

void setup()
{
  Serial.begin(115200);
  Serial.println("ESP Gestartet");

  WiFi.begin(ssid, password);

  Serial.print("Verbindung wird hergestellt ...");
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Verbunden! IP-Adresse: ");
  Serial.println(WiFi.localIP());

  // Bei Android-Geräten wird der mDNS oft nicht unterstützt, dann muss auf die IP-Adresse zurückgegriffen werden
  if (MDNS.begin(dns_name)) {
    Serial.println("DNS gestartet, erreichbar unter: ");
    Serial.println("http://" + String(dns_name) + ".local/");
  }

  server.onNotFound([](){
    server.send(404, "text/plain", "Link wurde nicht gefunden!");  
  });

  server.on("/", []() {
    server.send(200, "text/plain", "ESP-Startseite!");
  });

  server.on("/custom", []() {
    server.send(200, "text/plain", "Nur eine Beispiel-Route");
    eigeneFunktion();
  });

  server.begin();
  Serial.println("Webserver gestartet.");
}

void loop() {
  server.handleClient();  
  MDNS.update();
}

void eigeneFunktion(){
  Serial.println("unsere eigene Funktion wird ausgeführt ...");
}

Sobald man das Programm auf den ESP8266 hochgeladen hat, werden ein paar Meldungen über den seriellen Monitor ausgegeben. Diese Meldungen bestätigen, dass eine Verbindung zum WLAN hergestellt wurde, der mDNS-Dienst aktiviert ist und der Webserver läuft:

Verbindung wird hergestellt ..........
Verbunden! IP-Adresse: 192.168.178.89
DNS gestartet, erreichbar unter: 
http://makesmart-esp.local/
Webserver gestartet.

Mit dem erfolgreichen Start des Webservers ist der ESP8266 nun über das lokale Netzwerk erreichbar. Du kannst die angegebene URL http://makesmart-esp.local/ direkt öffnen, um den Webserver zu erreichen. Achte natürlich darauf, dass sich das Gerät im selben Netzwerk wie der ESP befindet.

Dies ist der erste Schritt, um die vielfältigen Möglichkeiten Ihres ESP8266-Webservers zu erkunden, von der einfachen Anzeige von Daten bis hin zur Steuerung von IoT-Geräten.

Zum Kapitel springen Weitere Informationen

Der Webserver wurde mit zwei Routen definiert. Einmal / und einmal /custom. Beides steht für:

• http://makesmart-esp.local/ und
• http://makesmart-esp.local/custom

Auf der Startseite erfolgt eine einfache Textausgabe im Webbrowser:

server.on("/", []() {
    server.send(200, "text/plain", "ESP-Startseite!");
});

Bei der Route /custom wird Beispielhaft gezeigt, wie man Abläufe im Programm per Webseite initiieren kann. In diesem Fall beschränkt sich der Ablauf wieder auf eine Ausgabe im seriellen Monitor:

server.on("/custom", []() {
    server.send(200, "text/plain", "Nur eine Beispiel-Route");
    eigeneFunktion();
});

void eigeneFunktion(){
  Serial.println("unsere eigene Funktion wird ausgeführt ...");
}

Mit dieser Grundlage kannst du direkt dein eigenes WLAN-Relais mit HTTP API realisieren.