Serveur d'impression

Servir HTML et JavaScript – techtutorialsx – Serveur d’impression

Le 14 décembre 2019 - 12 minutes de lecture

L'objectif de cet article est d'expliquer comment servir une page Web HTML avec du JavaScript à partir d'un serveur Web HTTP fonctionnant sur l'ESP32, en utilisant le noyau Arduino. Les tests de ce didacticiel ESP32 ont été effectués à l'aide d'un appareil ESP-WROOM-32 de DFRobot intégré dans une carte FireBeetle ESP32.


introduction

L'objectif de cet article est d'expliquer comment servir une page Web HTML avec du JavaScript à partir d'un serveur Web HTTP fonctionnant sur l'ESP32, en utilisant le noyau Arduino.

Vous pouvez vérifier ici en détail comment installer et démarrer avec la bibliothèque de serveur Web HTTP que nous allons utiliser, qui permet d'exécuter le serveur Web HTTP de manière asynchrone.

En termes de code Arduino, ce sera le même que nous avons couvert dans ce post précédent, qui explique comment servir une page HTML de PROGMEM. Dans ce cas, les modifications du code seront effectuées dans le code HTML, qui aura désormais du JavaScript supplémentaire.

Nous utiliserons l'exemple HTML de cette publication, qui contient un formulaire très simple avec deux champs pour que l'utilisateur saisisse les informations d'identification d'accès à un réseau WiFi, à savoir le nom du réseau et le mot de passe.

Auparavant, lorsque nous cliquions sur le bouton Envoyer, rien ne se passait. Maintenant, nous allons ajouter du JavaScript qui obtiendra les données du formulaire, le convertir en JSON et l'imprimer dans une fenêtre contextuelle.

Les tests de ce didacticiel ESP32 ont été effectués à l'aide d'un appareil ESP-WROOM-32 de DFRobot intégré dans une carte FireBeetle ESP32.


Le code JavaScript

Dans cette section, nous analyserons uniquement le code JavaScript, qui se trouvera dans une balise Script sur le code HTML. Ainsi, nous développerons une fonction à exécuter lors de la soumission du formulaire.

En JavaScript, la syntaxe de déclaration d'une fonction correspond à la une fonction , suivi du nom de la fonction. Après le nom de la fonction, nous spécifions les paramètres entre parenthèses, séparés par des virgules si nous en avons plusieurs.

Notez que comme JavaScript est un langage typé dynamiquement, nous ne spécifions pas le type des arguments (comme nous le faisons en Arduino ou C ++, par exemple) et donc nous avons juste besoin de spécifier leurs noms.

Dans notre cas, nous appellerons notre fonction formToJson et il recevra un argument appelé forme. Cet argument sera un objet représentant notre formulaire, à partir duquel nous collecterons les informations saisies par l'utilisateur.

Le corps de la fonction JavaScript est alors spécifié entre crochets, comme on peut le voir ci-dessous.



fonction formToJson (formulaire) 
// le code de fonction va ici

À l'intérieur de notre fonction, nous récupérerons les valeurs que l'utilisateur a insérées pour le mot de passe et ssid champs en deux variables JavaScript distinctes.

En JavaScript, nous pouvons déclarer une variable en utilisant le var mot-clé suivi du nom de la variable. Ensuite, nous l'affectons avec l'opérateur égal (=).

Nous devrons récupérer les valeurs du forme objet que nous avons défini comme entrée de notre fonction JavaScript.

Nous pouvons accéder à un objet représentant chaque champ de saisie du forme en utilisant leur balise prénom attribut, que nous devons définir dans le HTML contribution balises imbriquées à l'intérieur du forme étiquette. Nous verrons la partie HTML dans la section suivante.

Ainsi, nous supposerons que le champ de saisie HTML du formulaire pour le mot de passe sera nommé "passer"Et le champ de saisie HTML pour le nom du réseau sera"ssid" (de service set identifiant, qui est le terme technique utilisé pour désigner le nom d'un réseau WiFi).

Ainsi, en JavaScript, nous pouvons récupérer ces objets en accédant à notre forme objet comme ceci:



form.pass // Suppose une balise HTML d'entrée avec name = "pass" imbriqué dans la balise HTML form
form.ssid // Suppose une balise HTML d'entrée avec name = "ssid" imbriqué dans la balise de formulaire HTML

Dans les deux cas, nous finissons par accéder à des objets représentant chaque entrée et pour obtenir leur valeur réelle, nous devons accéder à leur valeur , comme indiqué ci-dessous.



var pass = form.pass.value;
var ssid = form.ssid.value;

Maintenant que nous avons récupéré la valeur des deux champs d'entrée, nous voulons les convertir en une chaîne JSON. Bien que dans ce didacticiel, nous imprimerons simplement la chaîne JSON dans une fenêtre d'alerte JavaScript, cela pourrait être utile pour soumettre les données au format JSON au serveur, par exemple.

En JavaScript, nous pouvons facilement sérialiser et désérialiser JSON en utilisant l'objet JSON, que nous pouvons appeler à partir de notre code.

Dans notre cas, nous voulons utiliser sa méthode stringify pour convertir un objet JavaScript composé par le SSID (nom de réseau) précédemment récupéré et passer dans une chaîne.

Nous devons d'abord construire un objet JavaScript à partir de ces variables. En JavaScript, nous pouvons utiliser la notation d'initialisation d'objet pour créer un objet très simplement. Ainsi, nous avons juste besoin de placer des paires de valeurs clés entre crochets, comme on peut le voir ci-dessous.




passer: passer,
ssid: ssid

Notez que dans chaque paire, le nom de la gauche est la clé et le nom de la droite est la valeur. Notre objet aura donc une clé nommée "pass" et une autre nommée "ssid". Les valeurs sont celles de nos variables, qui portent le même nom.

Donc, pour convertir notre objet en chaîne JSON, nous avons juste besoin d'appeler le rigoler méthode du JSON , en passant en entrée notre objet JavaScript, et affectez le résultat à une nouvelle variable.



var jsonFormInfo = JSON.stringify (
passer: passer,
ssid: ssid
);

Pour finaliser, nous appellerons la méthode d'alerte de l'objet window pour créer une fenêtre popup dans le navigateur avec une boîte de dialogue d'alerte, qui sera notre chaîne JSON. Le code final peut être vu ci-dessous, et inclut déjà l'appel à cette fonction, en passant en entrée la chaîne JSON.



fonction formToJson (formulaire) 

var pass = form.pass.value;
var ssid = form.ssid.value;

var jsonFormInfo = JSON.stringify (
passer: passer,
ssid: ssid
);

window.alert (jsonFormInfo);


Notez que notre code est très simple et nous supposons que l'utilisateur remplit toujours les deux champs avant de cliquer sur le bouton soumettre. Naturellement, vous pouvez ajouter une logique supplémentaire pour vérifier si les deux champs ont des valeurs et agir en conséquence.

Pour finaliser cette section, il est important de mentionner que JavaScript s'exécute côté client. Ainsi, le code que nous développons ici s'exécutera sur le navigateur Web du client qui contacte notre serveur et non sur l'ESP32.

Tout comme par curiosité, il existe un moyen de programmer l'ESP32 en utilisant JavaScript (consultez un tutoriel ici), mais c'est complètement différent de ce que nous faisons ici et ne doit pas être confondu.


Le code HTML

Comme mentionné, le code HTML de ce tutoriel sera similaire à celui du post précédent, à la différence que nous aurons maintenant la fonction JavaScript, qui sera exécutée en cliquant sur le bouton soumettre du formulaire.

La première chose que nous devons faire est de saisir la fonction JavaScript précédente et de l'enfermer dans un scénario Balise HTML, nous pouvons donc l'appeler dans le formulaire de soumission d'événement.


Ensuite, dans le forme , nous devons ajouter l'appel de cette fonction sur le onSubmit attribut. Tout d'abord, nous conserverons event.preventDefault , ce qui empêchera le comportement d'envoi par défaut du formulaire.

Ensuite, nous appellerons le formToJson fonction, passant en entrée le mot cette, ce qui signifie essentiellement que nous allons passer en entrée l'objet représentant le formulaire.

...

N'oubliez pas que les deux balises d'entrée que nous utiliserons pour rendre les champs d'entrée pour le nom et le mot de passe du réseau devront avoir leurs attributs de nom correspondant à ceux que nous avons utilisés dans le code JavaScript. Si les noms ne correspondent pas, nous ne pourrons pas récupérer les valeurs.





...

Le code HTML complet final peut être vu ci-dessous.






Préparation du code HTML / JavaScript pour Arduino

Nous devrons servir notre code HTML et JavaScript à partir de l'ESP32, que nous programmerons en C ++ / Arduino. Ainsi, nous devrons le convertir en une représentation que notre microcontrôleur comprend et est capable de travailler.

Le post précédent a un guide détaillé sur la façon de le faire, mais pour résumer, nous allons d'abord compresser le code sur une seule ligne, en nous débarrassant de tous les espaces et lignes vides inutiles (il occupe donc moins d'espace dans l'ESP32), suivi de l'échapper à une chaîne C.

Donc, nous utilisons d'abord cet outil en ligne pour réduire le code entier, puis cet outil pour le convertir en une chaîne C échappée. Vous devez terminer avec la chaîne suivante:



" 
"


Le code Arduino

Veuillez noter que le code Arduino ci-dessous est exactement le même que le tutoriel précédent, à l'exception que la chaîne HTML est différente. Ainsi, nous ne ferons qu'une description rapide du code dans cette section. Veuillez vous référer à l'article précédent si vous avez besoin de plus de détails.

Nous commençons le code Arduino en faisant tout ce que la bibliothèque inclut. Ensuite, nous déclarons deux variables globales pour conserver les informations d'identification du réseau WiFi auquel nous nous connecterons.

Ensuite, nous aurons besoin d'un objet de classe AsyncWebServer, qui sera utilisé ultérieurement pour configurer et exécuter le serveur.

Après cela, nous déclarerons une chaîne dans PROGMEM avec notre page HTML. Ainsi, nous utiliserons le HTML compressé et échappé précédemment obtenu.



#comprendre 
#comprendre 
#comprendre 
#comprendre 

const char * ssid = "yourNetworkName";
const char * password = "yourNetworkPass;

Serveur AsyncWebServer (80);
const char HTML[] PROGMEM = " 
";

Le code restant sera effectué dans la fonction de configuration. Nous allons d'abord ouvrir une connexion série, puis connecter l'ESP32 au réseau WiFi. Après la connexion, nous imprimerons l'IP ESP32 sur le réseau, afin que nous puissions plus tard atteindre le serveur à l'aide d'un navigateur Web.

Ensuite, nous allons configurer un itinéraire dans le "/ html"Path, qui écoutera les requêtes HTTP GET entrantes. Sa fonction de gestion correspondra à retourner la chaîne HTML précédemment déclarée.

Pour finaliser, nous appelons le commencer sur notre objet serveur, donc il commence à écouter les requêtes entrantes. La fonction de boucle Arduino sera laissée vide car le serveur fonctionne de manière asynchrone et donc aucun appel périodique de gestion de client n'a besoin d'être effectué.

Le code source complet peut être vu ci-dessous.



#comprendre 
#comprendre 
#comprendre 
#comprendre 

const char * ssid = "yourNetworkName";
const char * password = "yourNetworkPass;

Serveur AsyncWebServer (80);

const char HTML[] PROGMEM = " 
"; void setup()   Serial.begin (115200);   WiFi.begin (ssid, mot de passe);   while (WiFi.status ()! = WL_CONNECTED)     retard (1000);     Serial.println ("Connexion au WiFi ..");      Serial.println (WiFi.localIP ());   server.on ("/ html", HTTP_GET, [](Demande AsyncWebServerRequest *)     demande-> envoyer (200, "text / html", HTML);   );   server.begin (); boucle vide ()


Test du code

Pour tout tester, compilez et téléchargez d'abord le code Arduino sur l'ESP32. Ensuite, ouvrez le moniteur série pour récupérer l'IP de l'appareil sur le réseau WiFi.

Une fois que vous avez l'IP, ouvrez un navigateur Web de votre choix et collez ce qui suit dans la barre d'adresse, en changeant yourDeviceIP pour l'IP que vous venez de copier depuis le moniteur série.

http: // yourDeviceIP / html

Vous devriez obtenir la page HTML que nous venons d'implémenter, avec les entrées du formulaire et le bouton soumettre. Pour le tester, insérez des valeurs dans les deux champs et cliquez sur le bouton soumettre. Comme indiqué dans la figure 1, vous devriez obtenir une fenêtre d'alerte avec une chaîne JSON contenant les valeurs soumises.

ESP32 Arduino HTTP server HTML et JavaScript.png

Figure 1 – Sortie de la fenêtre d'alerte, après l'envoi du formulaire.


Articles Similaires

Commentaires

Laisser un commentaire

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