{"id":379,"date":"2020-03-27T13:31:30","date_gmt":"2020-03-27T13:31:30","guid":{"rendered":"https:\/\/marcjuneau.ca\/?p=379"},"modified":"2020-03-27T15:01:21","modified_gmt":"2020-03-27T15:01:21","slug":"serveur-web-sur-esp32","status":"publish","type":"post","link":"https:\/\/marcjuneau.ca\/?p=379","title":{"rendered":"Serveur WEB sur ESP32"},"content":{"rendered":"

Dans ce projet, nous allons cr\u00e9\u00e9 un serveur Web sur le ESP32, qui affichera simplement le message \u00ab\u00a0Mon ESP32 vous dit bonjour\u00a0\u00bb.<\/p>\n\n\n\n\n\n\n

Ce projet utilise des concepts de r\u00e9seau tels que : L’adressage IP et les \u00e9changes client-serveur. Afin de ne pas alourdir cet article, ces concepts seront pr\u00e9sent\u00e9s dans d’autres articles.<\/p>\n

1\u00a0 – Connexion au Wi-fi<\/h4>\n

Pour connecter le ESP32 \u00e0 votre Wi-fi, vous devez conna\u00eetre vote SSID et le mot de passe, en supposant que votre Wifi est prot\u00e9g\u00e9. Le SSID (Service Set Identifier) est le nom de votre r\u00e9seau dans fil. Dans les projets, je vais utiliser le r\u00e9seau devRouteur<\/strong> <\/em>(SSID) et le mot de passe #1234#fafa<\/strong><\/em>, mais vous devrez remplacer ces informations par vos SSID\/Mot de passe.<\/p>\n

Voici le code que nous allons utiliser.<\/p>\n

\n
#include\u00a0<Arduino.h>
#include <WiFi.h>

\/\/\u00a0Informations\u00a0sur\u00a0le\u00a0r\u00e9seau\u00a0Wi-Fi
\/\/ Vous devez remplacer les informations pas celles de votre r\u00e9seau
const char* ssid\u00a0\u00a0\u00a0\u00a0\u00a0= \"devRouteur\";
const char* password = \"#1234#fafa\";

void setup()\u00a0
{
 \u00a0\/\/\u00a0Nous\u00a0allons\u00a0utiliser\u00a0la\u00a0console\u00a0pour\u00a0afficher\u00a0des\u00a0informations
 \u00a0Serial.begin(9600);

 \u00a0\/\/D\u00e9but\u00a0de\u00a0la\u00a0connexion\u00a0au\u00a0r\u00e9seau
 \u00a0Serial.print(\"Connection\u00a0au\u00a0r\u00e9seau\u00a0\");
 \u00a0Serial.println(ssid);
  WiFi.disconnect();
 \u00a0WiFi.begin(ssid,\u00a0password);

 \u00a0\/\/ Tant que le ESP32 n'est pas connect\u00e9, attendre...
 \u00a0while\u00a0(WiFi.status()\u00a0!=\u00a0WL_CONNECTED)\u00a0
 \u00a0{
 \u00a0\u00a0\u00a0delay(500);
 \u00a0\u00a0\u00a0Serial.print(\".\");
 \u00a0}

\u00a0\u00a0\/\/\u00a0Une\u00a0fois\u00a0connect\u00e9,\u00a0on\u00a0affiche\u00a0l'adresse\u00a0IP\u00a0du\u00a0ESP32
 \u00a0Serial.println(\"\");
 \u00a0Serial.println(\"Connect\u00e9\u00a0au\u00a0Wi-fi\");
 \u00a0Serial.println(\"Adresse\u00a0IP\u00a0=\u00a0\");
 \u00a0Serial.println(WiFi.localIP());
}

void\u00a0loop()\u00a0
{
 \u00a0\/\/\u00a0rien\u00a0pour\u00a0le\u00a0moment.
}<\/pre>\n<\/div>\n
Voici quelques explications sur ce que fait le code.<\/p>\n
 \u00a0Serial.begin(9600);<\/pre>\n
La console sera utilis\u00e9e afin d’afficher l’\u00e9tat de la connexion.<\/p>\n
 Serial.print(\"Connection\u00a0au\u00a0r\u00e9seau\u00a0\");
\u00a0Serial.println(ssid);
 WiFi.disconnect();
\u00a0WiFi.begin(ssid,\u00a0password);<\/pre>\n
Affiche un message sur la console pour signifier le d\u00e9but de la connexion. Le Wifi.disconnect() va d\u00e9connect\u00e9 le module s’il \u00e9tait d\u00e9j\u00e0 connect\u00e9 au r\u00e9seau. Le Wifi.begin() d\u00e9marre la connexion Wi-fi pour le SSID et le mot de passe configur\u00e9s au d\u00e9but du code.<\/p>\n
while\u00a0(WiFi.status()\u00a0!=\u00a0WL_CONNECTED)\u00a0
\u00a0{
\u00a0\u00a0\u00a0delay(500);
\u00a0\u00a0\u00a0Serial.print(\".\");
 }<\/pre>\n
Cette boucle attend que le ESP32 ait r\u00e9ussit la connexion au Wi-Fi. Si cette \u00e9tape n’aboutie pas, v\u00e9rifiez le SSID et le mot de passe. Vous pouvez aussi valider les informations du Wi-fi avec un ordinateur, une tablette ou un t\u00e9l\u00e9phone.<\/p>\n
Serial.println(\"\");
Serial.println(\"Connect\u00e9 au Wi-fi\");
Serial.println(\"Adresse IP = \");
Serial.println(WiFi.localIP());<\/pre>\n
Ce segment s\u2019ex\u00e9cute uniquement si la connexion \u00e0 r\u00e9ussi. Elle affiche l’adresse IP re\u00e7ue sur le r\u00e9seau, ce qui sera n\u00e9cessaire pour afficher la page web du ESP32.<\/p>\n
Apr\u00e8s la compilation et le t\u00e9l\u00e9chargement, voici ce que vous devriez observer dans la console.<\/p>\n
Connection au r\u00e9seau devRouteur
.
Connect\u00e9 au Wi-fi
Adresse IP =
192.168.0.198<\/pre>\n
2\u00a0 – Cr\u00e9ation du serveur web<\/h4>\n
Pour cr\u00e9er un serveur web, il faut cr\u00e9er une instance de la classe WiFiServer. Le param\u00e8tre d’entr\u00e9e est le num\u00e9ro du port, qui est 80 par d\u00e9faut pour le http dans les navigateurs.<\/p>\n
WiFiServer server(80);<\/pre>\n
Nous allons \u00e9galement cr\u00e9er une instance de la classe String, dans laquelle nous allons \u00e9crire le code html de notre page web.<\/p>\n
String pageHtml = 
\"<HTML> \\n \\
   <BODY> \\n \\
     <H1> Mon ESP32 vous dit bonjour <\/H1> \\n \\
   <\/BODY> \\n \\
<\/HTML> \\n \";<\/pre>\n
Les \\n ne sont pas obligatoires. Ils permettent de structurer le code html avec des fins de ligne. Les \\ \u00e0 la fin permettent d’\u00e9crire le contenu de la String sur plusieurs lignes afin de faciliter sa lecture.<\/p>\n
Dans la fonction setup(), nous allons d\u00e9marrer le serveur avec la ligne suivante.<\/p>\n
\n
serveur.begin();<\/pre>\n<\/div>\n
\u00a0<\/div>\n
Dans la fonction loop(), nous allons ajouter le code qui va traiter les demandes des clients. Lorsque vous ouvrirez une page web \u00e0 l’adresse IP de votre module, votre navigateur se connecte au module et fera une demande afin d’obtenir la page HTML.<\/div>\n
\u00a0<\/div>\n
 \/\/ Regarde s'il y a un client sur le serveur
  WiFiClient client = serveur.available();
  if(client)
  {
    Serial.println(\"Nouveau Client.\");
    \/\/ rester dans la boucle tant que le client est connect\u00e9
    while (client.connected()) 
    { 
     if (client.available()) \/\/ V\u00e9rifie si le client a envoy\u00e9 des donn\u00e9es
     {
        char rxData = client.read();  
        Serial.write(rxData);         
        if (rxData == '\\n') \/\/ si c'.est la fin de la commande re\u00e7ue
        {
          Serial.println(\"\");
          Serial.println(\"Charge page HTML\");
          client.println(\"HTTP\/1.1 200 OK\"); \/\/send new page
          client.println(\"Content-Type: text\/html\");
          client.println();
          client.print(pageHtml);     
          client.stop();
        }
     }
    }
  }<\/pre>\n
\u00c0 chaque passage dans la fonction loop, il y a v\u00e9rification de la pr\u00e9sence d’un nouveau client et r\u00e9cup\u00e9ration de sa requ\u00eate. Dans cet exemple, la requ\u00eate est affich\u00e9e dans la console mais son contenu est ignor\u00e9. Dans d’autres exemples, nous allons utiliser les donn\u00e9es de la requ\u00eate afin d\u2019interagir avec l’utilisateur et l’environnement physique du ESP32.\u00a0<\/p>\n
Apr\u00e8s r\u00e9ception de la requ\u00eate, le ESP32 retourne sa page HTML puis termine la connexion.\u00a0 Les deux autres transmissions qui pr\u00e9c\u00e8dent la page HTML sont des r\u00e9ponse \u00e0 la requ\u00eate. La premi\u00e8re \u00ab\u00a0HTTP\/1.1 200 OK\u00a0\u00bb dit au client que la requ\u00eate est re\u00e7ue avec succ\u00e8s. La seconde informe sur le format des donn\u00e9es qui suivront.<\/p>\n
Voici le code complet pour ce projet :<\/p>\n
\n
#include\u00a0<Arduino.h>
#include <WiFi.h>

\/\/\u00a0Informations\u00a0sur\u00a0le\u00a0r\u00e9seau\u00a0Wi-Fi
\/\/ Vous devez remplacer les informations pas celles de votre r\u00e9seau
const char* ssid\u00a0\u00a0\u00a0\u00a0\u00a0= \"devRouteur\";
const char* password = \"#1234#fafa\";

\/\/\u00a0Cr\u00e9er\u00a0un\u00a0serveur\u00a0sur\u00a0le\u00a0port\u00a080
WiFiServer serveur(80);

\/\/\u00a0Cr\u00e9er\u00a0une\u00a0string\u00a0pour\u00a0le\u00a0code\u00a0HTML
String pageHtml =\u00a0

\"<HTML>\u00a0\\n\u00a0\\
 \u00a0<BODY>\u00a0\\n\u00a0\\
 \u00a0\u00a0\u00a0<H1>\u00a0Mon\u00a0ESP32\u00a0vous\u00a0dit\u00a0bonjour\u00a0<\/H1>\u00a0\\n\u00a0\\
 \u00a0<\/BODY>\u00a0\\n\u00a0\\
<\/HTML> \\n \";

void\u00a0setup()\u00a0
{
 \u00a0\/\/\u00a0Nous\u00a0allons\u00a0utiliser\u00a0la\u00a0console\u00a0pour\u00a0afficher\u00a0des\u00a0informations
 \u00a0Serial.begin(9600);

\u00a0\u00a0\/\/D\u00e9but\u00a0de\u00a0la\u00a0connexion\u00a0au\u00a0r\u00e9seau
 \u00a0Serial.print(\"Connection\u00a0au\u00a0r\u00e9seau\u00a0\");
 \u00a0Serial.println(ssid);
 \u00a0WiFi.disconnect();
 \u00a0WiFi.begin(ssid,\u00a0password);

 \u00a0\/\/ Tant que l'\u00e9tat n'est pas connect\u00e9, attendre...
 \u00a0while\u00a0(WiFi.status()\u00a0!=\u00a0WL_CONNECTED)\u00a0
 \u00a0{
 \u00a0\u00a0\u00a0delay(500);
 \u00a0\u00a0\u00a0Serial.print(\".\");
 \u00a0}

\u00a0\u00a0\/\/\u00a0Une\u00a0fois\u00a0connect\u00e9,\u00a0on\u00a0affiche\u00a0l'adresse\u00a0IP\u00a0du\u00a0ESP32
 \u00a0Serial.println(\"\");
 \u00a0Serial.println(\"Connect\u00e9\u00a0au\u00a0Wi-fi\");
 \u00a0Serial.println(\"Adresse\u00a0IP\u00a0=\u00a0\");
 \u00a0Serial.println(WiFi.localIP());

\u00a0\u00a0serveur.begin();
}

void\u00a0loop()\u00a0
{
 \u00a0\/\/\u00a0Regarde\u00a0s'il\u00a0y\u00a0a\u00a0un\u00a0client\u00a0sur\u00a0le\u00a0serveur
 \u00a0WiFiClient\u00a0client\u00a0=\u00a0serveur.available();

 \u00a0if(client)
 \u00a0{
 \u00a0\u00a0\u00a0Serial.println(\"Nouveau\u00a0Client.\");
 \u00a0\u00a0\u00a0\/\/\u00a0rester\u00a0dans\u00a0la\u00a0boucle\u00a0tant\u00a0que\u00a0le\u00a0client\u00a0est\u00a0connect\u00e9
 \u00a0\u00a0\u00a0while\u00a0(client.connected())\u00a0
 \u00a0\u00a0\u00a0{\u00a0
 \u00a0\u00a0\u00a0\u00a0if\u00a0(client.available())\u00a0\/\/\u00a0V\u00e9rifie\u00a0si\u00a0le\u00a0client\u00a0a\u00a0envoy\u00e9\u00a0des\u00a0donn\u00e9es
 \u00a0\u00a0\u00a0\u00a0{
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0char\u00a0rxData\u00a0=\u00a0client.read();\u00a0\u00a0
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Serial.write(rxData);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(rxData\u00a0==\u00a0'\\n')\u00a0\/\/\u00a0si\u00a0c'.est\u00a0la\u00a0fin\u00a0de\u00a0la\u00a0commande\u00a0re\u00e7ue
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Serial.println(\"\");
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Serial.println(\"Charge\u00a0page\u00a0HTML\");
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0client.println(\"HTTP\/1.1\u00a0200\u00a0OK\");\u00a0\/\/send\u00a0new\u00a0page
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0client.println(\"Content-Type:\u00a0text\/html\");

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0client.println();
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0client.print(pageHtml);\u00a0\u00a0\u00a0\u00a0\u00a0
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0client.stop();
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}
 \u00a0\u00a0\u00a0\u00a0}
 \u00a0\u00a0\u00a0}
 \u00a0}
}<\/pre>\n
\u00a0<\/p>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"
Dans ce projet, nous allons cr\u00e9\u00e9 un serveur Web sur le ESP32, qui affichera simplement le message \u00ab\u00a0Mon ESP32 vous dit bonjour\u00a0\u00bb.Continue Reading<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["entry","author-mjuneau","has-more-link","post-379","post","type-post","status-publish","format-standard","has-post-thumbnail","category-esp32-projets"],"_links":{"self":[{"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/posts\/379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=379"}],"version-history":[{"count":11,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/posts\/379\/revisions"}],"predecessor-version":[{"id":394,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/posts\/379\/revisions\/394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/media\/391"}],"wp:attachment":[{"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}