Serveur Web ESP32 – Arduino IDE
Dans ce projet, vous allez créer un serveur Web autonome avec un ESP32 qui contrôle les sorties
(deux LED) à l’aide de l’environnement de programmation IDE Arduino. Le serveur Web est réactif aux
mobiles et est accessible avec n’importe quel appareil qui, en tant que navigateur sur le réseau local.
Nous allons vous montrer comment créer le serveur web et comment le code fonctionne étape par
étape.
Si vous souhaitez en savoir plus sur l’ESP32, consultez le Guide de démarrage avec l’ESP32.
Regarder le tutoriel vidéo
Ce tutoriel est disponible en format vidéo (voir ci-dessous) et en format écrit (continuer à lire cette
page).
Aperçu du projet
Avant de passer directement au projet, il est important de décrire ce que fera notre serveur web, afin
qu’il soit plus facile de suivre les étapes par la suite.
Le serveur web que vous allez construire contrôle deux LED connectées à l’ESP32 GPIO
26 et GPIO 27;
Vous pouvez accéder au serveur Web ESP32 en tapant l’adresse IP ESP32 sur un navigateur du
réseau local ;
En cliquant sur les boutons de votre serveur Web, vous pouvez changer instantanément l’état
de chaque LED.
Ceci n’est qu’un exemple simple pour illustrer comment construire un serveur web qui contrôle les
sorties, l’idée est de remplacer ces LED par un relais, ou tout autre composant électronique que vous
voulez.
Installation de la carte ESP32 dans l’IDE Arduino
Il existe un add-on pour l’IDE Arduino qui vous permet de programmer l’ESP32 à l’aide de l’IDE
Arduino et de son langage de programmation. Suivez l’un des tutoriels suivants pour préparer votre
IDE Arduino :
Instructions Windows - Installation de la carte ESP32 dans l’IDE Arduino
Instructions pour Mac et Linux - Installation de la carte ESP32 dans l’IDE Arduino
Pièces requises
Pour ce tutoriel, vous aurez besoin des pièces suivantes :
Carte de développement ESP32 - lire Examen et comparaison des cartes de développement
ESP32
2x LED de 5 mm
2x résistance 330 Ohm
Planche à pain
Fils de liaison
Vous pouvez utiliser les liens précédents ou vous rendre directement
sur [Link]/tools pour trouver toutes les pièces pour vos projets au meilleur prix !
Schématique
Commencez par construire le circuit. Connectez deux LED à l’ESP32 comme indiqué dans le schéma
suivant - une LED connectée à GPIO 26, et l’autre à GPIO 27.
Remarque : Nous utilisons la carte ESP32 DEVKIT DOIT avec 36 broches. Avant d’assembler le circuit,
assurez-vous de vérifier le brochage de la carte que vous utilisez.
Code du serveur Web ESP32
Ici, nous fournissons le code qui crée le serveur Web ESP32. Copiez le code suivant dans votre IDE
Arduino, mais ne le téléchargez pas encore. Vous devez apporter quelques modifications pour que
cela fonctionne pour vous.
/*********
Rui Santos
Complete project details at [Link]
*********/
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output26State = "off";
String output27State = "off";
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
[Link](115200);
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
// Connect to Wi-Fi network with SSID and password
[Link]("Connecting to ");
[Link](ssid);
[Link](ssid, password);
while ([Link]() != WL_CONNECTED) {
delay(500);
[Link](".");
// Print local IP address and start web server
[Link]("");
[Link]("WiFi connected.");
[Link]("IP address: ");
[Link]([Link]());
[Link]();
void loop(){
WiFiClient client = [Link](); // Listen for incoming clients
if (client) { // If a new client connects,
currentTime = millis();
previousTime = currentTime;
[Link]("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while ([Link]() && currentTime - previousTime <= timeoutTime) { // loop while the
client's connected
currentTime = millis();
if ([Link]()) { // if there's bytes to read from the client,
char c = [Link](); // read a byte, then
[Link](c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if ([Link]() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
[Link]("HTTP/1.1 200 OK");
[Link]("Content-type:text/html");
[Link]("Connection: close");
[Link]();
// turns the GPIOs on and off
if ([Link]("GET /26/on") >= 0) {
[Link]("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if ([Link]("GET /26/off") >= 0) {
[Link]("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if ([Link]("GET /27/on") >= 0) {
[Link]("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if ([Link]("GET /27/off") >= 0) {
[Link]("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
// Display the HTML web page
[Link]("<!DOCTYPE html><html>");
[Link]("<head><meta name=\"viewport\" content=\"width=device-width, initial-
scale=1\">");
[Link]("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
[Link]("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-
align: center;}");
[Link](".button { background-color: #4CAF50; border: none; color: white; padding: 16px
40px;");
[Link]("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
[Link](".button2 {background-color: #555555;}</style></head>");
// Web Page Heading
[Link]("<body><h1>ESP32 Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIO 26
[Link]("<p>GPIO 26 - State " + output26State + "</p>");
// If the output26State is off, it displays the ON button
if (output26State=="off") {
[Link]("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
[Link]("<p><a href=\"/26/off\"><button class=\"button
button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for GPIO 27
[Link]("<p>GPIO 27 - State " + output27State + "</p>");
// If the output27State is off, it displays the ON button
if (output27State=="off") {
[Link]("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
} else {
[Link]("<p><a href=\"/27/off\"><button class=\"button
button2\">OFF</button></a></p>");
[Link]("</body></html>");
// The HTTP response ends with another blank line
[Link]();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
// Clear the header variable
header = "";
// Close the connection
[Link]();
[Link]("Client disconnected.");
[Link]("");
}
}
Afficher le code brut
Définition de vos informations d’identification réseau
Vous devez modifier les lignes suivantes avec vos identifiants réseau : SSID et mot de passe. Le code
est bien commenté sur l’endroit où vous devez apporter les modifications.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Téléchargement du code
Maintenant, vous pouvez télécharger le code et le serveur Web fonctionnera immédiatement. Suivez
les étapes suivantes pour télécharger le code sur l’ESP32 :
1) Branchez votre carte ESP32 sur votre ordinateur ;
2) Dans l’IDE Arduino, sélectionnez votre carte dans Outils > Carte (dans notre cas, nous utilisons la
carte ESP32 DEVKIT DOUT) ;
3) Sélectionnez le port COM dans Outils > Port.
4) Appuyez sur le bouton Upload dans l’IDE Arduino et attendez quelques secondes pendant que le
code se compile et se télécharge sur votre carte.
5) Attendez le message « Téléchargement terminé ».
Trouver l’adresse IP ESP
Après avoir téléchargé le code, ouvrez le moniteur série à une vitesse de transmission de 115200.
Appuyez sur le bouton ESP32 EN (réinitialiser). L’ESP32 se connecte au Wi-Fi et émet l’adresse IP ESP
sur le moniteur série. Copiez cette adresse IP, car vous en avez besoin pour accéder au serveur Web
ESP32.
Accès au serveur Web
Pour accéder au serveur Web, ouvrez votre navigateur, collez l’adresse IP ESP32 et vous verrez la page
suivante. Dans notre cas, il s’agit du [Link].
Si vous jetez un coup d’œil au moniteur série, vous pouvez voir ce qui se passe en arrière-plan. L’ESP
reçoit une requête HTTP d’un nouveau client (dans ce cas, votre navigateur).
Vous pouvez également consulter d’autres informations sur la requête HTTP.
Test du serveur Web
Vous pouvez maintenant tester si votre serveur Web fonctionne correctement. Cliquez sur les
boutons pour contrôler les LED.
En même temps, vous pouvez jeter un coup d’œil au moniteur série pour voir ce qui se passe en
arrière-plan. Par exemple, lorsque vous cliquez sur le bouton pour GPIO 26 ON, ESP32 reçoit une
requête sur l’URL /26/on.
Lorsque l’ESP32 reçoit cette demande, il allume la LED connectée à GPIO 26 ON et met à jour son état
sur la page Web.
Le bouton pour GPIO 27 fonctionne de la même manière. Testez qu’il fonctionne correctement.
Comment fonctionne le Code
Dans cette section, nous examinerons de plus près le code pour voir comment il fonctionne.
La première chose que vous devez faire est d’inclure la bibliothèque WiFi.
#include <WiFi.h>
Comme mentionné précédemment, vous devez insérer votre ssid et votre mot de passe dans les
lignes suivantes à l’intérieur des guillemets doubles.
const char* ssid = "";
const char* password = "";
Ensuite, vous réglez votre serveur Web sur le port 80.
WiFiServer server(80);
La ligne suivante crée une variable pour stocker l’en-tête de la requête HTTP :
String header;
Ensuite, vous créez des variables auxiliaires pour stocker l’état actuel de vos sorties. Si vous souhaitez
ajouter d’autres sorties et enregistrer son état, vous devez créer d’autres variables.
String output26State = "off";
String output27State = "off";
Vous devez également attribuer un GPIO à chacune de vos sorties. Ici, nous utilisons GPIO 26 et GPIO
27. Vous pouvez utiliser n’importe quel autre GPIO approprié.
const int output26 = 26;
const int output27 = 27;
setup()
Maintenant, passons à la setup(). Tout d’abord, nous démarrons une communication série à une
vitesse de transmission de 115200 à des fins de débogage.
[Link](115200);
Vous définissez également vos GPIO comme OUTPUTs et les définissez sur LOW.
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
Les lignes suivantes commencent la connexion Wi-Fi par [Link](ssid, mot de passe), attendez que
la connexion réussisse et imprimez l’adresse IP ESP dans le moniteur série.
// Connect to Wi-Fi network with SSID and password
[Link]("Connecting to ");
[Link](ssid);
[Link](ssid, password);
while ([Link]() != WL_CONNECTED) {
delay(500);
[Link](".");
// Print local IP address and start web server
[Link]("");
[Link]("WiFi connected.");
[Link]("IP address: ");
[Link]([Link]());
[Link]();
loop()
In the loop() we program what happens when a new client establishes a connection with the web
server.
The ESP32 is always listening for incoming clients with the following line:
WiFiClient client = [Link](); // Listen for incoming clients
When a request is received from a client, we’ll save the incoming data. The while loop that follows
will be running as long as the client stays connected. We don’t recommend changing the following
part of the code unless you know exactly what you are doing.
if (client) { // If a new client connects,
[Link]("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while ([Link]()) { // loop while the client's connected
if ([Link]()) { // if there's bytes to read from the client,
char c = [Link](); // read a byte, then
[Link](c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
/ that's the end of the client HTTP request, so send a response:
if ([Link]() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
[Link]("HTTP/1.1 200 OK");
[Link]("Content-type:text/html");
[Link]("Connection: close");
[Link]();
La section suivante des instructions if et else vérifie quel bouton a été enfoncé dans votre page Web
et contrôle les sorties en conséquence. Comme nous l’avons vu précédemment, nous effectuons une
requête sur différentes URLs en fonction du bouton sur lequel nous avons appuyé.
// turns the GPIOs on and off
if ([Link]("GET /26/on") >= 0) {
[Link]("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if ([Link]("GET /26/off") >= 0) {
[Link]("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if ([Link]("GET /27/on") >= 0) {
[Link]("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if ([Link]("GET /27/off") >= 0) {
[Link]("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
Par exemple, si vous avez appuyé sur le bouton GPIO 26 ON, l’ESP32 reçoit une requête sur l’URL
/26/ON (nous pouvons voir que cette information se trouve dans l’en-tête HTTP du moniteur série).
Ainsi, nous pouvons vérifier si l’en-tête contient l’expression GET /26/on. S’il contient, on change
le output26état variable sur ON, et l’ESP32 allume la LED.
Cela fonctionne de la même manière pour les autres boutons. Donc, si vous souhaitez ajouter plus de
sorties, vous devez modifier cette partie du code pour les inclure.
Affichage de la page web HTML
La prochaine chose que vous devez faire est de créer la page Web. L’ESP32 enverra une réponse à
votre navigateur avec du code HTML pour construire la page Web.
La page web est envoyée au client en utilisant cette expression [Link](). Vous devez entrer ce
que vous voulez envoyer au client en tant qu’argument.
La première chose que nous devons envoyer est toujours la ligne suivante, qui indique que nous
envoyons du HTML.
<!DOCTYPE HTML><html>
Ensuite, la ligne suivante rend la page Web réactive dans n’importe quel navigateur Web.
[Link]("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
Et ce qui suit est utilisé pour empêcher les demandes sur le favicon. – Vous n’avez pas à vous soucier
de cette ligne.
[Link]("<link rel=\"icon\" href=\"data:,\">");
Styliser la page Web
Ensuite, nous avons du texte CSS pour styliser les boutons et l’apparence de la page Web. Nous
choisissons la police Helvetica, définissons le contenu à afficher sous forme de bloc et aligné au
centre.
[Link]("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align:
center;}");
Nous stylisons nos boutons avec la couleur #4CAF50, sans bordure, texte de couleur blanche, et avec
ce rembourrage : 16px 40px. Nous définissons également la décoration du texte sur none, définissons
la taille de la police, la marge et le curseur sur un pointeur.
[Link](".button { background-color: #4CAF50; border: none; color: white; padding: 16px
40px;");
[Link]("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
Nous définissons également le style d’un deuxième bouton, avec toutes les propriétés du bouton que
nous avons définies précédemment, mais avec une couleur différente. Ce sera le style du bouton
d’arrêt.
[Link](".button2 {background-color: #555555;}</style></head>");
Définition du premier titre de la page Web
Dans la ligne suivante, vous pouvez définir le premier titre de votre page Web. Ici, nous avons
« ESP32 Web Server », mais vous pouvez changer ce texte comme vous le souhaitez.
// Web Page Heading
[Link]("<h1>ESP32 Web Server</h1>");
Affichage des boutons et de l’état correspondant
Ensuite, vous écrivez un paragraphe pour afficher le GPIO 26 état actuel. Comme vous pouvez le voir,
nous utilisons le output26État variable, de sorte que l’état soit mis à jour instantanément lorsque
cette variable change.
[Link]("<p>GPIO 26 - State " + output26State + "</p>");
Ensuite, nous affichons le bouton on ou off, en fonction de l’état actuel du GPIO. Si l’état actuel du
GPIO est éteint, nous affichons le bouton ON, sinon, nous affichons le bouton OFF.
if (output26State=="off") {
[Link]("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
[Link]("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
Nous utilisons la même procédure pour GPIO 27.
Fermeture de la connexion
Enfin, lorsque la réponse se termine, nous effacons le en-tête et arrêtez la connexion avec le client
avec [Link]().
// Clear the header variable
header = "";
// Close the connection
[Link]();
Conclusion
Dans ce tutoriel, nous vous avons montré comment construire un serveur web avec l’ESP32. Nous
vous avons montré un exemple simple qui contrôle deux LED, mais l’idée est de remplacer ces LED
par un relais, ou toute autre sortie que vous souhaitez contrôler. Pour plus de projets avec ESP32,
consultez les tutoriels suivants :