Dans ce projet, nous allons créé un serveur Web sur le ESP32, qui affichera simplement le message “Mon ESP32 vous dit bonjour”.
Ce projet utilise des concepts de réseau tels que : L’adressage IP et les échanges client-serveur. Afin de ne pas alourdir cet article, ces concepts seront présentés dans d’autres articles.
1 – Connexion au Wi-fi
Pour connecter le ESP32 à votre Wi-fi, vous devez connaître vote SSID et le mot de passe, en supposant que votre Wifi est protégé. Le SSID (Service Set Identifier) est le nom de votre réseau dans fil. Dans les projets, je vais utiliser le réseau devRouteur (SSID) et le mot de passe #1234#fafa, mais vous devrez remplacer ces informations par vos SSID/Mot de passe.
Voici le code que nous allons utiliser.
#include <Arduino.h>
#include <WiFi.h>
// Informations sur le réseau Wi-Fi
// Vous devez remplacer les informations pas celles de votre réseau
const char* ssid = "devRouteur";
const char* password = "#1234#fafa";
void setup()
{
// Nous allons utiliser la console pour afficher des informations
Serial.begin(9600);
//Début de la connexion au réseau
Serial.print("Connection au réseau ");
Serial.println(ssid);
WiFi.disconnect();
WiFi.begin(ssid, password);
// Tant que le ESP32 n'est pas connecté, attendre...
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
// Une fois connecté, on affiche l'adresse IP du ESP32
Serial.println("");
Serial.println("Connecté au Wi-fi");
Serial.println("Adresse IP = ");
Serial.println(WiFi.localIP());
}
void loop()
{
// rien pour le moment.
}
Voici quelques explications sur ce que fait le code.
Serial.begin(9600);
La console sera utilisée afin d’afficher l’état de la connexion.
Serial.print("Connection au réseau ");
Serial.println(ssid);
WiFi.disconnect();
WiFi.begin(ssid, password);
Affiche un message sur la console pour signifier le début de la connexion. Le Wifi.disconnect() va déconnecté le module s’il était déjà connecté au réseau. Le Wifi.begin() démarre la connexion Wi-fi pour le SSID et le mot de passe configurés au début du code.
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Cette boucle attend que le ESP32 ait réussit la connexion au Wi-Fi. Si cette étape n’aboutie pas, vérifiez le SSID et le mot de passe. Vous pouvez aussi valider les informations du Wi-fi avec un ordinateur, une tablette ou un téléphone.
Serial.println("");
Serial.println("Connecté au Wi-fi");
Serial.println("Adresse IP = ");
Serial.println(WiFi.localIP());
Ce segment s’exécute uniquement si la connexion à réussi. Elle affiche l’adresse IP reçue sur le réseau, ce qui sera nécessaire pour afficher la page web du ESP32.
Après la compilation et le téléchargement, voici ce que vous devriez observer dans la console.
Connection au réseau devRouteur
.
Connecté au Wi-fi
Adresse IP =
192.168.0.198
2 – Création du serveur web
Pour créer un serveur web, il faut créer une instance de la classe WiFiServer. Le paramètre d’entrée est le numéro du port, qui est 80 par défaut pour le http dans les navigateurs.
WiFiServer server(80);
Nous allons également créer une instance de la classe String, dans laquelle nous allons écrire le code html de notre page web.
String pageHtml =
"<HTML> \n \
<BODY> \n \
<H1> Mon ESP32 vous dit bonjour </H1> \n \
</BODY> \n \
</HTML> \n ";
Les \n ne sont pas obligatoires. Ils permettent de structurer le code html avec des fins de ligne. Les \ à la fin permettent d’écrire le contenu de la String sur plusieurs lignes afin de faciliter sa lecture.
Dans la fonction setup(), nous allons démarrer le serveur avec la ligne suivante.
serveur.begin();
// 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é
while (client.connected())
{
if (client.available()) // Vérifie si le client a envoyé des données
{
char rxData = client.read();
Serial.write(rxData);
if (rxData == '\n') // si c'.est la fin de la commande reçue
{
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();
}
}
}
}
À chaque passage dans la fonction loop, il y a vérification de la présence d’un nouveau client et récupération de sa requête. Dans cet exemple, la requête est affichée dans la console mais son contenu est ignoré. Dans d’autres exemples, nous allons utiliser les données de la requête afin d’interagir avec l’utilisateur et l’environnement physique du ESP32.
Après réception de la requête, le ESP32 retourne sa page HTML puis termine la connexion. Les deux autres transmissions qui précèdent la page HTML sont des réponse à la requête. La première “HTTP/1.1 200 OK” dit au client que la requête est reçue avec succès. La seconde informe sur le format des données qui suivront.
Voici le code complet pour ce projet :
#include <Arduino.h>
#include <WiFi.h>
// Informations sur le réseau Wi-Fi
// Vous devez remplacer les informations pas celles de votre réseau
const char* ssid = "devRouteur";
const char* password = "#1234#fafa";
// Créer un serveur sur le port 80
WiFiServer serveur(80);
// Créer une string pour le code HTML
String pageHtml =
"<HTML> \n \
<BODY> \n \
<H1> Mon ESP32 vous dit bonjour </H1> \n \
</BODY> \n \
</HTML> \n ";
void setup()
{
// Nous allons utiliser la console pour afficher des informations
Serial.begin(9600);
//Début de la connexion au réseau
Serial.print("Connection au réseau ");
Serial.println(ssid);
WiFi.disconnect();
WiFi.begin(ssid, password);
// Tant que l'état n'est pas connecté, attendre...
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
// Une fois connecté, on affiche l'adresse IP du ESP32
Serial.println("");
Serial.println("Connecté au Wi-fi");
Serial.println("Adresse IP = ");
Serial.println(WiFi.localIP());
serveur.begin();
}
void loop()
{
// 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é
while (client.connected())
{
if (client.available()) // Vérifie si le client a envoyé des données
{
char rxData = client.read();
Serial.write(rxData);
if (rxData == '\n') // si c'.est la fin de la commande reçue
{
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();
}
}
}
}
}