À propos de ce tutoriel :
Les bases de l'ESP32
1. Introduction à ESP32
2. Environnement de développement intégré ESP32 Arduino
3. VS Code et PlatformIO
4. Broches ESP32
5. Entrée et sortie ESP32
6. Modulation de largeur d'impulsion ESP32
7. Entrée analogique ESP32
8. Minuterie d'interruption ESP32
9 .ESP32 sommeil profond
Protocole ESP32
1. Serveur Web ESP32 ☑
2. ESP32LoRa
3. ESP32 BLE
4.ESP32 client-serveur BLE
5. Bluetooth ESP32
6.ESP32 MQTT
7.ESP32 ESP-MAINTENANT
8. Wi-Fi ESP32
9.ESP32 WebSocket
10.ESP32 ESP-MESH
11. Boîte aux lettres ESP32
12.SMS ESP32
13. ESP32 HTTP obtenir POST
14. API Web HTTP GET
15. API Web HTTP POST
Articles sur le serveur ESP32
Continuez à mettre à jour, suivez les blogueurs et ne vous perdez pas ! ! !
Module de capteur ESP32
Continuez à mettre à jour, suivez les blogueurs et ne vous perdez pas ! ! !
Combat ultime ESP32
Plus de 100 projets pratiques ESP32, faites attention ! ! !
Après avoir appris les bases d'ESP32, nous entrerons ensuite dans l'étude du protocole.Dans cette partie, nous étudierons plus en détail ESP32 avec des exemples. Sans plus tarder, commençons ! ! !
Serveur Web ESP32 - IDE Arduino
Dans ce projet, vous utiliserez l'environnement de programmation Arduino IDE pour créer un serveur Web autonome avec un ESP32 qui contrôle les sorties (deux LED). Le serveur Web est réactif pour les mobiles et est accessible à l'aide de n'importe quel appareil en tant que navigateur sur le réseau local. Nous allons vous montrer étape par étape comment créer un serveur Web et comment fonctionne le code.
Aperçu du projet
Avant de vous lancer directement dans le projet, il est important de décrire ce que fera notre serveur Web afin qu'il soit plus facile de suivre les étapes plus tard.
- Le serveur web que vous allez construire contrôle les deux LED GPIO 26 et GPIO 27 connectées à l'ESP32 ;
- Vous pouvez entrer l'adresse IP ESP32 dans un navigateur sur le réseau local pour accéder au serveur Web ESP32 ;
- Vous pouvez changer instantanément l'état de chaque LED en cliquant sur un bouton sur le serveur Web.
pièces nécessaires
Pour ce tutoriel, vous aurez besoin des pièces suivantes :
Carte de développement ESP32
2 LED de 5 mm
2 résistances 330 Ohm
Breadboard Jumper
Wires
diagramme schématique
Commencez par construire le circuit. Connectez deux LED à l'ESP32 comme indiqué dans le schéma ci-dessous - une LED au GPIO 26 et l'autre au GPIO 27.
NOTE : Nous utilisons la carte ESP32 DEVKIT DOIT avec 36 broches. Vérifiez toujours les broches de la carte que vous utilisez avant d'assembler votre circuit.
Code du serveur Web ESP32
Nous fournissons le code pour créer le serveur Web ESP32 ici. Copiez le code ci-dessous dans votre IDE Arduino, mais ne le téléchargez pas encore. Vous devez apporter quelques modifications pour que cela fonctionne pour vous.
#include <WiFi.h>
// Replace with your network credentials
const char* ssid1 = "";
const char* password1 = "";
// 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() {
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 with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid1, password1);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(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 (currentLine.length() == 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:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}
// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<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
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
// Web Page Heading
client.println("<body><h1>ESP32 Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIO 26
client.println("<p>GPIO 26 - State " + output26State + "</p>");
// If the output26State is off, it displays the ON button
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for GPIO 27
client.println("<p>GPIO 27 - State " + output27State + "</p>");
// If the output27State is off, it displays the ON button
if (output27State=="off") {
client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
// 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
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}Configurez votre réseau Wi-Fi
Vous devez modifier les lignes suivantes avec votre réseau : SSID et Mot de passe. Le code est bien commenté sur les endroits où vous devez apporter des modifications.
// Replace with your network credentials
const char* ssid1 = "";
const char* password1 = "";télécharger le code
Vous pouvez maintenant télécharger votre code et le serveur Web fonctionnera en un rien de temps. Suivez les étapes ci-dessous pour télécharger le code sur l'ESP32 :
1) Insérez la carte de développement ESP32 dans l'ordinateur ;
2) Sélectionnez votre carte de développement dans Outils > Carte de développement de l'IDE Arduino (dans notre exemple, nous utilisons la carte de développement ESP32 DEVKIT DOIT);
3) Sélectionnez Port COM dans Outils > Ports .
4) Appuyez sur le bouton de téléchargement 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 " Upload complete ".
Trouver l'adresse IP ESP
Après avoir téléchargé le code, ouvrez le moniteur série avec un débit en bauds de 115200.
Appuyez sur le bouton ESP32 EN (réinitialiser). Connectez l'ESP32 au Wi-Fi et affichez l'adresse IP ESP sur le moniteur série. Copiez l'adresse IP car vous en aurez besoin pour accéder au serveur Web ESP32.
accéder au serveur web
Pour accéder au serveur Web, ouvrez un navigateur, collez l'adresse IP ESP32 et vous verrez la page suivante. Dans notre cas, il s'agit de 192.168.1.135 .
Si vous regardez le moniteur série, vous pouvez voir ce qui se passe en arrière-plan. ESP reçoit une requête HTTP d'un nouveau client (dans ce cas, votre navigateur).
tester le serveur web
Vous pouvez maintenant tester que votre serveur Web fonctionne correctement. Cliquez sur le bouton pour contrôler la LED.
En attendant, vous pouvez jeter un œil au moniteur série pour voir ce qui se passe en arrière-plan. Par exemple, lorsque vous cliquez sur le bouton pour activer le GPIO 26 , l'ESP32 reçoit une requête sur l'URL /26/on.
Lorsque l'ESP32 reçoit cette demande, il ouvre une connexion au GPIO 26 ON et met à jour son statut sur la page Web.
Le bouton fonctionne de la même manière pour GPIO 27 . Testez que cela fonctionne.
comment fonctionne le code
Dans cette section, nous allons examiner de plus près le code pour comprendre son fonctionnement.
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 la ligne suivante entre guillemets doubles.
const char* ssid1 = "";
const char* password1 = "";Ensuite, définissez le serveur Web sur le port 80.
WiFiServer server(80);La ligne suivante crée une variable pour stocker les en-têtes de la requête HTTP :
String header;Ensuite, vous créez des variables d'assistance pour stocker l'état actuel de la sortie. Si vous souhaitez ajouter plus de sorties et enregistrer leur état, vous devez créer plus de variables.
String output26State = "off";
String output27State = "off";Vous devez également attribuer un GPIO à chaque sortie. Ici, nous utilisons GPIO 26 et GPIO 27. Vous pouvez utiliser tout autre GPIO approprié.
const int output26 = 26;
const int output27 = 27;installation()
Passons maintenant à setup() .Tout d'abord, nous commençons la communication série à un débit de 115200 bauds pour le débogage.
Serial.begin(115200);Vous pouvez également définir les GPIO en tant que sorties et les définir à un niveau bas.
// 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 démarrent la connexion Wi-Fi WiFi.begin(ssid, password) , attendent une connexion réussie et impriment l'adresse IP ESP dans le moniteur série.
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();boucle()
Dans loop() , nous programmons ce qui se passe lorsqu'un nouveau client établit une connexion avec le serveur Web.
ESP32 écoute toujours les clients entrants via la ligne suivante :
WiFiClient client = server.available(); // Listen for incoming clientsLorsqu'une demande est reçue du client, nous enregistrons les données entrantes. La boucle while suivante s'exécutera tant que le client restera connecté. Nous vous déconseillons de modifier les parties suivantes du code à moins que vous ne sachiez exactement ce que vous faites.
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(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 (currentLine.length() == 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:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();La partie suivante de l'instruction if et else vérifie quel bouton a été enfoncé dans votre page Web et contrôle la sortie en conséquence. Comme nous l'avons vu précédemment, nous envoyons des requêtes à différentes URL en fonction du bouton sur lequel vous avez appuyé.
// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}Par exemple, si vous appuyez sur le bouton GPIO 26 ON, l'ESP32 recevra une demande pour l' URL /26/ON (nous pouvons le voir sur les en-têtes HTTP du Serial Monitor). Nous pouvons donc vérifier si l'en-tête contient l'expression GET /26/on . Si c'est le cas, nous changeons la variable output26State 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.
Afficher les pages HTML
La prochaine chose que vous devez faire est de créer une page Web. L'ESP32 enverra une réponse à votre navigateur avec du code HTML pour créer une page Web.
Envoyez une page Web au client en utilisant cette expression client.println() . Vous devez entrer quelque chose à envoyer au client en tant que paramètre.
La première chose que nous devons envoyer est toujours la ligne suivante, qui montre que nous envoyons du HTML.
<!DOCTYPE HTML><html>Ci-dessous est utilisé pour empêcher les demandes d'icônes. - Vous n'avez pas à vous soucier de cette ligne.
client.println("<link rel=\"icon\" href=\"data:,\">");style web
Ensuite, nous avons du texte CSS pour styliser le bouton et l'apparence de la page. Nous choisissons la police Helvetica, définissons le contenu à afficher sous forme de bloc et l'alignons au centre.
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");Nous stylisons le bouton avec la couleur #4CAF50, pas de bordure, du texte blanc et ce rembourrage : 16px 40px . Nous définissons également text-decoration sur none, définissons la taille de la police, les marges et le curseur comme pointeur.
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");Nous définissons également le style du 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 de fermeture.
client.println(".button2 {background-color: #555555;}</style></head>");Définir le premier titre de la page
Dans la ligne suivante, vous pouvez définir le premier titre de la page. Ici, nous avons " ESP32 Web Server ", mais vous pouvez changer ce texte en ce que vous voulez.
// Web Page Heading
client.println("<h1>ESP32 Web Server</h1>");Boutons d'affichage et états correspondants
Ensuite, vous écrivez un paragraphe pour afficher l'état actuel du GPIO 26 . Comme vous pouvez le voir, nous utilisons la variable output26State afin que l'état soit mis à jour dès que cette variable change.
client.println("<p>GPIO 26 - State " + output26State + "</p>");On affiche alors un bouton on ou off selon l'état actuel du GPIO. Si l'état actuel du GPIO est éteint, nous montrons le bouton ON, sinon, nous montrons le bouton OFF.
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}Nous utilisons le même programme pour GPIO 27 .
fermer la connexion
Enfin, lorsque la réponse est terminée, nous effaçons la variable d'en-tête et arrêtons la connexion au client client.stop() .
// Clear the header variable
header = "";
// Close the connection
client.stop();Résumer
Dans ce tutoriel, nous vous avons montré comment créer un serveur Web à l'aide de l'ESP32. Nous vous avons montré un exemple simple de contrôle de deux LED, mais l'idée est de remplacer ces LED par un relais ou toute autre sortie que vous souhaitez contrôler.