Nouveau sur les serveurs Web ESP32? Vous êtes au bon endroit. Dans ce guide détaillé, nous couvrirons les concepts de base que vous devez connaître pour créer des serveurs Web avec l’ESP32, afin que vous puissiez contrôler et surveiller ses sorties à distance. Nous allons commencer par la théorie essentielle, puis passer à des exemples pratiques pour vous aider à appliquer ce que vous avez appris.
Nous couvrirons la création d’un serveur Web pour contrôler les sorties et afficher les lectures du capteur, en ajoutant une authentification au serveur Web, en définissant l’ESP32 comme point d’accès, et plus encore. Pour rendre les choses aussi simples que possible, nous utiliserons la bibliothèque Webserver.h intégrée.
Nouveau sur l’ESP32? Nous vous recommandons d’abord de suivre ces guides démarrés:
Aperçu du tutoriel
Dans ce tutoriel, nous couvrirons les sujets suivants. Si vous êtes nouveau dans les serveurs Web ESP32 et que vous souhaitez en savoir plus sur ce sujet, nous vous recommandons de suivre ces sections dans l’ordre.
- Présentation des serveurs Web (concepts de base)
- Exemple de serveur Web ESP32 (sorties de contrôle)
- Ajoutez une authentification à votre serveur Web
- Serveur Web ESP32 (point d’accès)
- Exemple de serveur Web ESP32 (lectures d’affichage des capteurs)
Ebook recommandé: créez des serveurs Web avec les ESP32 et ESP8266 (3e édition)
Condition préalable
Ce tutoriel se concentre sur la programmation de l’ESP32 à l’aide du noyau Arduino. Avant de continuer, vous devriez avoir le noyau Arduino ESP32 installé dans votre IDE Arduino. Suivez le prochain tutoriel pour installer l’ESP32 sur l’ide Arduino, si vous ne l’avez pas déjà fait.
1) Présentation des serveurs Web
En termes simples, un serveur Web est un «ordinateur» qui fournit des pages Web. Il stocke les fichiers du site Web, y compris les documents HTML et les actifs connexes comme les images, les feuilles de style CSS, les polices et autres fichiers. Lorsqu’un utilisateur fait une demande, le serveur envoie ces fichiers au navigateur Web de l’utilisateur.
Lorsque vous accédez à une page Web de votre navigateur, vous envoyez réellement une demande à un serveur à l’aide du protocole de transfert Hypertext (HTTP). Ce protocole gère la façon dont les informations sont demandées et livrées sur Internet. Le serveur répond ensuite en envoyant la page Web que vous avez demandé, également via HTTP.
Pour mieux comprendre comment tout cela fonctionne avec vos conseils ESP32, passons en revue certains termes que vous avez probablement entendus auparavant – mais pourrait ne pas encore comprendre.
Demande-réponse
La demande de réponse est un modèle d’échange de messages, dans lequel un demandeur (votre navigateur) envoie un message de demande à un système Replier (l’ESP32 en tant que serveur Web) qui reçoit et traite la demande et renvoie un message en réponse.
Dans la plupart de nos projets, le message de réponse sera une page Web qui affiche les dernières lectures de capteurs ou qui fournit une interface pour contrôler les sorties.
Il s’agit d’un modèle de messagerie simple mais puissant, en particulier dans les architectures client-serveur.
Serveur client
Lorsque vous tapez une URL dans votre navigateur, votre appareil (le client) envoie une demande à un serveur à l’aide du protocole de transfert Hypertext (HTTP). Le serveur reçoit la demande et répond – également via HTTP – en renvoyant la page Web. Cet échange entre les clients et les serveurs se produit sur un réseau informatique.
En termes simples, les clients font des demandes de serveurs. Les serveurs gèrent les demandes des clients.
Tout au long de ce tutoriel, nous traiterons l’ESP32 comme le serveur et vous – en utilisant votre navigateur – comme le client. Dans nos projets, il n’y a qu’un seul serveur (la carte ESP32), mais il peut y avoir plusieurs clients. Il pourrait s’agir de navigateurs Web différents sur divers appareils comme les ordinateurs, les smartphones ou les tablettes, tous connectés au même réseau, ou même à plusieurs onglets de navigateur ouverts sur le même appareil.
Adresse IP
Une adresse IP est une étiquette numérique attribuée à chaque périphérique connecté à un réseau informatique.
Il s’agit d’une série de quatre valeurs séparées par des périodes, chaque valeur allant de 0 à 255. Voici un exemple:
192.168.1.75À la maison, vos appareils sont connectés à un réseau privé via votre routeur (réseau local). Tous les appareils connectés à votre routeur font partie de votre réseau local. À l’intérieur de ce réseau, chaque appareil a sa propre adresse IP.
Les appareils connectés au même routeur peuvent accéder les uns aux autres via l’adresse IP. Les appareils en dehors de votre réseau local ne peuvent pas accéder à vos appareils locaux à l’aide de leur adresse IP locale.
Lorsque vous connectez vos tableaux ESP32 à votre routeur, ils font partie de votre réseau local. Ainsi, vos cartes ESP32 se voient attribuer une adresse IP.
Sur votre réseau local, l’adresse IP de l’ESP32 (et d’autres périphériques) est attribuée par le routeur en utilisant quelque chose appelé DHCP (Dynamic Host Configuration Protocol). Vous n’avez pas à vous soucier des détails. Il vous suffit de savoir que DHCP attribue automatiquement une adresse IP et d’autres paramètres réseau à chaque périphérique du réseau.
Le routeur garde une trace de chaque périphérique sur le réseau et mappe une adresse IP à chaque périphérique chaque fois qu’il rejoint le réseau. Deux appareils sur le même réseau ne peuvent pas avoir la même adresse IP.
Encore une fois, lorsque l’ESP32 est connecté à votre routeur, l’adresse IP qu’il obtient est une adresse locale. Cela signifie que vous ne pouvez y accéder qu’à partir d’appareils qui sont également connectés au même réseau. Comme indiqué dans l’image précédente, vous pouvez accéder à l’ESP32 à l’aide d’un ordinateur ou d’un smartphone qui se trouve sur le même réseau.
Station Wi-Fi et point d’accès Wi-Fi
La carte ESP32 peut agir en tant que station Wi-Fi, point d’accès ou les deux.
Station Wi-Fi
Lorsque l’ESP32 est réglé pour fonctionner comme une station Wi-Fi, il se connecte à un réseau existant, comme votre routeur domestique. Dans cette configuration, le routeur donne à l’ESP32 une adresse IP locale unique. Vous pouvez ensuite communiquer avec l’ESP32 à partir d’autres appareils (comme votre téléphone ou votre ordinateur) qui sont connectés au même réseau, simplement en utilisant cette adresse IP.
Étant donné que le routeur est également connecté à Internet, nous pouvons demander des informations sur Internet à l’aide de nos cartes ESP32 comme les données des API, publier des données sur des plates-formes en ligne, utiliser des icônes et des images d’Internet dans nos pages de serveurs Web ou inclure des bibliothèques JavaScript.
Cependant, dans certains cas, nous n’avons peut-être pas de routeur à proximité pour connecter l’ESP32. Dans ce scénario, vous devez définir votre carte ESP32 comme point d’accès.
Point d’accès
Lorsque votre ESP32 est configurée en tant que point d’accès, d’autres appareils (tels que votre smartphone, tablette ou ordinateur) peuvent s’y connecter sans avoir besoin d’un routeur; L’ESP contrôle son propre réseau Wi-Fi.
Contrairement à un routeur, un point d’accès ESP32 ne se connecte pas davantage à un réseau câblé ou à Internet, vous ne pouvez donc pas accéder à des bibliothèques externes, publier des lectures de capteurs au cloud ou utiliser des services comme le courrier. Dans la plupart de nos exemples, nous définissons généralement les cartes ESP32 comme stations. Vous pouvez facilement modifier nos exemples et définir les planches en tant que points d’accès à la place si cela convient plus à vos projets.
Communication client-serveur
Il existe plusieurs façons de communiquer entre le client et le serveur: le sondage HTTP, les événements de serveur (SSE) et WebSocket. Nous nous concentrerons sur le sondage HTTP, qui est le protocole le plus simple pour commencer et mieux comprendre comment fonctionnent les serveurs Web.
Nous avons un ebook dédié aux serveurs Web qui explore en détail ces trois protocoles de communication:
Sondage HTTP
Dans le sondage HTTP, le client demande à plusieurs reprises au serveur de nouvelles informations. Lorsque le serveur reçoit une demande, il répond avec les données demandées. Le serveur n’envoie des informations que lorsque le client le demande.
Par exemple, votre navigateur envoie une demande à l’ESP32, et il répond avec tout ce que vous l’avez programmé pour fournir, comme une page Web affichant les dernières lectures de capteurs. Pour garder la page Web à jour à l’aide de cette méthode, le navigateur doit continuer à envoyer des demandes à intervalles réguliers.
Serveur Web ESP32
Jetons un coup d’œil à un exemple pratique avec l’ESP32 qui agit comme un serveur Web dans le réseau local.
En règle générale, un serveur Web avec l’ESP32 dans le réseau local ressemble à ceci: l’ESP32 exécuté en tant que serveur Web est connecté via le Wi-Fi à votre routeur. Votre ordinateur, smartphone ou tablette, sont également connectés à votre routeur via le Wi-Fi ou le câble Ethernet. Ainsi, l’ESP32 et votre navigateur sont sur le même réseau.
Lorsque vous tapez l’adresse IP ESP32 dans votre navigateur, vous envoyez une demande HTTP à votre ESP32. Ensuite, l’ESP32 répond par une réponse qui peut contenir une valeur, une lecture, un texte HTML pour afficher une page Web ou toute autre données.
2) Exemple de serveur Web ESP32 (sorties de contrôle)
Sur la base de ce que nous avons appris jusqu’à présent sur les serveurs Web et l’ESP32, comment pouvez-vous tout mettre ensemble pour créer des projets IoT? Étant donné que l’ESP32 a des broches GPIO, vous pouvez connecter des capteurs, des actionneurs et d’autres appareils, puis les contrôler ou les surveiller via une interface Web.
Voici un exemple de serveur Web que nous avons construit pour contrôler une sortie. La page Web suivante apparaît lorsque vous entrez l’adresse IP ESP32 dans un navigateur.
Lorsque vous appuyez sur le bouton ON, l’URL passe à l’adresse IP ESP suivie de / On. L’ESP reçoit une demande sur cette nouvelle URL, il vérifie quelle URL est demandée et modifie l’état LED en conséquence.
- Appuyez sur le bouton On> Demande: / ON> LED allume
Lorsque vous appuyez sur le bouton OFF, une nouvelle demande est faite à l’URL ESP32 dans l’URL / OFF. L’ESP vérifie une fois de plus quelle URL est demandée et désactive la LED.
- Appuyez sur le bouton OFF> Demande: / OFF> LED éteint
Le même concept peut être appliqué pour contrôler plusieurs sorties.
Aperçu du projet
Avant d’aller directement au projet, il est important de décrire ce que notre serveur Web fera afin qu’il soit plus facile de suivre et de comprendre les étapes plus tard.
- Le serveur Web, vous construirez des contrôles de deux LED: l’un connecté à l’ESP32 GPIO 26 et un autre à GPIO 27.
- Vous pouvez accéder au serveur Web ESP32 en tapant l’adresse IP ESP32 dans un navigateur sur le réseau local.
- En cliquant sur les boutons de votre serveur Web, vous pouvez modifier instantanément l’état de chaque LED.
Ceci est un exemple simple qui illustre comment créer un serveur Web qui contrôle deux LED. L’idée est de remplacer ces LED par un relais ou tout autre composant électronique que vous souhaitez contrôler.
Câblage du circuit
Commencez par construire le circuit. Connectez deux LED à votre ESP32 comme indiqué dans le diagramme schématique suivant – avec une LED connectée à GPIO 26 et une autre à GPIO 27.
Voici une liste de pièces dont vous avez besoin pour assembler le circuit:
Vous pouvez utiliser les liens précédents ou aller directement à makeradvisor.com/tools pour trouver toutes les pièces de vos projets au meilleur prix!
Lecture recommandée: ESP32 PINOOUT RÉFÉRENCE: Quelles broches GPIO devriez-vous utiliser?
Construire le serveur Web
Après avoir câblé le circuit, l’étape suivante consiste à télécharger le code sur votre ESP32. Copiez le code ci-dessous sur votre IDE Arduino, mais ne le téléchargez pas encore. Vous devez apporter des modifications pour le faire fonctionner.
/*
Rui Santos & Sara Santos - Raspberryme.com
https://Raspberryme.com/esp32-web-server-beginners-guide/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
#include
#include
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;
String output26State = "off";
String output27State = "off";
// Create a web server object
WebServer server(80);
// Function to handle turning GPIO 26 on
void handleGPIO26On() {
output26State = "on";
digitalWrite(output26, HIGH);
handleRoot();
}
// Function to handle turning GPIO 26 off
void handleGPIO26Off() {
output26State = "off";
digitalWrite(output26, LOW);
handleRoot();
}
// Function to handle turning GPIO 27 on
void handleGPIO27On() {
output27State = "on";
digitalWrite(output27, HIGH);
handleRoot();
}
// Function to handle turning GPIO 27 off
void handleGPIO27Off() {
output27State = "off";
digitalWrite(output27, LOW);
handleRoot();
}
// Function to handle the root URL and show the current states
void handleRoot() {
String html = "";
html += "";
html += "";
html += "";
// Display GPIO 26 controls
html += "GPIO 26 - State " + output26State + "
";
if (output26State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
// Display GPIO 27 controls
html += "GPIO 27 - State " + output27State + "
";
if (output27State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
html += "";
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(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
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// Set up the web server to handle different routes
server.on("/", handleRoot);
server.on("/26/on", handleGPIO26On);
server.on("/26/off", handleGPIO26Off);
server.on("/27/on", handleGPIO27On);
server.on("/27/off", handleGPIO27Off);
// Start the web server
server.begin();
Serial.println("HTTP server started");
}
void loop() {
// Handle incoming client requests
server.handleClient();
}
Afficher le code brut
Définition de vos informations d’identification réseau
Vous devez modifier les lignes suivantes avec vos informations d’identification réseau: SSID et mot de passe.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = " REPLACE_WITH_YOUR_PASSWORD";Obtenir l’adresse IP ESP32
Maintenant, vous pouvez télécharger le code et cela fonctionnera immédiatement. N’oubliez pas de vérifier si vous avez sélectionné la bonne carte et le bon port com.
Ouvrez le moniteur en série à un taux en bauds de 115200.
L’ESP32 se connecte au Wi-Fi et imprime son adresse IP sur le moniteur série. Copiez cette adresse IP car vous en avez besoin pour accéder au serveur Web ESP32.
Remarque: Si rien n’apparaît sur le moniteur série, appuyez sur le bouton ESP32 «EN» (bouton Activer / réinitialiser à côté du port microUSB).
Accéder au serveur Web
Ouvrez votre navigateur, collez l’adresse IP ESP32 et vous verrez la page suivante.
Tester le serveur Web
Testons le serveur Web. Cliquez sur le bouton pour activer GPIO 26. Vous pouvez voir sur le moniteur en série que l’ESP32 reçoit une demande sur l’URL / 26 / sur.
Lorsque l’ESP reçoit cette demande, elle tourne la LED jointe à GPIO 26 et son état est également mis à jour sur la page Web. Testez le bouton pour GPIO 27 et voyez qu’il fonctionne de manière similaire.
Vous pouvez également accéder au serveur Web sur votre smartphone tant qu’il est connecté au même réseau.
Comment fonctionne le code
Maintenant, examinons de plus près le code pour voir comment cela fonctionne.
La première chose que vous devez faire est d’inclure les bibliothèques nécessaires pour la connectivité Wi-Fi et la configuration d’un serveur Web.
#include
#include Comme mentionné précédemment, vous devez insérer votre SSID et votre mot de passe dans les lignes suivantes à l’intérieur des doubles citations.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = " REPLACE_WITH_YOUR_PASSWORD";Attribuez des broches GPIO à chacune de vos sorties. Dans cet exemple, nous utilisons GPIO 26 et GPIO 27, mais vous pouvez utiliser tout autre GPIO approprié.
const int output26 = 26;
const int output27 = 27;Ensuite, créez des variables pour stocker les états de ces sorties. Vous pouvez ajouter plus de sorties en définissant des variables supplémentaires.
String output26State = "off";
String output27State = "off";Créez un objet de serveur Web sur le port 80 appelé Server.
// Create a web server object
WebServer server(80);installation()
Maintenant, allons dans la configuration (). Tout d’abord, nous commençons une communication série à un taux en bauds de 115200 à des fins de débogage.
Serial.begin(115200);Vous définissez également vos GPIO en tant que sorties et les définissez à faible.
// 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 avec wifi.begin (SSID, mot de passe), attendez une connexion réussie et imprimez l’adresse IP ESP32 dans le moniteur série.
// Connect to Wi-Fi network
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());Lisez ce guide pour en savoir plus sur le Wi-Fi avec les fonctions de bibliothèque Wi-Fi ESP32: ESP32 (Arduino IDE).
Enfin, nous configurons le serveur Web et définissons les itinéraires qu’il devrait gérer. Ces itinéraires seront demandés lorsque vous cliquez sur les différents boutons de la page Web.
// Set up the web server to handle different routes
server.on("/", handleRoot);
server.on("/26/on", handleGPIO26On);
server.on("/26/off", handleGPIO26Off);
server.on("/27/on", handleGPIO27On);
server.on("/27/off", handleGPIO27Off);
// Start the web server
server.begin();
Serial.println("HTTP server started");Par exemple, lorsque vous faites une demande sur la root / URL (vous collez simplement l’adresse IP ESP32 sur le navigateur Web), il exécutera la fonction Handleroot (). Lorsque vous cliquez sur le bouton GPIO 26, il fera une demande sur la route / 26 / sur et la carte exécutera la fonction HandleGPIO26ON (), et ainsi de suite… ces fonctions sont définies au début du code avant la configuration (). Nous les examinerons ensuite.
boucle()
Dans la boucle (), nous écoutons continuellement les demandes des clients entrants. Cela garantit que l’ESP32 est toujours prêt à répondre aux demandes de votre navigateur.
server.handleClient();Gestion du contrôle GPIO
Sur la page Web, vous avez vu que vous avez quatre boutons pour contrôler les GPIO:
- GPIO 26 sur bouton> Demande: / 26 / on> Fonction: handlegpio26on ()
- GPIO 26 OFF BOUTON> Demande: / 26 / OFF> FONCTION: HOPIEGPIO26OFF ()
- GPIO 27 sur bouton> Demande: / 27 / on> Fonction: handlegpio27on ()
- GPIO 27 OFF BOUTON> Demande: / 27 / OFF> Fonction: HandleGpio27off ()
Jetons un coup d’œil au bouton GPIO 26. Lorsque vous cliquez sur ce bouton, il fait une demande à l’ESP32 sur l’URL / 26 / sur. Lorsque cela se produit, la fonction HandleGpio26On () s’exécutera.
// Function to handle turning GPIO 26 on
void handleGPIO26On() {
output26State = "on";
digitalWrite(output26, HIGH);
handleRoot();
}Cette fonction met à jour l’état du GPIO sur la variable Output26State et allume le GPIO. Enfin, il appelle la fonction Handleroot () pour afficher la page Web avec le bon état GPIO.
Cela fonctionne de manière similaire aux autres boutons et aux itinéraires et fonctions correspondants. Notez que toutes ces fonctions appellent la fonction Handleroot () pour afficher la page Web avec les bons états GPIO.
// Function to handle turning GPIO 26 off
void handleGPIO26Off() {
output26State = "off";
digitalWrite(output26, LOW);
handleRoot();
}
// Function to handle turning GPIO 27 on
void handleGPIO27On() {
output27State = "on";
digitalWrite(output27, HIGH);
handleRoot();
}
// Function to handle turning GPIO 27 off
void handleGPIO27Off() {
output27State = "off";
digitalWrite(output27, LOW);
handleRoot();
}Affichage de la page Web
La fonction Handleroot () est responsable de la génération de la page Web. Il envoie le HTML et le CSS nécessaires pour construire la page. Le texte HTML et CSS requis pour créer la page Web est enregistré dans la variable HTML.
// Function to handle the root URL and show the current states
void handleRoot() {
String html = "";
html += "";
html += "";
html += "";
// Display GPIO 26 controls
html += "GPIO 26 - State " + output26State + "
";
if (output26State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
// Display GPIO 27 controls
html += "GPIO 27 - State " + output27State + "
";
if (output27State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
html += "";
server.send(200, "text/html", html);
}
Notez que pour générer les boutons, nous utilisons des instructions si et else pour afficher le bouton correct et l’état en fonction de l’état actuel des GPIO.
// Display GPIO 26 controls
html += "GPIO 26 - State " + output26State + "
";
if (output26State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
// Display GPIO 27 controls
html += "GPIO 27 - State " + output27State + "
";
if (output27State == "off") {
html += "ON
";
} else {
html += "OFF
";
}Enfin, la page Web est envoyée au client:
server.send(200, "text/html", HTML);3) Ajouter une authentification à votre serveur Web
Dans certains projets, vous voudrez peut-être garder votre serveur Web ESP32 protégé par le nom d’utilisateur et le mot de passe. Le code suivant protège l’accès au serveur Web avec un nom d’utilisateur et un mot de passe.
/*
Rui Santos & Sara Santos - Raspberryme.com
https://Raspberryme.com/esp32-web-server-beginners-guide/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
#include
#include
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Username and password for web page access
const char* http_username = "admin";
const char* http_password = "admin";
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;
String output26State = "off";
String output27State = "off";
// Create a web server object
WebServer server(80);
// Function to authenticate user
bool isAuthenticated() {
if (!server.authenticate(http_username, http_password)) {
server.requestAuthentication();
return false;
}
return true;
}
// Function to handle turning GPIO 26 on
void handleGPIO26On() {
if (!isAuthenticated()) return;
output26State = "on";
digitalWrite(output26, HIGH);
handleRoot();
}
// Function to handle turning GPIO 26 off
void handleGPIO26Off() {
if (!isAuthenticated()) return;
output26State = "off";
digitalWrite(output26, LOW);
handleRoot();
}
// Function to handle turning GPIO 27 on
void handleGPIO27On() {
if (!isAuthenticated()) return;
output27State = "on";
digitalWrite(output27, HIGH);
handleRoot();
}
// Function to handle turning GPIO 27 off
void handleGPIO27Off() {
if (!isAuthenticated()) return;
output27State = "off";
digitalWrite(output27, LOW);
handleRoot();
}
// Function to handle the root URL and show the current states
void handleRoot() {
if (!isAuthenticated()) return;
String html = "";
html += "";
html += "";
html += "";
// Display GPIO 26 controls
html += "GPIO 26 - State " + output26State + "
";
if (output26State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
// Display GPIO 27 controls
html += "GPIO 27 - State " + output27State + "
";
if (output27State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
html += "";
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(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
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// Set up the web server to handle different routes with authentication
server.on("/", handleRoot);
server.on("/26/on", handleGPIO26On);
server.on("/26/off", handleGPIO26Off);
server.on("/27/on", handleGPIO27On);
server.on("/27/off", handleGPIO27Off);
// Start the web server
server.begin();
Serial.println("HTTP server started");
}
void loop() {
// Handle incoming client requests
server.handleClient();
}
Afficher le code brut
Ajout de nom d’utilisateur et de mot de passe
Le code suivant protège votre serveur Web avec le nom d’utilisateur et le mot de passe. Par défaut, le nom d’utilisateur est administrateur et le mot de passe est admin.
Vous pouvez ajouter le nom d’utilisateur et le mot de passe souhaités dans les lignes suivantes.
const char* http_username = "admin";
const char* http_password = "admin";Gestion de l’authentification et des demandes
Pour protéger votre page Web, nous avons ajouté un simple mécanisme d’authentification. Avant d’accéder à une partie du serveur Web, l’utilisateur doit saisir le nom d’utilisateur et le mot de passe corrects. Ceci est géré par la fonction isAuthenticated ().
bool isAuthenticated() {
if (!server.authenticate(http_username, http_password)) {
server.requestAuthentication();
return false;
}
return true;
}Cette fonction vérifie si l’utilisateur est authentifié. Sinon, il invite l’utilisateur à saisir les informations d’identification. La fonction renvoie true si l’utilisateur est authentifié ou faux autrement.
Avant d’envoyer une réponse au client, nous vérifions si l’utilisateur est authentifié. Remarquez l’utilisation de la ligne suivante avant de retourner quoi que ce soit au client.
if (!isAuthenticated()) return;Par exemple, dans le cas de la fonction HandleGpio26On ():
// Function to handle turning GPIO 26 on
void handleGPIO26On() {
if (!isAuthenticated()) return;
output26State = "on";
digitalWrite(output26, HIGH);
handleRoot();
}Tester le serveur Web
Maintenant, lorsque vous essayez d’accéder à votre adresse IP ESP32, vous devrez saisir votre nom d’utilisateur et votre mot de passe. Ensuite, appuyez sur le bouton «Connectez-vous»:
Vous pourrez accéder à la page Web pour contrôler les sorties.
Si vous entrez le mauvais mot de passe, la boîte de connexion s’affichera à nouveau.
4) Point d’accès au serveur Web ESP32 (AP)
Imaginez que vous souhaitez contrôler votre ESP32 à l’aide d’une page Web sur votre smartphone, mais l’ESP32 n’a pas accès à un routeur pour vous connecter à Internet (vous ne pouvez donc pas le définir comme une station Wi-Fi comme dans les exemples précédents). Dans ce cas, vous pouvez définir l’ESP32 comme point d’accès.
Lorsque votre ESP32 est configurée en tant que point d’accès, d’autres appareils (tels que votre smartphone, tablette ou ordinateur) peuvent s’y connecter sans avoir besoin d’un routeur. Voyons comment implémenter cela.
Définissez l’ESP32 comme point d’accès
Pour définir l’ESP32 comme point d’accès, définissez le mode Wi-Fi sur le point d’accès comme suit:
WiFi.mode(WIFI_AP);Et puis, utilisez la méthode softap () comme suit:
WiFi.softAP(ssid, password);SSID est le nom que vous souhaitez donner au point d’accès ESP32, et le paramètre de mot de passe est le mot de passe du point d’accès. Si vous ne souhaitez pas définir un mot de passe, définissez-le sur NULL.
Il existe également d’autres paramètres facultatifs que vous pouvez transmettre à la méthode SoftAP (). Voici tous les paramètres:
WiFi.softAP(const char* ssid, const char* password, int channel, int ssid_hidden, int max_connection);- SSID: nom du point d’accès – maximum de 63 caractères;
- Mot de passe: minimum de 8 caractères; réglé sur NULL si vous souhaitez que le point d’accès soit ouvert;
- Channel: numéro de canal Wi-Fi (1-13)
- SSID_HIDDEN: (0 = diffuser SSID, 1 = Hide SSID)
- MAX_CONNECTION: CLIENTS CONNEXES SIMMULAIRES MAXIMUM (1-4)
Le code suivant crée le même serveur Web construit précédemment, mais en mode Point d’accès.
/*
Rui Santos & Sara Santos - Raspberryme.com
https://Raspberryme.com/esp32-web-server-beginners-guide/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
#include
#include
// Replace with SSID and PASSWORD for the ESP32 ACCESS POINT
// (for testing you can leave the default)
const char* ssid = "ESP32_ACCESS_POINT";
const char* password = "pass123456";
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;
String output26State = "off";
String output27State = "off";
// Create a web server object
WebServer server(80);
// Function to handle turning GPIO 26 on
void handleGPIO26On() {
output26State = "on";
digitalWrite(output26, HIGH);
handleRoot();
}
// Function to handle turning GPIO 26 off
void handleGPIO26Off() {
output26State = "off";
digitalWrite(output26, LOW);
handleRoot();
}
// Function to handle turning GPIO 27 on
void handleGPIO27On() {
output27State = "on";
digitalWrite(output27, HIGH);
handleRoot();
}
// Function to handle turning GPIO 27 off
void handleGPIO27Off() {
output27State = "off";
digitalWrite(output27, LOW);
handleRoot();
}
// Function to handle the root URL and show the current states
void handleRoot() {
String html = "";
html += "";
html += "";
html += "";
// Display GPIO 26 controls
html += "GPIO 26 - State " + output26State + "
";
if (output26State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
// Display GPIO 27 controls
html += "GPIO 27 - State " + output27State + "
";
if (output27State == "off") {
html += "ON
";
} else {
html += "OFF
";
}
html += "";
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
// Set the ESP32 as access point
Serial.print("Setting as access point ");
WiFi.mode(WIFI_AP);
WiFi.softAP(ssid, password);
Serial.println("");
Serial.println("ESP32 Wi-Fi Access Point ready!");
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
// Set up the web server to handle different routes
server.on("/", handleRoot);
server.on("/26/on", handleGPIO26On);
server.on("/26/off", handleGPIO26Off);
server.on("/27/on", handleGPIO27On);
server.on("/27/off", handleGPIO27Off);
// Start the web server
server.begin();
Serial.println("HTTP server started");
}
void loop() {
// Handle incoming client requests
server.handleClient();
}
Afficher le code brut
Vous pouvez télécharger le code précédent sur votre carte.
L’ESP32 mettra en place son propre réseau Wi-Fi. Maintenant, pour accéder au serveur Web, vous devez connecter votre ordinateur ou votre smartphone au réseau ESP32.
Dans votre smartphone, accédez aux paramètres Wi-Fi et connectez-vous à l’ESP32_ACCESS_POINT. Le mot de passe est PASS123456 (si vous avez laissé les valeurs par défaut). Ensuite, ouvrez le navigateur et tapez l’adresse IP ESP32: 192.168.4.1.
Maintenant, vous devriez pouvoir contrôler l’ESP32 sans avoir besoin d’un routeur. Vous utilisez le réseau Wi-Fi ESP32.
5) Exemple de serveur Web ESP32 (lectures d’affichage des capteurs)
Pour terminer notre didacticiel ESP32 Web Serveurs, nous créerons un exemple de serveur Web simple pour afficher les lectures de capteurs. Nous afficherons les lectures de température, d’humidité et de pression à partir d’un capteur BME280, mais vous pouvez utiliser n’importe quel autre capteur.
Lecture recommandée: ESP32 avec capteur BME280 utilisant Arduino IDE (pression, température, humidité).
Nous avons des guides pour plus de 30 capteurs et modules avec l’ESP32, consultez-les ici: ESP32: 30+ guides gratuits pour les capteurs et les modules.
Aperçu du projet
Dans cet exemple, nous afficherons les lectures du capteur d’un BME280 sur une table. La page Web pour afficher les lectures aura l’air comme suit:
Les valeurs de température, d’humidité, de pression et d’altitude seront concaténées avec la chaîne HTML. Lorsque l’ESP32 reçoit une demande sur l’URL root, nous enverrons la chaîne HTML concaténée avec les lectures du capteur actuel.
Pour obtenir de nouvelles lectures, vous devez actualiser la page Web pour faire une nouvelle demande.
Création d’une table dans HTML
Dans cet exemple, nous affichons les lectures du capteur BME280 sur une table. Nous devons donc écrire du texte HTML pour construire une table.
Pour créer une table dans HTML, vous utilisez les balises.
Pour créer une ligne, vous utilisez le
Tags. L’en-tête de table est défini en utilisant le
Tags, et chaque cellule de table est définie en utilisant le
Tags.
Pour créer une table pour nos lectures, vous utilisez le texte HTML suivant:
MEASUREMENT
VALUE
Temp. Celsius
--- *C
Temp. Fahrenheit
--- *F
Pressure
--- hPa
Approx. Altitude
--- meters
Humidity
--- %
Nous créons l’en-tête du tableau avec une cellule appelée mesure, et une autre valeur nommée.
Ensuite, nous créons six lignes pour afficher chacune des lectures en utilisant le
Tags. À l’intérieur de chaque ligne, nous créons deux cellules, en utilisant le
Tags, un avec le nom de la mesure et un autre pour maintenir la valeur de mesure. Les trois tirets «- – -» doivent ensuite être remplacés par les mesures réelles du capteur BME280.
Vous pouvez enregistrer ce texte sous Table.html, faire glisser le fichier dans votre navigateur et voir le résultat. Le texte HTML précédent crée le tableau suivant.
La table n’a pas de styles appliqués. Vous pouvez utiliser CSS pour coiffer la table. Vous pouvez lire le tutoriel dans le lien suivant pour apprendre à styliser une table: les tables de style CSS.
Câblage du circuit
Tirez le capteur vers les broches ESP32 SDA et SCL, comme le montre le diagramme schématique suivant. Pour la carte ESP32 Devkit, les broches par défaut sont GPIO 21 (SDA) et GPIO 22 (SCL). Vérifiez les épingles par défaut pour la carte que vous utilisez.
Voici une liste de pièces dont vous avez besoin pour construire ce circuit:
Afficher les lectures du capteur BME280 sur le serveur Web – Code
Maintenant que vous savez comment créer une table pour afficher les résultats et les bases de la création d’un serveur Web, il est temps pour le code de le créer. Si vous avez suivi les exemples précédents, vous connaissez la plupart des lignes de code.
Copiez le code suivant sur votre IDE Arduino. Avant le téléchargement, vous devez insérer votre SSID et votre mot de passe.
/*
Rui Santos & Sara Santos - Raspberryme.com
https://Raspberryme.com/esp32-web-server-beginners-guide/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
#include
#include
#include
#include
#include
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BME280 bme; // I2C
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Create an instance of the WebServer on port 80
WebServer server(80);
void handleRoot() {
String html = "";
html += "";
html += "";
html += "";
html += "";
html += "MEASUREMENT VALUE Temp. Celsius ";
html += String(bme.readTemperature());
html += " *C Temp. Fahrenheit ";
html += String(1.8 * bme.readTemperature() + 32);
html += " *F Pressure ";
html += String(bme.readPressure() / 100.0F);
html += " hPa Approx. Altitude ";
html += String(bme.readAltitude(SEALEVELPRESSURE_HPA));
html += " m Humidity ";
html += String(bme.readHumidity());
html += " %
";
// Send the response to the client
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
// Initialize the BME280 sensor
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
// Connect to Wi-Fi
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// Set up the routes
server.on("/", handleRoot);
// Start the server
server.begin();
}
void loop() {
server.handleClient();
}
Afficher le code brut
Modifiez les lignes suivantes pour inclure votre SSID et votre mot de passe.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Ensuite, vérifiez que vous avez la bonne carte et le bon port com et téléchargez le code sur votre ESP32. Après le téléchargement, ouvrez le moniteur série à un taux en bauds de 115200 et copiez l’adresse IP ESP32.
Ouvrez votre navigateur, collez l’adresse IP et vous devriez voir les dernières lectures du capteur. Pour mettre à jour les lectures, il vous suffit de rafraîchir la page Web.
Comment fonctionne le code
Ce croquis est très similaire aux croquis précédents dans ce tutoriel. Vous devez être familier avec la plupart des parties du code. Tout d’abord, vous incluez les bibliothèques WiFi et Webserver pour créer le serveur Web et les bibliothèques nécessaires à lire à partir du capteur BME280.
#include
#include
#include
#include
#include La ligne suivante définit une variable pour économiser la pression au niveau de la mer. Pour une estimation d’altitude plus précise, remplacez la valeur par la pression actuelle au niveau de la mer à votre emplacement.
#define SEALEVELPRESSURE_HPA (1013.25)Dans la ligne suivante, vous créez un objet adafruit_bme280 appelé BME qui établit par défaut une communication avec le capteur utilisant I2C.
Adafruit_BME280 bme; // I2CEn savoir plus sur I2C avec la communication ESP32: ESP32 I2C: Définissez des épingles, plusieurs interfaces de bus et périphériques (Arduino IDE).
Comme mentionné précédemment, vous devez insérer votre SSID et votre mot de passe dans les lignes suivantes à l’intérieur des doubles citations.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = " REPLACE_WITH_YOUR_PASSWORD";Ensuite, initialisez un serveur sur le port 80.
WebServer server(80);installation()
Dans la configuration (), nous commençons une communication série à un taux en bauds de 115200 à des fins de débogage.
Serial.begin(115200);Vous vérifiez que le capteur BME280 a été initialisé avec succès.
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}Les lignes suivantes commencent la connexion Wi-Fi avec wifi.begin (SSID, mot de passe), attendez une connexion réussie et imprimez l’adresse IP ESP dans le moniteur série.
// Connect to Wi-Fi
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());Enfin, nous configurons le serveur Web et définissons les itinéraires qu’il devrait gérer. Ce serveur Web gérera simplement l’URL root pour afficher les dernières lectures de capteurs. Lorsque vous accédez à l’URL root, il appellera la fonction Handleroot ().
// Set up the routes
server.on("/", handleRoot);
// Start the server
server.begin();Affichage de la page Web
Dans cet exemple, la fonction Handleroot () est responsable de la génération de la page Web. Il envoie le HTML et le CSS nécessaires pour construire la page. Le texte HTML et CSS requis pour créer la page Web est enregistré sur la variable HTML. Nous concatenons les lectures du capteur actuel avec la variable HTML. De cette façon, le HTML envoyé au navigateur Web contiendra les dernières lectures de capteurs.
void handleRoot() {
String html = "";
html += "";
html += "";
html += "";
html += "";
html += "MEASUREMENT VALUE Temp. Celsius ";
html += String(bme.readTemperature());
html += " *C Temp. Fahrenheit ";
html += String(1.8 * bme.readTemperature() + 32);
html += " *F Pressure ";
html += String(bme.readPressure() / 100.0F);
html += " hPa Approx. Altitude ";
html += String(bme.readAltitude(SEALEVELPRESSURE_HPA));
html += " m Humidity ";
html += String(bme.readHumidity());
html += " %
";
// Send the response to the client
server.send(200, "text/html", html);
}Pour afficher les lectures du capteur sur la table, nous avons juste besoin de les envoyer entre le correspondant
Tags. Par exemple, pour afficher la température:
html += "Temp. Celsius ";
html += String(bme.readTemperature());
html += " *C Remarque: La balise est utile pour styliser une partie particulière d’un texte. Dans ce cas, nous utilisons la balise pour inclure la lecture du capteur dans une classe appelée «capteur». Ceci est utile pour styliser cette partie particulière du texte à l’aide de CSS.
Par défaut, le tableau affiche les lectures de température dans les degrés Celsius et Fahrenheit.
Pour obtenir les dernières lectures de capteurs, il vous suffit de rafraîchir la page Web. Pour mettre à jour automatiquement les lectures, vous devez apprendre d’autres protocoles de communication tels que des événements ou des lignes WebSockets de serveur.
Pour en savoir plus sur la création de serveurs Web ESP32, nous vous recommandons de jeter un œil à notre Ebook: Créer des serveurs Web avec ESP32 et ESP8266 Ebook (3e édition).
Emballage
Dans ce tutoriel, vous avez appris la création de serveurs Web avec l’ESP32. Nous avons couvert des concepts de base et nous avons examiné les exemples de base pour vous aider à démarrer. Nous espérons que vous avez trouvé ce guide utile et que vous pouvez modifier les exemples de vos projets.
Si vous êtes nouveau dans les serveurs ESP32 et Web, nous recommandons les livres électroniques suivants:
Voici d’autres tutoriels que vous aimerez peut-être:
Cette vidéo vous emmène dans l’histoire de Raspberry Pi :
-
ELEGOO Carte Starter Kit de Démarrage ESP-32 avec Tutoriel et Carte de Développement Microcontrôleur Double Cœur USB-C Prise en Charge AP/STA/AP+STA, Compatible avec Arduino IDE -
SunFounder Kit Explorateur Élite avec Arduino Uno R4 WiFi Original, Conforme RoHS, Bluetooth, IoT, ESP32, IIC LCD1602, OLED,Tutoriels en Ligne et Cours vidéo en Anglais pour débutants et ingénieurs