Serveur d'impression

Créer un serveur Web NodeMCU ESP8266 simple dans Arduino IDE – Serveur d’impression

Le 14 décembre 2019 - 16 minutes de lecture

Ce guide vous apprend à créer un simple serveur Web ESP8266 NodeMCU dans Arduino IDE. Vous apprendrez à contrôler les broches GPIO de ESP8266 NodeMCU à partir d'un serveur Web de base. Vous apprendrez également à créer un serveur Web protégé par mot de passe avec la carte NodeMCU basée sur ESP8266. Cependant, vous pouvez utiliser ce didacticiel pour tout type de carte ESP8266 comme ESP01, ESP12 etc.

Nous passons des cartes de développement Arduino traditionnelles aux nouvelles cartes de développement ESP8266 comme les cartes de développement NodeMCU et Wemos D1. La raison de ce changement est de communiquer et de contrôler à distance la carte de développement à partir d'Internet en créer un simple serveur web. Oui, c'est vrai que nous pouvons communiquer et contrôler les cartes Arduino via des modules externes d'interface tels que Bluetooth RF et IR, mais il existe de nombreuses limitations pratiques et ces techniques ne sont pas très efficaces en comparaison avec les modules ayant à bord des modules WiFi comme ESP8266 NodeMCU.

Il existe différentes façons de communiquer les cartes de développement ESP8266 comme l'application Android via WiFi, le serveur Web via WiFi et la communication série avec PC via le câble. Dans ce didacticiel, vous apprendrez à créer un serveur Web pour contrôler les GPIO de la carte de développement via des boutons sur le serveur Web et à protéger votre serveur Web avec un mot de passe contre tout accès utilisateur non autorisé. Nous pouvons accéder à notre serveur Web à partir du smartphone, de la tablette, de l'ordinateur portable et de l'ordinateur personnel de bureau.

Avant de commencer cette lecture, nous vous recommandons de lire ces guides de mise en route:

Contrôle des voyants avec ESP8266 Web Server NodeMCU

En contrôlant les GPIO des cartes de développement via un serveur Web, nous pouvons connecter des LED, des relais, des servomoteurs, etc. Mais dans ce tutoriel, nous allons créer des serveurs Web avec quatre boutons pour contrôler les LED et mettre à jour l'état des LED sur le serveur Web.Serveur Web ESP8266 NodeMCU dans Arduino IDE

Composants requis

  • Carte de développement ESP8266 (NodeMCU ou Wemos D1 Mini)
  • LED
  • Résistances (100 ohms)
  • Fils de cavalier
  • Planche à pain
  • Câble micro USB
  • Téléphone intelligent
  • Arduino IDE

Circuit du serveur Web ESP8266 NodeMCU

À des fins de démonstration pratique, nous contrôlons via des LED via un serveur Web. Le schéma de connexion de cette fonctionnalité est illustré ci-dessous.

Nous avons besoin de quatre LED avec résistances appropriées, NodeMCU, planche à pain et fils de connexion. Une borne de résistances est connectée à la cathode de chaque LED et l'autre borne connectée à la broche de terre. Anodes des LED connectées aux broches D1 à D4 du NodeMCU respectivement.Circuit du serveur Web ESP8266 NodeMCU

Rédaction d'un croquis pour le serveur Web ESP8266

Tout d'abord, nous devons inclure la bibliothèque ESP8266WiFi afin que nous puissions utiliser la fonction intégrée pour se connecter au WiFi. Ensuite, nous devons écrire les informations d'identification du réseau qui incluent le nom et le mot de passe. Assurez-vous d'écrire correctement vos informations d'identification réseau, sinon vous ne pourrez pas vous connecter au réseau. Après cela, nous devons décrire le numéro de port du serveur, dans ce cas, j'écris 443, qui est le protocole HTTPS (Secure Hyper Text Transfer Protocol). Nous pouvons également utiliser le numéro de port différent comme 80 qui n'est pas sûr à utiliser.

#comprendre  // Bibliothèque Arduino ESP8266 avec fonctions intégrées
#define ssid "StormFiber" // Remplacez par le nom de votre réseau
#define password "23456789" // Remplacez par votre mot de passe réseau
Serveur WiFiServer (443); // Serveur Web sur le port 443

Déclarez une variable nommée en-tête pour stocker la réponse de la demande. Déclarez également quatre noms de variable comme state1, state2.state et state4 avec le type de données de chaîne et affectez-leur une chaîne qui est «OFF» qui décrit l'état par défaut des voyants. Ensuite, nous déclarons quatre autres variables comme LED1, LED2, LED3 et LED4 avec un type de données entier et leur attribuons les GPIO que nous voulons utiliser.

En-tête de chaîne;
String state1 = "Off";
String state2 = "Off";
String state3 = "Off";
String state4 = "Off";
int LED1 = 5;
int LED2 = 4;
int LED3 = 0;
int LED4 = 2;

Dans la fonction de configuration du vide, nous initialisons tout d'abord la communication série avec un débit de 115200 bauds. Il est recommandé de toujours utiliser le débit de 115200 bauds. Décrivez le statut des broches comme SORTIE et laissez initialement les LED éteintes en définissant les broches comme FAIBLES.

void setup () {// ne s'exécute qu'une seule fois

Serial.begin (115200); // Initialisation du port série

pinMode (LED1, SORTIE);
pinMode (LED2, SORTIE);
pinMode (LED3, SORTIE);
pinMode (LED4, SORTIE);
digitalWrite (LED1, LOW);
digitalWrite (LED2, LOW);
digitalWrite (LED3, LOW);
digitalWrite (LED4, LOW);

L'extrait de croquis suivant explique comment commencer la connexion WiFi avec les informations d'identification réseau données et imprimer le message de connexion réussie sur le moniteur série.

    Serial.println ();
Serial.print ("Connexion à");
Serial.println (ssid);
WiFi.begin (ssid, mot de passe); // Connexion au réseau WiFi
while (WiFi.status ()! = WL_CONNECTED)

retard (500);
Serial.print (".");

Serial.println ("");
Serial.println ("WiFi connecté");

Les instructions ci-dessous affichent le message «Serveur Web lancé et en attente d'ESP IP» sur le moniteur série et après un délai de dix secondes, affiche l'adresse IP sur le moniteur série afin que nous puissions ouvrir votre serveur Web à l'aide du navigateur Web.

server.begin (); // Démarrage du serveur Web
Serial.println ("Web server Initiated. Waiting for the ESP IP ...");
retard (10000);

Serial.println (WiFi.localIP ()); // Impression de l'adresse IP ESP

La fonction de boucle vide commence par la recherche d'un nouveau client lorsqu'un nouveau client se connecte, il démarre la connexion. Comme il s'agit d'une fonction de boucle vide, cela signifie qu'elle recherche toujours de nouveaux clients.

boucle vide () {
// Recherche de nouveaux clients
Client WiFiClient = server.available ();

Dans l'extrait d'esquisse suivant, blank_line, qui est une variable booléenne, fournit les informations à la fin de la demande HTTP. La boucle while s'exécute tant que le client reste connecté.

si (client) {
Serial.println ("Nouveau client");
boolean blank_line = true; // booléen pour localiser la fin de la requête http
while (client.connected ()) {
if (client.available ()) 
char c = client.read ();
en-tête + = c;

if (c == ' n' && blank_line) 
Serial.print (en-tête);

Pour protéger votre serveur Web de l'utilisateur non autorisé, nous devons ajouter une sorte de fonctionnalités de sécurité. L'extrait d'esquisse ci-dessous est utilisé pour ajouter la protection du nom d'utilisateur et du mot de passe à l'esquisse. Chaque fois qu'un utilisateur non autorisé ou entrant des informations d'identification erronées, le message «Échec de l'authentification» s'affichera sur le navigateur Web. Si vous utilisez ce croquis tel quel, le nom d'utilisateur est "Admin"Et le mot de passe est"12345678”Le nom d'utilisateur et le mot de passe convertis au format base64 et utilisés dans l'esquisse. Si tout se déroule conformément au plan, vous ouvrirez avec succès le serveur Web.

// Recherche de la bonne chaîne d'informations d'identification
if (header.indexOf ("VXNlcjoxMjM0")> = 0) //
//Connexion réussie
client.println ("HTTP / 1.1 200 OK");
client.println ("Content-Type: text / html");
client.println ("Connexion: fermer");
client.println ();

Si tout se déroule conformément au plan, vous ouvrirez avec succès le serveur Web.

if (header.indexOf ("GET / HTTP / 1.1")> = 0) 
Serial.println ("Page Web principale");

L'extrait d'esquisse suivant vérifie sur quel bouton du serveur Web vous appuyez et quelle opération doit être effectuée sur quel GPIO.

sinon if (header.indexOf ("GET / LED1on HTTP / 1.1")> = 0) 
Serial.println ("GPIO 5 On");
state1 = "On";
digitalWrite (LED1, HIGH);

sinon si (header.indexOf ("GET / LED1off HTTP / 1.1")> = 0) 
Serial.println ("GPIO 5 désactivé");
state1 = "Off";
digitalWrite (LED1, LOW);

sinon si (header.indexOf ("GET / LED2on HTTP / 1.1")> = 0) 
Serial.println ("GPIO 4 On");
state2 = "On";
digitalWrite (LED2, HIGH);

sinon si (header.indexOf ("GET / LED2off HTTP / 1.1")> = 0) 
Serial.println ("GPIO 4 désactivé");
state2 = "Off";
digitalWrite (LED2, LOW);

sinon si (header.indexOf ("GET / LED3on HTTP / 1.1")> = 0) 
Serial.println ("GPIO 0 On");
state3 = "On";
digitalWrite (LED3, HIGH);

sinon si (header.indexOf ("GET / LED3off HTTP / 1.1")> = 0) 
Serial.println ("GPIO 0 Off");
state3 = "Off";
digitalWrite (LED3, LOW);

sinon si (header.indexOf ("GET / LED4on HTTP / 1.1")> = 0) 
Serial.println ("GPIO 2 On");
state4 = "On";
digitalWrite (LED4, HIGH);

sinon si (header.indexOf ("GET / LED4off HTTP / 1.1")> = 0) 
Serial.println ("GPIO 2 désactivé");
state4 = "Off";
digitalWrite (LED4, LOW);

La fonction Client.println () est utilisée pour envoyer une page Web au client. Bootstrap Framework est utilisé pour cette page Web de base. Cette page Web a un total de huit boutons, deux pour chaque LED pour le fonctionnement «ON» et «OFF».

    client.println ("");
client.println ("");
client.println ("");
client.println ("");
client.println ("");

L'extrait de code suivant comprend deux en-têtes dans la page Web qui sont MicrocontrollersLab et Web server et ont respectivement la taille de police h1 et h2.

client.println ("

MicrocontrollersLab

"); client.println ("

Serveur Web

");

L'ensemble d'instructions ci-dessous comprend l'étiquette de la LED et son état et crée deux boutons l'un pour allumer et l'autre pour éteindre avec respectivement les couleurs primaires et info. De même, nous modifions les variables LED pour créer autant de boutons que nécessaire.

client.println ("

LED 1: Etat: "+ état1); client.println ("
"); client.println (""); client.println (""); client.println ("
"); client.println ("

LED 2: état: "+ état2); client.println ("
"); client.println (""); client.println (""); client.println ("
"); client.println ("

LED 3: état: "+ état3); client.println ("
"); client.println (""); client.println (""); client.println ("
"); client.println ("

LED 4: état: "+ état4); client.println ("
"); client.println (""); client.println (""); client.println ("

");

Lorsqu'un utilisateur non autorisé souhaite accéder ou que les informations d'identification saisies sont erronées, le message «Échec de l'authentification» s'affiche dans le navigateur. Les instructions de fin suivantes de l'esquisse incluent le vidage de la variable d'en-tête, la fermeture de la boucle et la fin de la connexion.

    else // La requête Http échoue pour les utilisateurs non autorisés
client.println ("HTTP / 1.1 401 non autorisé");
client.println ("WWW-Authenticate: Basic realm = " Secure  "");
client.println ("Content-Type: text / html");
client.println ();
client.println ("Authentification échouée");

header = "";
Pause;

if (c == ' n') // commence la lecture d'une nouvelle ligne
blank_line = true;

sinon si (c! = ' r') // trouve un caractère sur la ligne courante
blank_line = false;


Encodage du nom d'utilisateur et du mot de passe au format Base64

Pour coder le nom d'utilisateur et le mot de passe, nous pouvons utiliser des convertisseurs en ligne. Ce qui suit est une liste pour le convertisseur de format base64 en ligne.

Cliquez sur n'importe quelle URL ci-dessus, cliquez sur l'option de codage et écrivez le nom d'utilisateur et le mot de passe que vous souhaitez coder en écrivant deux-points (:) entre eux comme indiqué dans l'image ci-dessous. Après la conversion en cliquant sur ENCODE, copiez les informations encodées et collez-les dans l'esquisse.

Code ESP8266 Serveur Web NodeMCU

Maintenant, copiez ce code dans votre IDE Arduino et téléchargez ce code sur NodeMCU ou n'importe quelle carte ESP8266.

#comprendre  // Bibliothèque Arduino ESP8266 avec fonctions intégrées

#define ssid "StormFiber" // Remplacez par le nom de votre réseau
#define password "23456789" // Remplacez par votre mot de passe réseau

Serveur WiFiServer (443); // Serveur Web sur le port 443

En-tête de chaîne;
String state1 = "Off";
String state2 = "Off";
String state3 = "Off";
String state4 = "Off";
int LED1 = 5;
int LED2 = 4;
int LED3 = 0;
int LED4 = 2;

void setup () // ne s'exécute qu'une seule fois

Serial.begin (115200); // Initialisation du port série

pinMode (LED1, SORTIE);
pinMode (LED2, SORTIE);
pinMode (LED3, SORTIE);
pinMode (LED4, SORTIE);
digitalWrite (LED1, LOW);
digitalWrite (LED2, LOW);
digitalWrite (LED3, LOW);
digitalWrite (LED4, LOW);

Serial.println ();
Serial.print ("Connexion à");
Serial.println (ssid);
WiFi.begin (ssid, mot de passe); // Connexion au réseau WiFi
while (WiFi.status ()! = WL_CONNECTED)

retard (500);
Serial.print (".");

Serial.println ("");
Serial.println ("WiFi connecté");

server.begin (); // Démarrage du serveur Web
Serial.println ("Web server Initiated. Waiting for the ESP IP ...");
retard (10000);

Serial.println (WiFi.localIP ()); // Impression de l'adresse IP ESP


// court encore et encore
boucle vide () {
// Recherche de nouveaux clients
Client WiFiClient = server.available ();

si (client) {
Serial.println ("Nouveau client");
boolean blank_line = true; // booléen pour localiser la fin de la requête http
while (client.connected ()) {
if (client.available ()) 
char c = client.read ();
en-tête + = c;

if (c == ' n' && blank_line) 
Serial.print (en-tête);

// Recherche de la bonne chaîne d'informations d'identification
if (header.indexOf ("VXNlcjoxMjM0")> = 0) //
//Connexion réussie
client.println ("HTTP / 1.1 200 OK");
client.println ("Content-Type: text / html");
client.println ("Connexion: fermer");
client.println ();
// allume et éteint la LED
if (header.indexOf ("GET / HTTP / 1.1")> = 0) 
Serial.println ("Page Web principale");

sinon if (header.indexOf ("GET / LED1on HTTP / 1.1")> = 0) 
Serial.println ("GPIO 5 On");
state1 = "On";
digitalWrite (LED1, HIGH);

sinon si (header.indexOf ("GET / LED1off HTTP / 1.1")> = 0) 
Serial.println ("GPIO 5 désactivé");
state1 = "Off";
digitalWrite (LED1, LOW);

sinon si (header.indexOf ("GET / LED2on HTTP / 1.1")> = 0) 
Serial.println ("GPIO 4 On");
state2 = "On";
digitalWrite (LED2, HIGH);

sinon si (header.indexOf ("GET / LED2off HTTP / 1.1")> = 0) 
Serial.println ("GPIO 4 désactivé");
state2 = "Off";
digitalWrite (LED2, LOW);

sinon si (header.indexOf ("GET / LED3on HTTP / 1.1")> = 0) 
Serial.println ("GPIO 0 On");
state3 = "On";
digitalWrite (LED3, HIGH);

sinon si (header.indexOf ("GET / LED3off HTTP / 1.1")> = 0) 
Serial.println ("GPIO 0 Off");
state3 = "Off";
digitalWrite (LED3, LOW);

sinon si (header.indexOf ("GET / LED4on HTTP / 1.1")> = 0) 
Serial.println ("GPIO 2 On");
state4 = "On";
digitalWrite (LED4, HIGH);

sinon si (header.indexOf ("GET / LED4off HTTP / 1.1")> = 0) 
Serial.println ("GPIO 2 désactivé");
state4 = "Off";
digitalWrite (LED4, LOW);

// Page Web
client.println ("");
client.println ("");
client.println ("");
client.println ("");
client.println ("");
client.println ("
"); client.println ("

MicrocontrollersLab

"); client.println ("

Serveur Web

"); client.println ("

LED 1: Etat: "+ état1); client.println ("
"); client.println (""); client.println (""); client.println ("
"); client.println ("

LED 2: état: "+ état2); client.println ("
"); client.println (""); client.println (""); client.println ("
"); client.println ("

LED 3: état: "+ état3); client.println ("
"); client.println (""); client.println (""); client.println ("
"); client.println ("

LED 4: état: "+ état4); client.println ("
"); client.println (""); client.println (""); client.println ("

"); else // La requête Http échoue pour les utilisateurs non autorisés client.println ("HTTP / 1.1 401 non autorisé"); client.println ("WWW-Authenticate: Basic realm = " Secure ""); client.println ("Content-Type: text / html"); client.println (); client.println ("Authentification échouée"); header = ""; Pause; if (c == ' n') // commence la lecture d'une nouvelle ligne blank_line = true; sinon si (c! = ' r') // trouve un caractère sur la ligne courante blank_line = false; } retard (1); client.stop (); // fin de la connexion client Serial.println ("Client déconnecté."); } }

Comment ouvrir un serveur Web basé sur NodeMCU

  • Après avoir téléchargé le code, ouvrez le moniteur série et attendez que NodeMCU soit connecté au réseau WiFi, le serveur Web a lancé et affiche l'adresse IP comme indiqué ci-dessous. Si vous rencontrez un problème pour obtenir l'adresse IP, appuyez simplement sur le bouton de réinitialisation du NodeMCU.

  • Notez l'adresse IP et ouvrez votre navigateur Web sur PC et écrivez l'adresse IP sur l'onglet de recherche d'URL suivi d'un deux-points (:) numéro de port du serveur, dans ce cas, 192.168.18.45:443. Si vous avez entré l'adresse IP et le port de serveur corrects, une fenêtre vous demandera le nom d'utilisateur et le mot de passe, comme indiqué sur l'image.

  • Si vous avez entré les bons identifiants, vous aurez accès à la page Web principale. Vous pouvez cliquer sur le bouton souhaité pour effectuer l'opération.

Page Web ESP8266 dans l'IDE Arduino

  • Pour ouvrir le serveur Web à l'aide d'un smartphone, ouvrez votre navigateur sur le smartphone, écrivez l'adresse IP indiquée sur le moniteur série et l'adresse IP suivie de deux points (:) et le numéro de port du serveur dans mon cas 192.168.18.45:443

  • Si vous avez entré les bons identifiants, vous aurez accès à la page Web principale. Vous pouvez cliquer sur le bouton souhaité pour effectuer l'opération.

C'est ainsi que vous pouvez créer un serveur Web en utilisant une carte Simple ESP8266 comme NodeMCU et Arduino IDE.

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.