ESP8266 - Webserver
Dieses Tutorial erklärt dir, wie man programmiert, um ein ESP8266-Board in einen Webserver zu verwandeln. Du kannst über einen Webbrowser auf deinem Computer oder Smartphone auf die vom ESP8266 gehosteten Webseiten zugreifen, wodurch du Daten vom ESP8266 anzeigen und es steuern kannst. Um es einfach zu machen, gehen wir im Folgenden von einfachen zu anspruchsvolleren Schritten über:
- ESP8266-Webserver - Zeigt einfachen Text auf der Webseite.
- ESP8266-Webserver - Überwachung von Sensorwerten des ESP8266 über das Web.
- ESP8266-Webserver - Steuerung des ESP8266 über das Web.
- ESP8266-Webserver - Trennung von HTML-Inhalten (HTML, CSS und JavaScript) vom ESP8266-Code und deren Ablage in separaten Dateien in der Arduino-IDE.
- ESP8266-Webserver - Erstellung mehrerer Seiten wie index.html, temperature.html, led.html, error_404.html und error_405.html..., und mehr.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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 Sensorwerts vom ESP8266 über das Web
Das ist relativ einfach. Der ESP8266-Code führt die folgenden Aufgaben aus:
- Einen Webserver erstellen, der auf HTTP-Anfragen von einem Webbrowser wartet.
- Beim Empfang einer Anfrage von einem Webbrowser antwortet der ESP8266 mit HTML-Inhalt, der den vom Sensor ausgelesenen Wert enthält.
Im Folgenden befindet sich der ESP8266-Code, der die oben genannten Aufgaben ausführt:
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", "<html><body><h1>Hello, ESP8266!</h1></body></html>");
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Schnelle Schritte
Um mit ESP8266 in der Arduino-IDE zu beginnen, befolgen Sie diese Schritte:
- Schau dir das Tutorial zur Einrichtung der ESP8266-Umgebung in der Arduino-IDE an, falls dies dein erster Umgang mit dem ESP8266 ist.
- Verbinde die Bauteile gemäß der Abbildung.
- Schließe das ESP8266-Board über ein USB-Kabel an deinen Computer an.
- Öffne die Arduino-IDE auf deinem Computer.
- Wähle das richtige ESP8266-Board, zum Beispiel NodeMCU 1.0 (ESP-12E Module), und seinen entsprechenden COM-Port.
- Kopiere den obigen Code und öffne ihn in der Arduino-IDE.
- Passe die WLAN-Informationen (SSID und Passwort) im Code an deine eigenen Daten an.
- Klicke in der Arduino-IDE auf die Hochladen-Schaltfläche, um den Code auf den ESP8266 hochzuladen.
- Öffne den Seriellen Monitor.
- Sieh dir das Ergebnis im Seriellen Monitor an.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
- 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 seriellen Monitor die folgende Ausgabe.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie den Webbrowser mit der IP-Adresse öffnen, wird Ihnen eine sehr einfache Webseite angezeigt, die „Hello, ESP8266!“ zeigt. Die Seite wird wie folgt aussehen:
Auslesen des Sensorwerts vom ESP8266 über das Web
Nachstehend ist der ESP8266-Code, der den Temperaturwert auf der Webseite ausgibt:
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 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>";
server.send(200, "text/html", html);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// 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 ESP8266 hoch
- Sobald Sie den Webbrowser über die IP-Adresse aufrufen, wird Ihnen eine sehr einfache Webseite angezeigt, die Informationen über das ESP8266-Board enthält. Die Seite wird wie folgt aussehen:
Um die Webseite mit einer grafischen Benutzeroberfläche (GUI) fantastisch aussehen zu lassen, schauen Sie sich den letzten Abschnitt dieses Tutorials an.
※ Notiz:
Mit dem oben bereitgestellten Code müssen Sie die Seite im Webbrowser neu laden, um die Temperaturaktualisierung zu erhalten. Im nächsten Teil lernen wir, wie die Webseite den Temperaturwert im Hintergrund aktualisieren kann, ohne die Webseite neu zu laden.
Steuerung des ESP8266 über das Web
Die Steuerung von etwas, das mit dem ESP8266 verbunden ist, ist etwas anspruchsvoller als nur einen Wert zu lesen. Das liegt daran, dass der ESP8266 die Anfrage verstehen muss, die er vom Webbrowser erhält, 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-Inhalt in eine andere Datei im Arduino-IDE trennen
Wenn Sie eine einfache Webseite mit minimalem Inhalt erstellen möchten, können Sie den HTML-Code, wie zuvor erläutert, direkt in den ESP8266-Code einbetten.
Wenn Sie jedoch eine anspruchsvollere und beeindruckendere Webseite mit größerem Inhalt erstellen möchten, wird es unpraktisch, alle HTML-, CSS- und JavaScript-Dateien direkt in den ESP8266-Code einzubinden. In dieser Situation können Sie einen anderen Ansatz verwenden, um den Code zu verwalten:
- Der ESP8266-Code wird in eine .ino-Datei eingefügt, genauso wie zuvor.
- Der HTML-Code (HTML, CSS, JavaScript) wird in eine separate .h-Datei gelegt. Dadurch können Sie den Inhalt der Webseite vom ESP8266-Code getrennt halten, was die Verwaltung und Änderung erleichtert.
Dazu müssen wir zwei große Schritte durchführen:
- HTML-Inhalt vorbereiten
- ESP8266 programmieren
HTML-Inhalte 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, in der die Daten vom ESP8266 angezeigt werden sollen, verwenden Sie einen beliebigen Wert.
- Testen Sie es und nehmen Sie Änderungen vor, bis Sie zufrieden sind.
- Wir werden den HTML-Inhalt in die .h-Datei in der Arduino IDE legen. Siehe den nächsten Schritt.
Programmierung des ESP8266
- Öffnen Sie die Arduino IDE und erstellen Sie eine neue Skizze. Geben Sie ihr einen Namen, zum Beispiel newbiely.com.ino.
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die erstellte Datei ein.
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.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
ESP8266WebServer server(80); // Web server on port 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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the HTML page from the file
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", webpage);
});
// Define a route to get the temperature data
server.on("/temperature", HTTP_GET, []() {
Serial.println("ESP8266 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);
server.send(200, "text/plain", temperatureStr);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
- Passe die WLAN-Informationen (SSID und Passwort) im Code an deine eigenen
- Erstelle die index.h-Datei im Arduino-IDE durch:
- Klicken Sie entweder auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie Neue Registerkarte aus, oder verwenden Sie die Tastenkombination Strg+Umschalt+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-Datei ein.
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-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 Zeilenumbruchzeichen. Das Folgende ist ein Beispiel für die Datei index.h:
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Temperature</title>
</head>
<body>
<h1>ESP8266 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 auf die Hochladen-Schaltfläche in der Arduino-IDE, um den Code auf den ESP8266 hochzuladen.
- Greifen Sie wie zuvor über Ihren Webbrowser auf die Webseite des ESP8266-Boards zu. Sie wird unten wie folgt angezeigt:
※ Notiz:
In den obigen Codes:
- Der HTML-Code ist darauf ausgelegt, die Temperatur im Hintergrund in regelmäßigen Abständen zu aktualisieren; derzeit im Code auf alle 4 Sekunden festgelegt. 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 Präferenzen anpassen.
- Der ESP8266-Code bedient zwei Anfragen des Webbrowsers.
- Eine Anfrage, den HTML-Inhalt der Webseite zurückzugeben
- Die andere, den von der Webseite angeforderten Temperaturwert im Hintergrund zurückzugeben
Für eine umfassendere und detailliertere Darstellung verweisen Sie bitte auf das ESP8266 - DS18B20 Temperature Sensor via Web Tutorial.
※ Notiz:
- Wenn Sie Änderungen am HTML-Inhalt in der Datei index.h vornehmen, aber in der Datei newbiely.com.ino nichts ändern, aktualisiert die Arduino-IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP8266 nicht.
- Um die Arduino-IDE in dieser Situation dazu zu zwingen, den HTML-Inhalt zu aktualisieren, müssen Sie eine Änderung in der Datei newbiely.com.ino 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, und stellt sicher, dass Ihr aktualisierter HTML-Inhalt in den Upload aufgenommen wird.
ESP8266 Webserver - Mehrere Seiten
Schau dir dieses ESP8266 - Web Server Multiple Pages Tutorial an.