Le serveur WEB

Introduction

Le serveur WEB est tout simplement un serveur TCP qui communique avec son client, le navigateur, par le protocole HTTP. La communication se fait via le port 80.

Exercice 1 :

\xC9crire un serveur WEB qui peut servir une seule page, int\xE9gr\xE9 dans le serveur m\xEAme. La page HTML est d\xE9fini comme un string multiligne.

Le serveur attend une connexion sur le port 80 (port standard du protocole HTTP). Apr\xE8s l'acceptation de la connexion, il lit la requ\xEAte envoy\xE9e par le navigateur et il l'imprime. Puisque le serveur ne peut servir qu'une seule page, l'interpr\xE9tation de la requ\xEAte n'est pas n\xE9cessaire. Le serveur retourne tout facilement la page HTML comme r\xE9ponse.

Voil\xE0, la requ\xEAte envoy\xE9e par firefox quand le serveur WEB est acc\xE9d\xE9 (la requ\xEAte commence avec "Content Get / HTTP/1.1") :

Le r\xE9sultat vu par le navigateur le voila :

Exercice 2 :

T\xE9l\xE9charger le programme picoweb et ses exemples. Il y a des tutoriels sur le WEB qui expliquent comment utiliser picoweb mais ces tutoriels n'expliquent que ses utilisations les plus simples.

• https://www.dfrobot.com/blog-742.html
• https://techtutorialsx.com/2017/09/01/esp32-micropython-http-webserver-with-picoweb

Les chapitres d'installation du programme peuvent \xEAtre n\xE9glig\xE9s puisque picoweb est d\xE9j\xE0 int\xE9gr\xE9 dans notre interpr\xE9teur MicroPython.

Pour plus d'information, il est n\xE9cessaire d'\xE9tudier les exemples d\xE9livr\xE9s avec le d\xE9p\xF4t github ou le code de picoweb m\xEAme. Les exemples montrent comment utiliser la plupart de fonctions picoweb.

En utilisant le cadre picoweb le serveur WEB se laisse simplifier encore. Maintenant la page WEB est stock\xE9 dans un fichier \xE0 part sur le syst\xE8me de fichier de l'ESP32. Sauver ce fichier dans le classeur "html". Cr\xE9er ce directoire avec ampy, s'il n'existe pas encore.

• Recr\xE9er le programme de l'exercice 1 avec picoweb en s\xE9parant le code et la page HTML.
• On peut aussi compacter le fichier HTML avec gzip et transf\xE9rer le fichier compact\xE9

Exercice 3 : Templates

Modifier le serveur WEB en int\xE9grant des mesures de temp\xE9rature et de l'humidit\xE9 de l'air pris avec le DHT11. La m\xE9thode la plus simple pour accomplir ceci est une page WEB statique dans laquelle les mesures peuvent \xEAtre int\xE9gr\xE9. On peut accomplir cela en utilisant les "templates" fourni par utemplates qu'utilise picoweb. Regarder dans le README.md de utemplates et dans les exemples fournis avec picoweb pour comprendre comment faire.

Cr\xE9er une table comme d\xE9montr\xE9 dans la copie d'\xE9crans ou les valeurs de temp\xE9rature et de l'humidit\xE9 ainsi que le temps quand la mesure a \xE9t\xE9 prise, sont ins\xE9r\xE9s.

Exercice 4 : AJAX

\xC9tudier le JavaScript et AJAX.

Modifier le programme d'exercice 3 de telle sorte que les mesures sont mise \xE0 jour toutes les 5 s.

\xC9crire une page HTML qui permet d'enclencher et de d\xE9clencher la LED sur la carte CPU. Ceci n\xE9cessite un bouton dans la page HTML et un indicateur qui montre l'\xE9tat actuel de la LED.

-- %USERSIG{UliRaich - 2022-10-03}%

Comments