Ein Webserver stellt über eine IP-Adresse Dienste zur Verfügung. Die Dienste müssen vom Client (Browser) angefordert werden. Das ist wie in einer Gaststätte.
Zuerst muss der Access-Point eingerichtet werden, der den Webserver zur Verfügung stellt. Da klar ist, dass der DHT11 Messwerte aufnehmen wird, bindet man ihn schon ein.
import network
import ujson
import machine
import time
from machine import Pin
import dht
import socket
#with open("index.html","r") as file:
html=file.read()
# WLAN verbinden
station = network.WLAN(network.AP_IF)
station.active(True)
station.config(essid="ESP32", password="12345678", authmode=network.AUTH_WPA_PSK)
station.ifconfig(('192.168.10.1', '255.255.255.0', '192.168.10.1', '192.168.10.1'))
while station.active() == False: # Warten bis der Access Point aktiv ist
pass
print("Access Point aktiv")
print(station.ifconfig()) # Es werden die Daten des Access-Point angezeigt
print('Verbindung hergestellt:', station.ifconfig())
# DHT11 Sensor an Pin 14
sensor = dht.DHT11(Pin(23))
# Funktion, um die Daten zu lesen
def lese_sensor():
try:
sensor.measure()
temp = sensor.temperature()
feucht = sensor.humidity()
return {'temperatur': temp, 'feucht': feucht}
except:
return {'error': 'Sensorfehler'}
# Webserver starten
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.bind(addr)
s.listen(1)
print('Webserver läuft auf', addr)
Jetzt folgt im Programm die unendliche Schleife. In ihr wartet der Webserver auf die entsprechende Bestellung und liefert dann aus. Steht in der Anfrage GET /, wird die index.html geliefert. Auf die Anfrage GET /data werden als JSON-Objekt die Messwerte geliefert. Geht irgendwas schief, kommt die Fehlermeldung.
Noch funktioniert es aber noch nicht, da die index.html noch verändert werden muss.
while True:
cl, addr = s.accept()
print('Verbindung von', addr)
request = cl.recv(1024)
request_str=request.decode('utf-8')
if 'GET / ' in request_str:
# HTML-Seite senden
cl.send('HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n')
cl.send(html)
elif 'GET /data' in request_str:
sensor_data = lese_sensor()
response = ujson.dumps(sensor_data)
cl.send('HTTP/1.0 200 OK\r\nAccess-Control-Allow-Origin: *\r\nContent-Type: application/json\r\n\r\n')
cl.send(response)
else:
# 404 Not Found
cl.send('HTTP/1.0 404 Not Found\r\n\r\n')
cl.close()
Die index.html ist kurz und schmerzlos gehalten. Es werden zwei Elemente für die beiden Messwerte erzeugt, die von der Funktion hole_daten() mit den Daten gefüllt werden. Die Funktion hole_daten() wird durch setInterval(... jede Sekunde aufgerufen.
Eine Beschreibung von fetch() findet man im Hinweis.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Sensor Daten</title>
<link rel="icon" type="image/vnd.ico" href="favicon.ico">
</head>
<body>
<h1>Temperatur und Luftfeuchtigkeit</h1>
<p>Temperatur: <span id="temp">--</span> °C</p>
<p>Luftfeuchtigkeit: <span id="feucht">--</span> %</p>
<script>
function hole_daten() {
fetch('/data') //die Anfrage enthält /data
//Nimm die Server-Antwort und wandle sie in ein lesbares JavaScript-Objekt um,
//bevor wir weiter damit arbeiten:
.then(response => response.json())
//die einzelnen Teile von data werden
.then(data => {
document.getElementById('temp').textContent = data.temperatur;
document.getElementById('feucht').textContent = data.feucht;
})
.catch(error => console.error('Fehler:', error));
}
// Daten alle 1 Sekunde aktualisieren
setInterval(hole_daten, 1000);
// Beim Laden der Seite sofort Daten holen
hole_daten();
</script>
</body>
</html>
Die index.html wird in das Hauptverzeichnis des ESP32 kopiert, der Webserver gestartet, die Webseite über ein zweites Gerät aufgerufen und sofort sollten die Temperatur und die Luftfeuchtigkeit angezeigt werden, die der Sensor an seinem Standort misst.