Créer un serveur Web ESP8266 NodeMCU simple dans l'IDE Arduino – Bien choisir son serveur d impression
Au cours des dernières années, l'ESP8266 a été une star grandissante parmi les projets liés à l'Internet des objets ou au WiFi. C’est un module WiFi extrêmement économique qui, moyennant un petit effort supplémentaire, peut être programmé pour construire un serveur web autonome. À quel point cela est cool!
Sommaire
Qu'est-ce qu'un serveur Web et comment ça marche?
Le serveur Web est un endroit qui stocke, traite et fournit des pages Web aux clients Web. Le client Web n'est rien d'autre qu'un navigateur Web sur nos ordinateurs portables et nos smartphones. La communication entre le client et le serveur s'effectue à l'aide d'un protocole spécial appelé HTTP (Hypertext Transfer Protocol).
Dans ce protocole, un client initie la communication en faisant une demande pour une page Web spécifique via HTTP et le serveur répond avec le contenu de cette page Web ou un message d'erreur s'il ne peut pas le faire (comme avec la célèbre erreur 404). Les pages fournies par un serveur sont principalement des documents HTML.
ESP8266 Modes de fonctionnement
L’une des fonctionnalités les plus intéressantes de l’ESP8266 est qu’il ne peut pas uniquement se connecter à un réseau WiFi existant et agir en tant que serveur Web, il peut également configurer son propre réseau, ce qui permet aux autres appareils de s'y connecter directement et d'accéder aux pages Web. Cela est possible car l'ESP8266 peut fonctionner dans trois modes différents: mode Station, mode Soft Access Point, et les deux en même temps. Cela offre la possibilité de construire des réseaux maillés.
Mode Station (STA)
L’ESP8266 qui se connecte à un réseau WiFi existant (créé par votre routeur sans fil) est appelé Gare (STA)
En mode STA, l'ESP8266 obtient l'IP du routeur sans fil auquel il est connecté. Avec cette adresse IP, il peut configurer un serveur Web et livrer des pages Web à tous les appareils connectés sous des systèmes existants Réseau WiFi.
Mode point d'accès logiciel (AP)
L’ESP8266 qui crée son propre réseau WiFi et joue le rôle de concentrateur (tout comme un routeur WiFi) pour une ou plusieurs stations est appelé Point d'accès (AP). Contrairement au routeur WiFi, il n’a pas d’interface avec un réseau câblé. Donc, ce mode de fonctionnement s'appelle Point d'accès souple (soft-AP). De plus, le nombre maximal de stations pouvant s'y connecter est limité à cinq.
En mode AP, ESP8266 crée un nouveau réseau Wi-Fi et lui attribue le nom SSID (nom du réseau) et l'adresse IP. Avec cette adresse IP, il peut fournir des pages Web à tous les appareils connectés sous son propre réseau.
Câblage – Connexion des voyants à l'ESP8266 NodeMCU
Maintenant que nous connaissons les bases du fonctionnement du serveur Web et des modes dans lesquels l’ESP8266 peut créer un serveur Web, il est temps de connecter des voyants à l’ESP8266 NodeMCU que nous souhaitons contrôler via WiFi.
Commencez par placer le NodeMCU sur votre planche à pain, en veillant à ce que chaque côté de la carte se trouve sur un côté distinct de la planche à pain. Ensuite, connectez deux voyants numériques GPIO D6 et D7 via une résistance de limitation de courant de 220Ω.
Lorsque vous avez terminé, vous devriez avoir quelque chose qui ressemble à l'illustration ci-dessous.
Concept derrière le contrôle du serveur Web ESP8266
Alors, vous vous demandez peut-être «Comment vais-je contrôler les choses à partir d’un serveur Web qui traite et ne livre que des pages Web?». Vous devez ensuite comprendre ce qui se passe dans l’arrière-plan.
Lorsque vous tapez une URL dans un navigateur Web et appuyez sur ENTRÉE, le navigateur envoie une demande HTTP (demande a.k.a. GET) à un serveur Web. C’est un travail de serveur Web de traiter cette demande en faisant quelque chose. Vous avez peut-être déjà compris que nous allons contrôler certaines choses en accédant à une URL spécifique. Par exemple, supposons que nous ayons entré une URL du type http://192.168.1.1/conduit sur dans un navigateur. Le navigateur envoie ensuite une requête HTTP à l'ESP8266 pour traiter cette requête. Lorsque l'ESP8266 lit cette demande, il sait que l'utilisateur souhaite allumer le voyant. Ainsi, il allume le voyant et envoie une page Web dynamique à un navigateur affichant Statut de la LED: ON Aussi facile que la tarte!
ESP8266 en tant que serveur HTTP utilisant le mode Point d'accès WiFi (AP)
Passons maintenant aux choses intéressantes!
Comme le suggère l'en-tête, cet exemple montre comment transformer l'ESP8266 en point d'accès et servir des pages Web à tout client connecté. Pour commencer, branchez votre ESP8266 NodeMCU sur votre ordinateur et essayez l’esquisse; et ensuite nous allons le disséquer de manière assez détaillée.
#comprendre Contrôle LED n ";
ptr + =" n ";
ptr + =" n ";
ptr + =" n ";
ptr + ="Serveur Web ESP8266
n ";
ptr + ="Utilisation du mode Point d'accès
n ";
si(led1stat)
ptr + ="Statut LED1: allumé
DE n ";
autre
ptr + ="LED1 Statut: OFF
SUR n ";
si(led2stat)
ptr + ="Statut LED2: allumé
DE n ";
autre
ptr + ="LED2 Statut: OFF
SUR n ";
ptr + =" n ";
ptr + =" n ";
revenir ptr;
Accéder au serveur Web en mode AP
Après avoir téléchargé l'esquisse, ouvrez le moniteur série à une vitesse de transmission de 115200 bauds. Appuyez ensuite sur le bouton RESET de l'ESP8266. Si tout va bien, ça va montrer Serveur HTTP démarré message.
Ensuite, recherchez tout périphérique que vous pouvez connecter à un réseau WiFi – téléphone, ordinateur portable, etc. Et recherchez un réseau appelé NodeMCU. Rejoindre le réseau avec mot de passe 123456789.
Après vous être connecté à votre réseau NodeMCU AP, chargez un navigateur et pointez-le sur 192.168.1.1. Le NodeMCU devrait afficher une page Web indiquant l’état actuel des voyants et deux boutons pour les contrôler. Si vous regardez simultanément le moniteur série, vous pouvez voir l’état des broches GPIO de NodeMCU.
Maintenant, cliquez sur le bouton pour allumer LED1 tout en gardant un œil sur l'URL. Une fois que vous avez cliqué sur le bouton, l’ESP8266 reçoit une demande de / led1on URL Il allume ensuite la LED1 et alimente une page Web dont le statut de la LED est mis à jour. Il imprime également l’état de la broche GPIO sur le moniteur série.
Vous pouvez tester le bouton LED2 et vérifier qu’il fonctionne de la même manière.
Examinons maintenant le code de plus près pour voir comment il fonctionne, afin que vous puissiez le modifier pour répondre à vos besoins.
Explication détaillée du code
L'esquisse commence par inclure la bibliothèque ESP8266WiFi.h. Cette bibliothèque fournit les méthodes WiFi spécifiques à ESP8266 que nous appelons pour se connecter au réseau. Ensuite, nous incluons également la bibliothèque ESP8266WebServer.h, qui propose certaines méthodes qui nous aideront à configurer un serveur et à gérer les demandes HTTP entrantes sans avoir à s’inquiéter des détails de mise en œuvre de bas niveau.
#comprendre Comme nous configurons l’ESP8266 NodeMCU en mode Point d’accès, un réseau WiFi sera créé. Par conséquent, nous devons définir son SSID, son mot de passe, son adresse IP, son masque de sous-réseau IP et sa passerelle IP.
const carboniser* ssid = "NodeMCU";
const carboniser* mot de passe = "12345678";
Adresse IP local_ip(192,168,1,1)
Adresse IP passerelle(192,168,1,1)
Adresse IP sous-réseau(255,255,255,0)Ensuite, nous déclarons un objet de la bibliothèque ESP8266WebServer afin de pouvoir accéder à ses fonctions. Le constructeur de cet objet prend le port (où le serveur écoutera) en tant que paramètre. Comme 80 est le port par défaut pour HTTP, nous utiliserons cette valeur. Vous pouvez maintenant accéder au serveur sans avoir besoin de spécifier le port dans l'URL.
ESP8266WebServer serveur(80)Ensuite, nous déclarons les broches GPIO de NodeMCU auxquelles les voyants sont connectés et leur état initial.
uint8_t LED1pin = D7;
bool LED1status = LOW;
uint8_t LED2pin = D6;
bool LED2status = LOW;Dans la fonction Setup ()
Nous configurons notre serveur HTTP avant de l'exécuter. Tout d'abord, nous ouvrons une connexion série à des fins de débogage et définissons les ports GPIO sur OUTPUT.
En série.commencer(115200)
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);Ensuite, nous avons configuré un point d'accès logiciel pour établir un réseau Wi-Fi en prouvant le SSID, le mot de passe, l'adresse IP, le masque de sous-réseau IP et la passerelle IP.
Wifi.softAP(ssid, mot de passe);
Wifi.softAPConfig(local_ip, passerelle, sous-réseau);
retard(100)Afin de gérer les requêtes HTTP entrantes, nous devons spécifier le code à exécuter lorsqu'une URL particulière est atteinte. Pour ce faire, nous utilisons la méthode. Cette méthode prend deux paramètres. Le premier est un chemin d'URL et le second est le nom de la fonction que nous voulons exécuter lorsque cette URL est atteinte.
Par exemple, la première ligne de l'extrait de code ci-dessous indique que lorsqu'un serveur reçoit une requête HTTP à la racine (/) chemin, il déclenchera le handle_OnConnect () une fonction. Notez que l'URL spécifiée est un chemin relatif.
De même, nous devons spécifier 4 URL supplémentaires pour gérer deux états de 2 LED.
serveur.sur("/", handle_OnConnect);
serveur.sur("/ led1on", handle_led1on);
serveur.sur("/ led1off", handle_led1off);
serveur.sur("/ led2on", handle_led2on);
serveur.sur("/ led2off", handle_led2off);Nous n'avons pas spécifié ce que le serveur devrait faire si le client demande une URL autre que celle spécifiée avec server.on () . Il devrait répondre avec un statut HTTP 404 (non trouvé) et un message pour l'utilisateur. Nous mettons cela dans une fonction aussi, et utilisons server.onNotFound () pour lui dire qu'il doit l'exécuter lorsqu'il reçoit une demande pour un URI non spécifié avec server.on
serveur.onNotFound(handle_NotFound);Maintenant, pour démarrer notre serveur, nous appelons la méthode begin sur l’objet serveur.
serveur.commencer();
En série.imprimer("Le serveur HTTP a commencé")Boucle intérieure ()
Pour gérer les requêtes HTTP entrantes réelles, nous devons appeler le handleClient () méthode sur l'objet serveur. Nous changeons également l'état de la LED selon la demande.
vide boucle()
serveur.handleClient();
si(LED1status)
digitalWrite(LED1pin, HIGH);
autre
digitalWrite(LED1pin, BAS);
si(LED2status)
digitalWrite(LED2pin, HAUT);
autre
digitalWrite(LED2pin, BAS);
Ensuite, nous devons créer une fonction que nous avons attachée à l’URL racine (/) avec server.on. Rappelles toi? Au début de cette fonction, nous définissons l’état des deux voyants sur LOW (état initial des voyants) et l’imprimons sur un moniteur série. Afin de répondre à la requête HTTP, nous utilisons la méthode send. Bien que la méthode puisse être appelée avec un jeu d'arguments différent, sa forme la plus simple consiste en le code de réponse HTTP, le type de contenu et le contenu.
Dans notre cas, nous envoyons le code 200 (un des codes d’état HTTP), qui correspond à la D'accord réponse. Ensuite, nous spécifions le type de contenu comme "text / html", et finalement nous appelons SendHTML () fonction personnalisée qui crée une page HTML dynamique contenant l’état des voyants.
vide handle_OnConnect()
LED1status = LOW;
LED2status = LOW;
En série.imprimer("Statut GPIO7: OFF De même, nous devons créer quatre fonctions pour gérer les demandes de LED On / Off et la page 404 Error.
vide handle_led1on()
LED1status = HIGH;
En série.imprimer("Statut GPIO7: ON")
serveur.envoyer(200, "text / html", SendHTML(true, LED2status));
vide handle_led1off()
LED1status = LOW;
En série.imprimer("Statut GPIO7: OFF")
serveur.envoyer(200, "text / html", SendHTML(false, LED2status));
vide handle_led2on()
LED2status = HIGH;
En série.imprimer("Statut GPIO6: ON")
serveur.envoyer(200, "text / html", SendHTML(LED1status, true));
vide handle_led2off()
LED2status = LOW;
En série.imprimer("Statut GPIO6: OFF")
serveur.envoyer(200, "text / html", SendHTML(LED1status, false));
vide handle_NotFound()
serveur.envoyer(404, "texte simple", "Pas trouvé")
Affichage de la page Web HTML
SendHTML () Cette fonction est chargée de générer une page Web chaque fois que le serveur Web ESP8266 reçoit une demande d’un client Web. Il concatène simplement le code HTML dans une grosse chaîne et retourne à la server.send () fonction nous avons discuté plus tôt. La fonction prend le statut des voyants en tant que paramètre pour générer dynamiquement le contenu HTML.
Le premier texte que vous devriez toujours envoyer est le déclaration qui indique que nous envoyons du code HTML.
Chaîne SendHTML(uint8_t led1stat, uint8_t led2stat) {
String ptr = " n ";Ensuite, le L'élément viewport rend la page Web réactive dans n'importe quel navigateur Web. Alors que title tag définit le titre de la page.
ptr + =" n ";
ptr + ="Contrôle LED n ";Styliser la page Web
Ensuite, nous avons du style CSS pour styliser les boutons et l’apparence de la page Web. Nous choisissons la police Helvetica, définissons le contenu à afficher en tant que bloc en ligne et aligné au centre.
ptr + =" n ";
ptr + =" n ";
ptr + =" n ";
ptr + ="Serveur Web ESP8266
n ";
ptr + ="Utilisation du mode station (STA)
n ";
si(led1stat)
ptr + ="Statut LED1: allumé
DE n ";
autre
ptr + ="LED1 Statut: OFF
SUR n ";
si(led2stat)
ptr + ="Statut LED2: allumé
DE n ";
autre
ptr + ="LED2 Statut: OFF
SUR n ";
ptr + =" n ";
ptr + =" n ";
revenir ptr;
Accéder au serveur Web en mode STA
Après avoir téléchargé l'esquisse, ouvrez le moniteur série à une vitesse de transmission de 115200 bauds. Appuyez ensuite sur le bouton RESET de l'ESP8266. Si tout va bien, l’adresse IP dynamique obtenue à partir de votre routeur sera affichée. Serveur HTTP démarré message.
Ensuite, chargez un navigateur et pointez-le sur l'adresse IP indiquée sur le moniteur série. Le NodeMCU devrait afficher une page Web indiquant l’état actuel des voyants et deux boutons pour les contrôler. Si vous regardez simultanément le moniteur série, vous pouvez voir l’état des broches GPIO de NodeMCU.
Maintenant, cliquez sur le bouton pour allumer LED1 tout en gardant un œil sur l'URL. Une fois que vous avez cliqué sur le bouton, l’ESP8266 reçoit une demande de / led1on URL Il allume ensuite la LED1 et alimente une page Web dont le statut de la LED est mis à jour. Il imprime également l’état de la broche GPIO sur le moniteur série.
Vous pouvez tester le bouton LED2 et vérifier qu’il fonctionne de la même manière.
Explication du code
Si vous observez ce code avec le code précédent, la seule différence est que nous ne définissons pas le point d'accès logiciel, mais que nous rejoignons un réseau existant à l'aide de WiFi.begin () une fonction.
Wifi.commencer(ssid, mot de passe);Bien que l’ESP8266 tente de se connecter au réseau, nous pouvons vérifier l’état de la connectivité avec État WiFi () une fonction
tandis que (Wifi.statut()! = WL_CONNECTED)
retard(1000)
En série.impression(".")
Juste pour votre information, cette fonction renvoie les états suivants:
- WL_CONNECTED: attribué lors de la connexion à un réseau Wi-Fi
- WL_NO_SHIELD: attribué quand aucun bouclier Wi-Fi n'est présent
- WL_IDLE_STATUS: un statut temporaire attribué lors de l'appel de WiFi.Begin () et reste actif jusqu'à l'expiration du nombre de tentatives (entraînant WL_CONNECT_FAILED) ou jusqu'à ce qu'une connexion soit établie (entraînant WL_CONNECTED)
- WL_NO_SSID_AVAIL: assigné quand aucun SSID n'est disponible
- WL_SCAN_COMPLETED: assigné à la fin de l'analyse des réseaux
- WL_CONNECT_FAILED: assigné quand la connexion échoue pour toutes les tentatives
- WL_CONNECTION_LOST: assigné quand la connexion est perdue
- WL_DISCONNECTED: assigné quand déconnecté d'un réseau
Une fois que l’ESP8266 est connecté au réseau, l’esquisse imprime l’adresse IP attribuée à l’ESP8266 en affichant WiFi.localIP () valeur sur le moniteur série.
En série.imprimer("")
En série.imprimer("WiFi connecté ..!")
En série.impression("Vous avez une adresse IP:") En série.imprimer(Wifi.localIP());La seule différence entre les modes AP et STA est que l'un crée le réseau et l'autre se joint au réseau existant. Ainsi, le reste du code permettant de gérer les demandes HTTP et de servir une page Web en mode STA est identique à celui du mode AP expliqué ci-dessus. Ceci comprend:
- Déclaration des broches GPIO de NodeMCU auxquelles des voyants sont connectés
- Définir plusieurs méthodes server.on () pour gérer les requêtes HTTP entrantes
- Définition de la méthode server.onNotFound () pour gérer l'erreur HTTP 404
- Création de fonctions personnalisées exécutées lorsque des URL spécifiques sont touchées
- Création de page HTML
- Styliser la page Web
- Création de boutons et affichage de leur statut
Commentaires
Le 11 mai 2021 à 17 h 49 min, Vins' a dit :
Autant les explications sont bien mais les parties du code sont... NULLES !!! Bref au final cette page est inutile, dommage.
Laisser un commentaire