ESP32 - Webserver
In diesem Schritt-für-Schritt-Tutorial zeigen wir Ihnen, wie Sie ein ESP32-Board so programmieren, dass es zu einem Webserver wird. Sie werden in der Lage sein, über einen Webbrowser auf Ihrem Computer oder Smartphone auf die vom ESP32 gehosteten Webseiten zuzugreifen, wodurch Sie Daten vom ESP32 anzeigen und ihn steuern können. Um es einfach zu gestalten, gehen wir von einfachen zu anspruchsvolleren Schritten vor, wie folgt:
- ESP32 Web Server - Zeigt einfachen Text auf der Webseite.
- ESP32 Web Server - Überwacht Sensorwerte vom ESP32 über das Web.
- ESP32 Web Server - Steuert den ESP32 über das Web.
- ESP32 Web Server - Trennung von HTML-Inhalten (HTML, CSS und JavaScript) vom ESP32-Code und deren Platzierung in separaten Dateien in der Arduino IDE.
- ESP32 Web Server - Erstellen mehrerer Seiten wie index.html, temperature.html, led.html, error_404.html und error_405.html..., und weitere.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Auslesen des Sensorwertes vom ESP32 über das Web
Das ist relativ einfach. Der ESP32-Code führt die folgenden Aufgaben aus:
- Einen Webserver erstellen, der auf HTTP-Anfragen von einem Webbrowser lauscht.
- Nachdem eine Anfrage von einem Webbrowser eingegangen ist, antwortet der ESP32 mit den folgenden Informationen:
- HTTP-Header
- HTTP-Body: Dies umfasst HTML-Inhalt und den vom Sensor ausgelesenen Wert.
- Wenn Sie ESP32 zum ersten Mal verwenden, sehen Sie sich wie man die Umgebung für ESP32 in der Arduino IDE einrichtet.
- Schließen Sie das ESP32-Board über ein Micro-USB-Kabel an Ihren PC an.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Öffnen Sie den Library Manager, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “ESPAsyncWebServer”, dann finden Sie den ESPAsyncWebServer, der von lacamera erstellt wurde.
- Klicken Sie auf die Schaltfläche Install, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Kopieren Sie den obigen Code und öffnen Sie ihn mit der Arduino-IDE.
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code zu Ihren eigenen.
- Klicken Sie in der Arduino-IDE auf Hochladen, um den Code auf den ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Überprüfen Sie das Ergebnis im seriellen Monitor.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Als Ergebnis sehen Sie im Serial Monitor Folgendes.
- Wenn Sie den Webbrowser über die IP-Adresse aufrufen, wird Ihnen eine sehr einfache Webseite angezeigt, die „Hello, ESP32!“ zeigt. Die Seite wird wie folgt aussehen:
Nachfolgend finden Sie den ESP32-Code, der die oben genannten Aufgaben ausführt:
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
request->send(200, "text/html", "<html><body><h1>Hello, ESP32!</h1></body></html>");
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
Schnelle Schritte
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
Sensorwert vom ESP32 über das Web auslesen
Unten ist der ESP32-Code, der den Temperaturwert auf der Webseite ausgibt:
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
request->send(200, "text/html", html);
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
Schnelle Schritte
- Kopieren Sie den obigen Code und öffnen Sie ihn mit der Arduino IDE
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code auf Ihre eigenen Werte
- Laden Sie den Code auf den ESP32 hoch
- Sobald Sie im Webbrowser die IP-Adresse eingeben, wird Ihnen eine sehr einfache Webseite angezeigt, die Informationen über das ESP32-Board enthält. Die Seite wird wie folgt aussehen:
Damit die Webseite fantastisch aussieht, verwenden Sie eine grafische Benutzeroberfläche (GUI). Werfen Sie einen Blick auf den letzten Abschnitt dieses Tutorials.
※ Notiz:
Mit dem oben gezeigten Code muss die Seite im Webbrowser neu geladen werden, um die Temperaturaktualisierung zu erhalten. Im nächsten Teil werden wir lernen, wie man eine Webseite dazu bringt, den Temperaturwert im Hintergrund zu aktualisieren, ohne die Webseite neu zu laden.
Steuerung des ESP32 über das Web
Die Steuerung von etwas, das mit dem ESP32 verbunden ist, ist etwas anspruchsvoller als das bloße Lesen eines Wertes. Das liegt daran, dass der ESP32 die Anfrage, die er vom Webbrowser erhält, verstehen muss, um zu wissen, welche Aktion er ausführen soll.
Für ein umfassenderes und detaillierteres Beispiel empfehle ich, die unten aufgeführten Tutorials anzusehen.
HTML-Inhalte in eine separate Datei innerhalb der Arduino-IDE aufteilen
Wenn Sie eine einfache Webseite mit minimalem Inhalt erstellen möchten, können Sie den HTML-Code direkt in den ESP32-Code einbetten, wie bereits erläutert.
Allerdings, wenn Sie eine anspruchsvollere und beeindruckendere Webseite mit größerem Inhalt erstellen möchten, wird es unpraktisch, den gesamten HTML-, CSS- und JavaScript-Code direkt in den ESP32-Code einzubinden. In dieser Situation können Sie einen anderen Ansatz verwenden, um den Code zu verwalten:
- Der ESP32-Code wird, wie zuvor, in einer .ino-Datei platziert.
- Der HTML-Code (HTML, CSS, JavaScript) wird in einer separaten .h-Datei platziert. Dadurch können Sie den Inhalt der Webseite vom ESP32-Code getrennt halten, was die Verwaltung und Änderung erleichtert.
Dazu müssen wir zwei große Schritte tun:
- HTML-Inhalt vorbereiten
- ESP32 programmieren
HTML-Inhalt vorbereiten
- Erstellen Sie eine HTML-Datei auf Ihrem lokalen PC, die den HTML-Inhalt (HTML, CSS und JavaScript) für Ihr UI-Design enthält.
- In der HTML-Datei verwenden Sie dort, wo Daten vom ESP32 angezeigt werden sollten, einen beliebigen Wert.
- Testen Sie es und ändern Sie es, bis Sie zufrieden sind.
- Wir werden den HTML-Inhalt in die .h-Datei in der Arduino IDE einfügen. Siehe den nächsten Schritt.
ESP32-Programmierung
- Öffnen Sie die Arduino-IDE und erstellen Sie ein neues Sketch. Geben Sie ihm einen Namen, zum Beispiel newbiely.com.ino.
- Kopieren Sie den unten bereitgestellten Code und fügen Sie ihn in die erstellte Datei ein.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // Include the index.h file
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the HTML page from the file
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
request->send(200, "text/html", webpage);
});
// Define a route to get the temperature data
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /temperature"); // for debugging
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
request->send(200, "text/plain", temperatureStr);
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code auf Ihre eigenen
- Erstellen Sie die Datei index.h in der Arduino-IDE durch:
- Klicken Sie entweder auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie Neuer Tab, oder verwenden Sie die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK-Schaltfläche
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h ein.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Ersetzen Sie die Zeile REPLACE_YOUR_HTML_CONTENT_HERE durch den HTML-Inhalt, den Sie zuvor vorbereitet haben. Es gibt kein Problem mit dem Zeilenumbruchszeichen. Unten ist ein Beispiel für die Datei index.h:
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Temperature</title>
</head>
<body>
<h1>ESP32 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</html>
)=====";
#endif
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie in der Arduino IDE auf die Schaltfläche Hochladen, um den Code auf den ESP32 hochzuladen.
- Greifen Sie wie zuvor über einen Webbrowser auf die Webseite des ESP32-Boards zu. Sie sehen sie wie unten dargestellt:
※ Notiz:
In den oben gezeigten Codes:
- Der HTML-Code ist so konzipiert, dass die Temperatur im Hintergrund in regelmäßigen Abständen aktualisiert wird, derzeit im Code auf alle 4 Sekunden eingestellt. Das bedeutet, dass der Temperaturwert automatisch aktualisiert wird, ohne dass die Webseite manuell neu geladen werden muss. Sie können das Aktualisierungsintervall im Code an Ihre Vorlieben anpassen.
- ESP32-Code bedient zwei Anfragen vom Webbrowser.
- Eine Anfrage, um den HTML-Inhalt der Webseite zurückzugeben
- Die andere, um den von der Webseite angeforderten Temperaturwert im Hintergrund zurückzugeben
Für eine umfassendere und detailliertere Darstellung verweisen Sie bitte auf das ESP32 - DS18B20-Temperatursensor über das Web Tutorial.
※ Notiz:
- Wenn Sie Änderungen am HTML-Inhalt in der index.h-Datei vornehmen, aber in der newbiely.com.ino-Datei nichts ändern, wird die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP32 nicht aktualisieren oder neu laden.
- Um die Arduino IDE in dieser Situation dazu zu zwingen, den HTML-Inhalt zu aktualisieren, müssen Sie eine Änderung in der newbiely.com.ino-Datei vornehmen. Zum Beispiel können Sie eine leere Zeile hinzufügen oder einen Kommentar einfügen. Diese Aktion veranlasst die IDE dazu, zu erkennen, dass es Änderungen im Projekt gab, wodurch sichergestellt wird, dass Ihr aktualisierter HTML-Inhalt in den Upload aufgenommen wird.
ESP32-Webserver - Mehrere Seiten
Schau dir dieses ESP32 - Webserver mit mehreren Seiten Tutorial an.