Materialien zum Unterricht

Webserver

Wird ein Webserver von einem Client aufgerufen, besteht seine erste Aufgabe darin, eine Startseite auszuliefern. Diese Seite steckt in einer Startdatei, die immer index. heißt. Die Dateierweiterung hängt davon ab, was für Programmcode auf der Seite verwendet wird. Üblich ist die Erweiterung .html.

Werden auf der Seite PHP-Scripte abgearbeitet, heißt die Startseite index.php.

index.html

Der Quelltext wird im Editor Notepad++ in eine neue Datei eingefügt und unter dem Namen index.html gespeichert. 


<!DOCTYPE html>
<html>
	<head>
	    <title>LED</title>
	</head>
	<body>
	    <h1>LED-Steuerung</h1>
	</body>
</html>:

Danach muss die Datei auf den ESP32 kopiert werden! Dort wird sie dann vom Webserver geladen und verschickt.

Das Board wird am Rechner angeschlossen und in Thonny über das Menü Ansicht die Dateien eingeblendet. Im oberen Teil hangelt man sich zu der index.html und in unteren Teil werden die Dateien angezeigt, die auf dem Board enhalten sind.

Die index.html wird mit rechts angeklickt und Upload nach / gewählt. Das kopiert die Datei in das Hauptverzeichnis des Boards.

Laden der Datei

Zwei Zeilen Programmcode öffnen die Datei index.html im Lesemodus ("r") un legen sie Zeile für Zeil in der Variablen html ab. Damit steckt jetzt in dieser Variablen als ein String die gesamte Startseite und muss nur noch verschickt werden.

Webserver starten

Nachdem der Access-Point läuft und die HTML-Seite zur Auslieferung bereit steht, wird der Web-Server gestartet.

Aufgabe: Informiere dich über den im Netzwerk üblichen Begriff socket.


# Web-Server einrichten
addr = socket.getaddrinfo('', 80)[0][-1]  # Port 80, beliebige Adresse (0.0.0.0)
s = socket.socket()  # s ist eine Instanz von socket
s.bind(addr)  # s an die Adresse binden
s.listen(1)  # s darf eingehende Verbindungen annehmen, aber immer nur eine
# Web-Server gestartet und Adresse angezeigt
print('Web-Server läuft auf', addr)

Nach dem Starten des Web-Servers kann nun in der unendlichen Schleife an Anfragen von Clients reagiert werden.

In MicroPython auf einem ESP32 wartet der Befehl cl, addr = s.accept() auf eine eingehende Netzwerkverbindung. s ist hierbei ein Socket-Objekt und der Befehl blockiert, bis eine Verbindung von einem Client aufgebaut wird.

Nach erfolgreicher Verbindung werden ein neues Socket-Objekt cl für die Kommunikation mit dem Client und die Adresse des Clients addr zurückgegeben.

Erläuterung:

s.accept(): Diese Methode eines Socket-Objekts wartet auf eine eingehende Verbindung. Sie ist ein blockierender Aufruf, d.h., der Code wird an dieser Stelle angehalten, bis eine Verbindung hergestellt wurde.

cl (Client-Socket): Nach erfolgreicher Verbindung wird ein neues Socket-Objekt zurückgegeben. Dieses Socket repräsentiert die Verbindung zum Client und wird für die weitere Kommunikation mit diesem Client verwendet.

addr (Client-Adresse): Zusätzlich zum Socket wird auch die Adresse des Clients (in der Regel eine IP-Adresse und ein Port) als Tupel zurückgegeben. 


while True:
    cl, addr = s.accept()  # warten auf eine Anfrage vom Client
    print('Client verbunden von', addr)
    r = cl.recv(1024) #in r wird die Antwort des Client gespeichert
    print('Empfangene Daten:', r.decode()) #und in einer lesbaren Form angezeigt
    cl.send(html)  # die HTML-Seite wird an den Client gesendet
    cl.close()  # Verbindung schließen

Wenn alles richtig funktioniert, kann man sich auf einem beliebigen Gerät über WLAN am Access-Point anmelden. Tippt man im Browser die IP-Adresse des Access-Point ein, liefert der Web-Server die HTML-Seite aus, die dann angezeigt wird.

Falls es nicht funktioniert, kann man

  • den ESP32 vom Rechner abziehen, neu anstecken und die Software nochmal übertragen
  • Fehlermeldungen lesen
  • die Verbindung zum Access-Point am Client-Gerät trennen und neu verbinden

zurück