In diesem Tutorial lernst du, wie du einen Webserver auf dem ESP32-Mikrocontroller implementierst, um ihn drahtlos über Wi-Fi zu steuern. So kannst du den eingebauten LED über eine Webseite ein- und ausschalten.
Der ESP32 ist ein leistungsstarker Mikrocontroller mit integrierter Wi-Fi-Funktionalität, was ihn ideal für Projekte macht, die drahtlose Kommunikation erfordern. Durch das Einrichten eines Webservers auf dem ESP32 können wir eine Benutzeroberfläche erstellen, die von jedem Computer oder Smartphone im gleichen Wi-Fi-Netzwerk zugänglich ist.
Die Fernsteuerung von Geräten über einen Webserver eröffnet viele Möglichkeiten für Hausautomation, IoT-Projekte und sogar Robotik. Stell dir vor, du könntest Lichter, Geräte oder einen Roboter von deinem Smartphone oder Computer aus ein- und ausschalten.
Lass uns loslegen!
Benötigte Teile
Unten findest du die Komponenten, die für das Projekt benötigt werden. Für dieses Projekt verwende ich ein älteres ESP32-Board, das zwar veraltet ist, aber noch sehr günstig erhältlich ist. Genau dieses ist unten aufgeführt. Es gibt ein Nachfolgemodell mit verbesserten Spezifikationen, das du here.
ESP32 lite
USB-Datenkabel
Arduino IDE
Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.
Ich mag das ESP32 lite wegen des niedrigen Preises und des Batterieanschlusses mit Ladefunktion. Aber grundsätzlich sollte jedes andere ESP32-Board für dieses Projekt funktionieren. Da wir die eingebaute LED des ESP32 verwenden, benötigst du keine weiteren Hardwarekomponenten.
Im nächsten Abschnitt werfen wir einen kurzen Blick auf die Grundlagen der Wi-Fi-Kommunikation.
Wie Wi-Fi funktioniert
Wi-Fi, kurz für Wireless Fidelity, ist eine Technologie, die es Geräten ermöglicht, drahtlos eine Verbindung zum Internet herzustellen oder miteinander zu kommunizieren.
Grundlagen verstehen
Wi-Fi nutzt Funkfrequenzsignale, um Daten zwischen Geräten zu senden und zu empfangen. Diese Funkwellen werden durch die Luft übertragen und können Wände und andere Hindernisse durchdringen, was drahtlose Kommunikation ermöglicht.
Um eine Wi-Fi-Verbindung herzustellen, benötigst du zwei Hauptkomponenten: ein Wi-Fi-fähiges Gerät (wie den ESP32) und einen Wi-Fi router (siehe Bild oben). Der Router fungiert als zentrales Zentrum, das deinen Geräten ermöglicht, im Netzwerk miteinander zu kommunizieren.
Beachte, dass der Router dein Gerät auch mit dem Internet verbinden kann, was wir in diesem Projekt jedoch nicht tun werden.
Die Rolle von SSIDs und Passwörtern
Beim Verbinden mit einem Wi-Fi-Netzwerk wirst du aufgefordert, die SSID (Service Set Identifier) und das Passwort einzugeben. Die SSID ist ein eindeutiger Name, der das Wi-Fi-Netzwerk identifiziert (z. B. „my_home_wifi“), während das Passwort den sicheren Zugang zum Netzwerk gewährleistet. So kann niemand ohne Passwort auf den ESP32-Webserver zugreifen, den wir implementieren werden.
Sobald du die korrekte SSID und das Passwort eingegeben hast, sendet dein Gerät eine Verbindungsanfrage an den Wi-Fi-Router. Der Router authentifiziert dein Gerät und weist ihm eine IP address zu, die als eindeutige Kennung im Netzwerk dient.
IP-Adressen und Kommunikation
IP-Adressen spielen eine entscheidende Rolle in der Wi-Fi-Kommunikation. Eine IP-Adresse ist ein eindeutiges numerisches Label, z. B. 192.0.1.1 oder 192.0.1.2, das jedem Gerät im Netzwerk zugewiesen wird. Sie ermöglicht es Geräten, Daten gezielt an bestimmte Geräte zu senden und zu empfangen.
Wenn du deinen ESP32 mit einem Wi-Fi-Netzwerk verbindest, weist der Router ihm eine IP-Adresse zu. Diese IP-Adresse ermöglicht es anderen Geräten im Netzwerk, mit dem ESP32 zu kommunizieren. Zum Beispiel sendet dein Gerät beim Zugriff auf eine vom ESP32 gehostete Webseite eine Anfrage an die IP-Adresse des ESP32, der dann die angeforderte Webseite zurückliefert.
Wi-Fi-Standards und Frequenzen
Wi-Fi-Technologie hat verschiedene Standards und Frequenzbereiche. Die gängigsten Wi-Fi-Standards sind 802.11b, 802.11g, 802.11n und 802.11ac, die unterschiedliche Geschwindigkeiten und Funktionen bieten.
Wi-Fi arbeitet auf zwei Hauptfrequenzbändern: 2,4 GHz und 5 GHz. Das 2,4-GHz-Band hat eine größere Reichweite, ist aber anfälliger für Störungen durch andere Geräte wie Mikrowellen und schnurlose Telefone. Das 5-GHz-Band bietet höhere Geschwindigkeiten, hat aber eine geringere Reichweite.
Aktuelle ESP32-Wi-Fi-Module verwenden meist den 802.11 b/g/n (802.11n bis zu 150 Mbps), 2,4-GHz-Standard.
Im nächsten Abschnitt lernst du, was ein Webserver ist und wie er verwendet werden kann, um einen ESP32 drahtlos zu steuern.
Was ist ein Webserver?
Ein web server ist eine Softwareanwendung, die auf einem Computer läuft und für das Bereitstellen von Webseiten an Clients/Geräte zuständig ist. Er fungiert als Vermittler zwischen dem Webbrowser des Clients und der angeforderten Webseite. Wenn ein Client/Gerät eine Webseite anfordert, verarbeitet der Webserver die Anfrage und sendet die angeforderte Webseite zurück an den Client.
Im Kontext der drahtlosen Steuerung eines ESP32 über Wi-Fi ermöglicht ein Webserver die Erstellung einer Benutzeroberfläche, die über einen Webbrowser auf einem Computer zugänglich ist. Diese Benutzeroberfläche kann verwendet werden, um Befehle an den ESP32 über den Router zu senden, z. B. um LEDs ein- oder auszuschalten.
Der Webserver auf dem ESP32 hört auf eingehende Anfragen von Clients, wie einem Webbrowser, und antwortet darauf, indem er die passende Webseite sendet oder die angeforderte Aktion ausführt. In unserem Fall implementieren wir einen Webserver auf dem ESP32, der Befehle von einer Webseite empfängt und die LEDs entsprechend steuert.
Der Webserver sendet typischerweise eine Webseite im HTML-Format, und im nächsten Abschnitt erhältst du eine kurze Einführung in HTML.
Was ist HTML?
HTML steht für HyperText Markup Language. Es ist die standardisierte Computersprache zur Erstellung von Webseiten und Anwendungen. HTML verwendet eine Reihe von Tags, um Elemente und deren Eigenschaften innerhalb einer Webseite zu definieren.
HTML-Tags sind in spitze Klammern (< >) eingeschlossen und bestehen aus einem öffnenden und einem schließenden Tag. Das öffnende Tag markiert den Beginn eines Elements, das schließende Tag das Ende. Der Inhalt zwischen den Tags repräsentiert die Informationen des Elements.
HTML-Tags können verwendet werden, um Überschriften, Absätze, Listen, Bilder, Links, Tabellen, Formulare und vieles mehr zu definieren. Diese Tags helfen, den Inhalt zu strukturieren und zu organisieren, sodass Browser die Webseite korrekt interpretieren und anzeigen können.
Beispiel einer HTML-Seite
Hier ist ein Beispiel für die einfache HTML-Webseite, die wir verwenden, um unseren ESP32 zu steuern:
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
In diesem Beispiel haben wir ein HTML-Dokument, das innerhalb der “ html “ Tags eingeschlossen ist. Der “ head “ Bereich enthält Meta-Informationen über die Webseite, wie den im Browser-Titel angezeigten Titel.
<head> <title>ESP32 Controller</title> </head>
Der “ body “ Bereich enthält den sichtbaren Inhalt der Webseite. Innerhalb des “ body “ Bereichs sehen wir verschiedene andere HTML-Tags. Das “ h1 “ Tag steht für eine Überschrift, und das “ p “ ein Absatz. Innerhalb des Absatzes befinden sich zwei “ a “ Tags, die Hyperlinks erzeugen. In diesem Fall sind die Hyperlinks an zwei Buttons gebunden, die eine LED ein- oder ausschalten.
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
Anzeige der Webseite
Wenn du diesen HTML-Code in eine Datei (z. B. test.html) schreibst und in deinem Webbrowser öffnest, würdest du folgende Webseite sehen:
Du wirst feststellen, dass beim Klicken auf die Buttons noch nichts passiert. Das liegt daran, dass unser Webserver noch nicht läuft, der auf diese Buttons reagieren wird. Genau das werden wir im nächsten Abschnitt implementieren.
Implementierung des Webservers
Der folgende Code zeigt die Implementierung eines Webservers auf dem ESP32, mit dem du die eingebaute LED des ESP32 per Knopfdruck auf der Webseite ein- und ausschalten kannst. Schau dir zuerst den kompletten Code an. Ich werde die einzelnen Teile im Folgenden erklären.
// Switch built-in LED of ESP32 via web server. Based on
// https://github.com/espressif/arduino-esp32/blob/master/libraries/WiFi/examples/SimpleWiFiServer/SimpleWiFiServer.ino
#include "WiFi.h"
const char* ssid = "*****";
const char* password = "*****";
const int ledPin = LED_BUILTIN;
const char* html = R""""(
HTTP/1.1 200 OK
Content-type:text/html
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
button { background-color: slateblue; color: white; border: none; width: 50px; height: 30px; }
button:hover { background-color: darkslateblue; }
button:active { background-color: mediumslateblue; }
</style>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
)"""";
WiFiServer server(80);
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
WiFiClient client = server.accept();
if (client) {
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
if (c == '\n') {
if (currentLine.length() == 0) {
client.println(html);
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
// Execute commands
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
}
}
client.stop();
}
}
Beachte, dass du den ESP32-Core installiert haben musst, um diesen Code in der Arduino IDE verwenden zu können. Falls du Hilfe brauchst, haben wir folgendes Tutorial: How to Program ESP32 with Arduino IDE.
Bibliotheken und Konstanten
Zuerst binden wir die notwendige Bibliothek für die Wi-Fi-Kommunikation ein. Sie ist Teil des ESP32-Cores und erfordert keine spezielle Installation.
#include "WiFi.h"
Als nächstes definieren wir die SSID und das Passwort für unser Wi-Fi-Netzwerk. Du musst diese durch die Zugangsdaten deines eigenen Netzwerks ersetzen. Die SSID ist der Name deines Heim-Wi-Fi, z. B. „my_home_wifi“, und das Passwort ist das, das du normalerweise zum Verbinden mit diesem Netzwerk verwendest (mit deinem Telefon oder Computer).
const char* ssid = "*****"; const char* password = "*****";
Wir definieren außerdem die Pin-Nummer für die eingebaute LED des ESP32. Du kannst auch problemlos eine externe LED oder andere Geräte wie Relais anschließen. Füge einfach die entsprechenden Pin-Definitionen hinzu und verbinde die Hardware.
const int ledPin = LED_BUILTIN;
HTML für die Webseite
Als Nächstes schreiben wir den HTML-Code, der an den Webbrowser gesendet wird. Dieser HTML-Code enthält einen Titel, etwas CSS Styling und Buttons zur Steuerung der LED.
const char* html = R""""(
HTTP/1.1 200 OK
Content-type:text/html
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
button { background-color: slateblue; color: white; border: none; width: 50px; height: 30px; }
button:hover { background-color: darkslateblue; }
button:active { background-color: mediumslateblue; }
</style>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
)"""";
Es ist im Wesentlichen derselbe HTML-Code, den ich dir im Abschnitt „Was ist HTML?“ gezeigt habe, nur mit etwas zusätzlichem CSS Styling, um die Webseite ansprechender zu gestalten. Unten siehst du ein Bild, wie das im Browser (hier Edge) aussieht:
Danach erstellen wir ein Wi-Fi-Server-Objekt auf Port 80 in der folgenden Zeile. Port 80 ist der übliche Port zum Bereitstellen von Webseiten. Mehr dazu kannst du ports here nachlesen.
WiFiServer server(80);
Setup-Funktion
In der Setup-Funktion initialisieren wir die serielle Kommunikation für Debugging-Zwecke, setzen den LED-Pin als Ausgang und schalten die LED ein.
Serial.begin(115200); pinMode(ledPin, OUTPUT); digitalWrite(ledPin, HIGH);
Dann verbinden wir uns mit dem Wi-Fi-Netzwerk unter Verwendung der angegebenen SSID und des Passworts und warten auf eine erfolgreiche Verbindung. Überprüfe den Serial Monitor: Wenn nur „Punkte“ erscheinen, stimmt etwas nicht. Stelle sicher, dass SSID und Passwort korrekt sind.
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
Wenn die Verbindung zum Wi-Fi-Netzwerk hergestellt wurde, geben wir die IP-Adresse aus. Kopiere sie dir, denn du wirst sie später für den Webbrowser benötigen.
Sobald die Verbindung zum Wi-Fi steht, starten wir den Wi-Fi-Server mit
server.begin();
Loop-Funktion
In der Loop-Funktion prüfen wir, ob ein Client mit dem Server verbunden ist. Der Client ist der Webbrowser. Wenn ja, lesen wir die eingehenden Daten vom Client und verarbeiten sie.
Der folgende Code basiert größtenteils auf dem SimpleWiFiServer Beispiel, das von WiFi library bereitgestellt wird. Für detailliertere Informationen oder Anwendungen schau dort vorbei.
void loop() {
WiFiClient client = server.accept();
if (client) {
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
if (c == '\n') {
if (currentLine.length() == 0) {
client.println(html);
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
// Execute commands
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
}
}
client.stop();
}
}
Innerhalb der Loop lesen wir jedes Zeichen vom Client und hängen es an die aktuelle Zeile an. Wenn wir ein Zeilenendezeichen finden, prüfen wir, ob die aktuelle Zeile leer ist. Ist sie das, senden wir den HTML-Code an den Client. Wenn nicht, löschen wir die aktuelle Zeile.
Der wichtigste Teil ist die Prüfung des Inhalts der aktuellen Zeile. Wenn die Zeile mit „/led/on“ oder „/led/off“ endet, schalten wir die LED entsprechend ein oder aus, indem wir digitalWrite für die ledPin aufrufen.
Beachte, dass die Logik für die eingebaute LED des ESP32 lite (und einiger anderer Boards) invertiert ist. Wir setzen den ledPin auf LOW, wenn wir die LED „ein“ schalten wollen, und umgekehrt. Für externe LEDs muss der ledPin auf HIGH gesetzt werden, um die LED einzuschalten.
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
Falls du weitere Befehle hinzufügen möchtest, ist hier der richtige Platz! Zum Beispiel könnten wir ein Relais ein- oder ausschalten, vorausgesetzt, es ist an relayPin angeschlossen, indem wir folgende Zeilen hinzufügen:
if (currentLine.endsWith("GET /relay/on")) {
digitalWrite(relayPin, LOW);
}
if (currentLine.endsWith("GET /relay/off")) {
digitalWrite(relayPin, HIGH);
}
Denk nur daran, auch eine relayPin Konstante und zusätzliche Buttons auf der Webseite hinzuzufügen:
<p>Relay:
<a href="/relay/on"><button>ON</button></a>
<a href="/relay/off"><button>OFF</button></a>
</p>
Beachte, dass die Befehle „led/on“, „led/off“ usw., die auf der Webseite und im Code verwendet werden, übereinstimmen müssen!
Wenn du einen Button drückst, erscheint der Befehl als Link hinter der IP-Adresse in deinem Webbrowser:
Du kannst diese Links auch verwenden, um Befehle auszulösen, anstatt die Buttons zu drücken. Außerdem kannst du diese Links in anderen Webseiten nutzen, z. B. auf einer IoT-Home-Server-Webseite, die in deinem Wi-Fi-Netzwerk läuft.
Webserver starten
Wenn du deinen ESP32 zurücksetzt und den Serial Monitor öffnest, solltest du einen Text sehen, der die IP-Adresse deines ESP32 anzeigt. In meinem Fall ist das z. B. 192.168.1.165.
Du wirst eine andere IP-Adresse sehen, die deinem ESP32-Board zugewiesen wurde. Kopiere diese Adresse in die Suchleiste deines Browsers. Du solltest die Webseite sehen, die der Webserver auf deinem ESP32 erstellt:
Jetzt kannst du die Buttons drücken, um die eingebaute LED deines ESP32 ein- oder auszuschalten.
Die Webseite ist relativ sicher, da sie nur innerhalb deines lokalen Wi-Fi-Netzwerks zugänglich ist. Sie ist nicht öffentlich aus dem Internet erreichbar! Wenn du das möchtest, erfordert das mehr Arbeit und Sicherheitsmaßnahmen, da es riskant ist, dein Wi-Fi-Netzwerk für das Internet zu öffnen!
Ansonsten war’s das!
Der obige Code bietet dir ein Framework, das du leicht mit weiteren Buttons, Schiebereglern oder anderen UI-Elementen erweitern kannst, um lights, servos, stepper motors, relays oder alles andere zu steuern, was an einen ESP32 angeschlossen werden kann.
Fazit
In diesem Tutorial haben wir gelernt, wie man einen Webserver auf dem ESP32 implementiert, um ihn drahtlos über Wi-Fi zu steuern. Durch die beschriebenen Schritte kannst du nun LEDs über eine Webseite ein- und ausschalten.
Wir haben mit den Grundlagen von Wi-Fi begonnen und verstanden, wie es funktioniert. Dann haben wir das Konzept eines Webservers und seine Rolle bei der Kommunikation zwischen ESP32 und Webseite erkundet. Außerdem haben wir die Bedeutung von HTML besprochen, mit dem wir die Benutzeroberfläche zur Steuerung der LEDs erstellen. Nach dieser soliden Grundlage haben wir den Webserver auf dem ESP32 implementiert.
Wenn du diesem Tutorial gefolgt bist, solltest du nun einen voll funktionsfähigen Webserver auf deinem ESP32 laufen haben. Du kannst die Webseite von jedem Gerät mit Webbrowser aufrufen, das mit dem gleichen Wi-Fi-Netzwerk verbunden ist.
Fühle dich frei, die Funktionalität zu erweitern, indem du weitere Features zur Webseite hinzufügst, z. B. zur Steuerung anderer Komponenten oder Sensoren, die an den ESP32 angeschlossen sind. Wenn du weitere Fragen hast oder Hilfe benötigst, schau dir bitte den Abschnitt Häufig gestellte Fragen unten an.
Häufig gestellte Fragen
Hier sind einige häufig gestellte Fragen zur Implementierung eines Webservers zur drahtlosen Steuerung deines ESP32 über Wi-Fi:
F: Was ist der Vorteil, den ESP32 drahtlos zu steuern?
A: Die drahtlose Steuerung des ESP32 ermöglicht es dir, dein Gerät aus der Ferne zu bedienen, ohne physischen Kontakt. Das bietet Komfort und Flexibilität, besonders wenn der ESP32 an schwer zugänglichen Orten installiert ist.
F: Welche Teile werden für dieses Projekt benötigt?
A: Für das Projekt benötigst du nur einen ESP32 (mit Wi-Fi) und die Arduino IDE mit installiertem ESP32-Core.
F: Wie funktioniert Wi-Fi mit dem ESP32?
A: Der ESP32 verfügt über integrierte Wi-Fi-Fähigkeiten, die es ihm ermöglichen, sich mit einem drahtlosen Netzwerk zu verbinden. Er kann als Client fungieren, um sich mit einem bestehenden Wi-Fi-Netzwerk zu verbinden, oder als Access Point, um ein eigenes Netzwerk zu erstellen. Durch die Verbindung mit einem Wi-Fi-Netzwerk kann der ESP32 mit anderen Geräten im Netzwerk kommunizieren.
F: Kann ich diesen Code für einen ESP8266 verwenden?
A: Ja, das kannst du. Ersetze einfach die WiFi-Bibliothek, indem du #include "WiFi.h" durch #include "ESP8266WiFi.h" ersetzt.
F: Was ist ein Webserver?
A: Ein Webserver ist eine Softwareanwendung, die Webseiten an Clients über das Internet oder ein lokales Netzwerk bereitstellt. Im Kontext dieses Projekts fungiert der ESP32 als Webserver, der eine Webseite bereitstellt, mit der Benutzer die angeschlossenen LEDs steuern können.
F: Was ist HTML?
A: HTML (Hypertext Markup Language) ist die standardisierte Auszeichnungssprache zur Erstellung von Webseiten. Sie bietet Struktur und Formatierung für den Inhalt einer Webseite. In diesem Projekt verwenden wir HTML, um die Webseite zu erstellen, die die LEDs steuert.
F: Wie kann ich mich über das Internet mit dem Webserver verbinden?
A: Um über das Internet auf den Webserver zuzugreifen, muss dein ESP32 mit einem Wi-Fi-Netzwerk mit Internetzugang verbunden sein. Sobald der ESP32 mit dem Internet verbunden ist, kannst du den Webserver erreichen, indem du seine IP-Adresse in einem Webbrowser auf einem beliebigen internetfähigen Gerät eingibst. Du musst deinen Router so konfigurieren, dass eingehende Verbindungen zur IP-Adresse des ESP32 erlaubt sind, was ein Sicherheitsrisiko darstellt! Sei vorsichtig!
F: Wie erstelle ich einen Login-Bildschirm für den Webserver?
A: Um einen Login-Bildschirm für den Webserver zu erstellen, kannst du HTML und CSS verwenden, um das Login-Formular zu gestalten. Du kannst Eingabefelder für Benutzername und Passwort sowie einen Absende-Button hinzufügen, um die Anmeldedaten an den Server zu senden. Auf Serverseite kannst du eine Authentifizierungsmechanismus implementieren, der die Anmeldedaten überprüft und bei Gültigkeit den Zugriff auf den Webserver gewährt.
Wenn du weitere Fragen hast oder beim Implementieren des Webservers auf deinem ESP32 auf Probleme stößt, kannst du gerne im Kommentarbereich unten nachfragen.
Links
Hier eine Sammlung von Links zu ähnlichen Projekten, die die Steuerung von ESP32- oder ESP8266-Mikrocontrollern über Wi-Fi mittels Webserver behandeln.
- ESP32_HTTPS_Server – Arduino Reference
- ESP32 Web Server – Arduino IDE
- ESP32 – Web Server
- ESP32 Relay Module – Control AC Appliances
- In-depth: Create A Simple ESP32 Web Server In Arduino IDE
- WebServer.h – espressif/arduino-esp32
