Dans de nombreuses applications IoT, il existe des situations dans lesquelles les données du capteur doivent être surveillées en permanence, et le moyen le plus simple de le faire est d’activer un serveur Web ESP8266 qui dessert une page Web HTML ; mais le problème avec cette méthodologie est que le navigateur Web doit être actualisé à un certain intervalle de temps pour obtenir des données de capteur mises à jour. Ceci est non seulement inefficace, mais nécessite également de nombreux cycles d’horloge pendant lesquels d’autres tâches peuvent être effectuées. La solution à ce problème est connue sous le nom de « JavaScript et XML asynchrones » ou AJAX en abrégé. En utilisant AJAX, nous pouvons surveiller les données en temps réel sans actualiser toute la page Web, ce qui permet non seulement de gagner du temps, mais également de précieux cycles d’horloge. Suivez-nous et dans cet article, vous apprendrez comment mettre en œuvre Serveur Web basé sur AJAX sur ESP8266. Au lieu d’utiliser un ESP8366 si vous utilisez un ESP32, la procédure reste presque la même, vous pouvez consulter l’essai sur le serveur Web ESP32 pour en savoir plus.
Qu’est-ce qu’AJAX ?
Comme nous l’avons discuté plus tôt, AJAX représente « JavaScript et XML asynchrones » qui peut être utilisé pour mettre à jour une partie de la page Web sans recharger la page d’implication. Il le fait en demandant et en recevant spontanément des données du serveur. La fonction d’AJAX est de mettre à jour le contenu Web de manière asynchrone. Cela signifie que le navigateur Web d’un utilisateur n’a pas besoin d’actualiser une page Web entière lorsque seule une partie du contenu de la page doit être mise à jour.
Un exemple quotidien d’AJAX sera la fonctionnalité de suggestion de Google : lorsque nous tapons dans la barre de recherche Google, Google commence à suggérer des chaînes de recherche associées. Au cours de ce processus, la page Web ne se recharge pas, mais les informations qui doivent être modifiées sont mises à jour en arrière-plan à l’aide d’AJAX.
Comment fonctionne AJAX ?
AJAX utilise simplement une combinaison de-
- XML (langage de balisage extensible)
- JavaScript et HTML
- XML (langage de balisage extensible) :
XML est un langage de balisage. XML est principalement utilisé pour recevoir des données de serveur dans un format spécifique. Bien qu’il puisse recevoir des données sous forme de texte brut. Lorsqu’un utilisateur visite une page Web et qu’un événement se produit, dans notre cas, il s’agit d’une « appui sur un bouton », le JavaScript crée un XMLHttpRequête objet, qui transfère ensuite les informations au format XML entre un navigateur Web et un serveur Web. L’objet XMLHttpRequest envoie une demande de données de page mises à jour au serveur Web, le serveur traite la demande, une réponse est créée côté serveur et renvoyée au navigateur, qui utilise ensuite JavaScript pour traiter la réponse et l’afficher sur la page Web.
- Javascript et HTML :
JavaScript effectue le processus de mise à jour dans AJAX. La demande de contenu mis à jour est formatée en XML pour la rendre compréhensible, et JavaScript actualise le contenu pour l’utilisateur qui consulte la page mise à jour.
AJAX fonctionne :
Comme le montre le schéma ci-dessus, pour une requête AJAX, le navigateur envoie un XMLHttpRequête au serveur en utilisant javascript. Cet objet comprend des données qui indiquent au serveur ce qui est demandé. Le serveur répond avec uniquement les données demandées côté client. Ensuite, le navigateur reçoit les données et met à jour uniquement la partie de la page qui doit être mise à jour au lieu de recharger la page Web entière.
Composants requis pour créer le serveur Web basé sur AJAX et ESP8266
Alors que nous construisons le projet pour démontrer la capacité de l’esp8266 à gérer AJAX, les composants requis sont très minimes, vous pouvez en trouver la plupart dans votre magasin de loisirs local.
- NoeudMCU X 1
- Capteur de température LM35 X 1
- LED X 1
- Planche à pain X 1
- Cavaliers X 4
- Câble de programmation X 1
Serveur Web Ajax et ESP8266 – Schéma de circuit
Le schéma de circuit du Serveur Web basé sur AJAX est montré ci-dessous.
Le circuit étant très simple, il n’y a pas grand chose à expliquer. Nous avons connecté une LED avec une résistance de limitation de courant de 150 Ohms à la broche D0 de l’ESP8266, comme vous le verrez, nous pouvons la basculer à l’aide du serveur Web. Ensuite, nous avons notre capteur de température LM35 à travers lequel nous lirons la valeur de température et la mettrons à jour sur la page Web. Le capteur de température est alimenté par le rail 3,3 V, et comme le LM35 est un capteur analogique, nous avons utilisé la broche A0 de la carte ESP8266 pour mesurer les données. si vous rencontrez le capteur de température LM35 pour la première fois, ou si vous souhaitez en savoir plus sur ce petit capteur très cool, vous pouvez consulter notre article précédent sur Thermomètre numérique utilisant NodeMCU et LM35 où nous avons discuté du fonctionnement de ce capteur en détail.
Code de serveur Web basé sur AJAX pour ESP8266
Avant d’aller plus loin, plongeons directement dans le programme pour comprendre comment notre Serveur Web NodeMCU fonctionnera. Mais avant cela, assurez-vous d’avoir la configuration Arduino IDE pour ESP8266. Si vous n’avez pas la configuration, vous pouvez suivre la partie suivante, sinon vous pouvez simplement ignorer cette partie. Si vous souhaitez en savoir plus sur les serveurs Web et les projets basés sur l’IoT, vous pouvez consulter notre article précédent dans lequel nous avons discuté davantage du sujet.
Configurez NodeMCU pour télécharger le code :
Si vous téléchargez le code sur nodeMCU pour la première fois, vous devez d’abord inclure la carte en suivant les étapes suivantes.
Pour télécharger du code sur NodeMCU, suivez les étapes ci-dessous :
1. Ouvrez l’IDE Arduino, puis accédez à Fichier -> Préférences -> Paramètres.
2. Tapez https://arduino.esp8266.com/stable/package_esp8266com_index.json dans le champ ‘URL supplémentaire du gestionnaire de forums‘ et cliquez sur ‘OK’.
3. Allez maintenant à Outils > Tableau > Gestionnaire de tableauxdans la fenêtre Gestionnaire de tableaux. Tapez ESP8266 dans la zone de recherche, sélectionnez la dernière version du tableau et cliquez sur installer.
4. Une fois l’installation terminée, accédez à Outils ->Board -> et sélectionnez NodeMCU 1.0 (Module ESP-12E). Vous pouvez désormais programmer NodeMCU avec l’IDE Arduino.
Une fois la configuration ci-dessus terminée pour la programmation de NodeMCU, le code complet doit être téléchargé sur NodeMCU. Tout d’abord, tous les fichiers de bibliothèque requis doivent être inclus dans le code.
Création d’un fichier d’en-tête pour une page HTML :
Tout d’abord, la page HTML écrite pour afficher la valeur du capteur et les boutons de commande des LED doit être convertie en un fichier d’en-tête (fichier .h), que nous inclurons dans notre code principal. C’est uniquement par souci de commodité. Le code HTML de l’ensemble de la page Web est présenté ci-dessous :
const char webpage[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<style type="text/css">
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<body style="background-color: #f9e79f ">
<center>
<div>
<h1>AJAX BASED ESP8266 WEBSERVER</h1>
<button class="button" onclick="send(1)">LED ON</button>
<button class="button" onclick="send(0)">LED OFF</button><BR>
</div>
<br>
<div><h2>
Temp(C): <span id="adc_val">0</span><br><br>
LED State: <span id="state">NA</span>
</h2>
</div>
<script>
function send(led_sts)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("state").innerHTML = this.responseText;
}
};
xhttp.open("GET", "led_set?state="+led_sts, true);
xhttp.send();
}
setInterval(function()
{
getData();
}, 2000);
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("adc_val").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "adcread", true);
xhttp.send();
}
</script>
</center>
</body>
</html>
)=====";
Tout d’abord, créez un nouveau fichier avec le Bloc-notes et enregistrez-le en tant que Extension .hqui est une représentation d’un fichier d’en-tête C. Nommez le fichier d’en-tête comme « index.h » et copiez les codes ci-dessus et collez-les dans le fichier d’en-tête créé.
La section ci-dessus du code est responsable de la configuration de toutes les parties visuelles et esthétiques de la page Web.
Note: N’oubliez pas de placer le fichier d’en-tête ci-dessus dans le même dossier que le code NodeMCU, car il devra être inclus dans la programmation ultérieurement.
Téléchargement du code vers le module NodeMCU :
Nous commençons par inclure tous les fichiers d’en-tête requis. Nous avons inclus les fichiers d’en-tête « ESP8266WiFi.h », « WiFiClient.h », et « ESP8266WebServer.h » fichiers d’en-tête.
#include <ESP8266WiFi.h> #include <WiFiClient.h> #include <ESP8266WebServer.h>
Ensuite, nous incluons le fichier d’en-tête que nous avons écrit précédemment. N’oubliez pas de sauvegarder le fichier dans le dossier ESP8266 Code. Et c’est défini comme,
#include "index.h"
Actuellement, déclarez les informations d’identification du réseau, c’est-à-dire le SSID et le mot de passe. Il est nécessaire de connecter le NodeMCU à Internet.
const char* ssid = "admin"; const char* password = "12345678";
Ensuite, nous définissons l’objet ESP8266WebServer avec le serveur de noms et le numéro de port par défaut 80.
ESP8266WebServer server(80);
La fonction handleRoot est défini pour gérer la page Web HTML et envoyer la page Web entière au côté client lorsqu’elle est demandée.
void handleRoot()
{
String s = webpage;
server.send(200, "text/html", s);
}
La fonction données_capteur est défini pour lire les données du capteur de température et les envoyer à la page Web après les conversions nécessaires.
void sensor_data()
{
int a = analogRead(A0);
int temp= a/4.35;
String sensor_value = String(temp);
server.send(200, "text/plane", sensor_value);
}
À l’intérieur du led_control fonction, les informations provenant de la page Web sont reçues et comparées pour contrôler l’état de la LED comme indiqué ci-dessous.
void led_control()
{
String state = "OFF";
String act_state = server.arg("state");
if(act_state == "1")
{
digitalWrite(LED,HIGH); //LED ON
state = "ON";
}
else
{
digitalWrite(LED,LOW); //LED OFF
state = "OFF";
}
server.send(200, "text/plane", state);
}
Ensuite, pour connecter NodeMCU à Internet, nous appelons le Fonction WiFi.begin() et transmettez le SSID et le mot de passe du réseau comme arguments. Vérifiez la connexion réseau réussie à l’aide de WiFi.status() et après une connexion réussie, imprimez un message sur le moniteur série avec l’adresse IP de l’appareil connecté.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
Serial.print("Connecting...");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
Ensuite, pour appeler les fonctions définies telles que « handleRoot », « led_control » et « sensor_data » lorsqu’un client demande une URL avec l’index « / », « /led_set » et « /adcread », les blocs de code suivants sont définis.
server.on("/", handleRoot);
server.on("/led_set", led_control);
server.on("/adcread", sensor_data);
server.begin();
Test du serveur Web basé sur AJAX et ESP8266
Une fois le code téléchargé, il est temps de tester le projet. Tout d’abord, assurez-vous que votre hotspot est activé. Vérifiez ensuite les connexions avant de mettre le circuit sous tension. Ensuite, mettez le circuit sous tension. Dans notre cas, nous utilisons un port USB pour alimenter le projet, mais une alimentation externe de 5 V CC peut également être fournie à NodeMCU.
Après avoir mis sous tension, il est temps d’obtenir l’adresse IP du nodeMCU. Cela peut être trouvé en utilisant le moniteur série de l’IDE Arduino. Ouvrez le moniteur série et appuyez une fois sur le bouton Réinitialiser de NodeMCU, l’adresse IP de NodeMCU doit être imprimée sur le moniteur série. Notez l’adresse IP et collez-la dans la barre d’URL de n’importe quel navigateur Web.
Notez que votre appareil doit être connecté au même réseau que celui auquel le Nodemcu est connecté. Après avoir entré l’adresse IP dans votre barre d’adresse, vous devriez obtenir la page Web du projet dans le navigateur. Si vous l’obtenez, vous pouvez désormais surveiller ici les valeurs du capteur et vous pouvez également contrôler l’état de la LED à partir du navigateur.
La page Web étant opérationnelle, cela marque la fin de notre projet, j’espère que vous avez aimé ce projet et appris quelque chose de nouveau, si vous avez des questions concernant cet article, n’hésitez pas à les poser dans la section commentaires ci-dessous.
Retrouvez l’histoire de Raspberry Pi dans cette vidéo :
