Tags:
create new tag
view all tags

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 :

Écrire un serveur WEB qui peut servir une seule page, intégré dans le serveur même. La page HTML est défini comme un string multiligne.

Le serveur attend une connexion sur le port 80 (port standard du protocole HTTP). Après l'acceptation de la connexion, il lit la requête envoyée par le navigateur et il l'imprime. Puisque le serveur ne peut servir qu'une seule page, l'interprétation de la requête n'est pas nécessaire. Le serveur retourne tout facilement la page HTML comme réponse.

Voilà, la requête envoyée par firefox quand le serveur WEB est accédé (la requête commence avec "Content Get / HTTP/1.1") :

http.png

Le résultat vu par le navigateur le voila :

helloWorldWebPage.png

Exercice 2 :

Télécharger 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.

Les chapitres d'installation du programme peuvent être négligés puisque picoweb est déjà intégré dans notre interpréteur MicroPython.

picowebInstallation.png

Pour plus d'information, il est nécessaire d'étudier les exemples délivrés avec le dépôt github ou le code de picoweb même. 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é dans un fichier à part sur le système de fichier de l'ESP32. Sauver ce fichier dans le classeur "html". Créer ce directoire avec ampy, s'il n'existe pas encore.

  • Recréer le programme de l'exercice 1 avec picoweb en séparant le code et la page HTML.
  • On peut aussi compacter le fichier HTML avec gzip et transférer le fichier compacté

Exercice 3 : Templates

Modifier le serveur WEB en intégrant des mesures de température et de l'humidité de l'air pris avec le DHT11. La méthode la plus simple pour accomplir ceci est une page WEB statique dans laquelle les mesures peuvent être intégré. 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éer une table comme démontré dans la copie d'écrans ou les valeurs de température et de l'humidité ainsi que le temps quand la mesure a été prise, sont insérés.

dht11Template.png

Exercice 4 : AJAX

Étudier le JavaScript et AJAX.

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

Écrire une page HTML qui permet d'enclencher et de déclencher la LED sur la carte CPU. Ceci nécessite un bouton dans la page HTML et un indicateur qui montre l'état actuel de la LED.

ledControlServer.png

-- Uli Raich - 2022-10-03

Comments

Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng dht11Template.png r1 manage 18.6 K 2022-10-03 - 13:39 UliRaich  
PNGpng helloWorldWebPage.png r1 manage 91.0 K 2022-10-03 - 08:03 UliRaich  
PNGpng http.png r1 manage 105.1 K 2022-10-03 - 08:00 UliRaich  
PNGpng ledControlServer.png r1 manage 30.1 K 2022-11-03 - 09:14 UliRaich  
PNGpng picowebInstallation.png r1 manage 13.3 K 2022-10-03 - 09:59 UliRaich  
Edit | Attach | Watch | Print version | History: r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r3 - 2022-11-03 - UliRaich
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback