Esp32: Communication client/serveur

Chaque machine dispose d'une adresse IP. C'est cette adresse qui permet de se "reconnaître" au sein du réseau wifi.

Pour démarrer un serveur, la carte ESP32 doit d'abord se connecter à un réseau WiFi.

1. Utiliser le 1er bloc "Connecter la station" de la catégorie Réseau. Ce bloc a besoin du nom du réseau et de son mot de passe s'il y en a un.

En réel, si vous souhaitez démarrer le serveur sur la carte en se connectant au même réseau que l'ordinateur, il faut d'abord trouver l'adresse du réseau auquel celui-ci est connecté.

• Sur windows: Dans l'invite de commandes, taper ipconfig pour retrouver les informations de connexion. Un serveur peut alors utiliser une adresse IP de type 192.168.1.X

En simulation, on laisse par défaut l'adresse IP du bloc 192.168.1.10, elle sera l'IP statique de la carte du simulateur. Notez que le mot de passe n'est pas utile ici.

2. Ouvrez le simulateur en cliquant sur le bouton:


3. En ouvrant la console, on vérifie que la station est connectée, et que les adresses sont correctes. Utiliser le bloc "information de la station" qui renvoie les adresses dans un tableau de type [IP de la station, masque du réseau, passerelle, DNS] 



Tout fonctionne ?

En réel, il faut vérifier :

• Le nom du réseau
• Le mot de passe
• une adresse IP valide par rapport à la passerelle du réseau.
• en testant l'adresse du serveur dans un navigateur. 
• que la carte ESP32 et que le dispositif connecté avec le navigateur soit sur le même réseau

Quelques notions sur les réseaux:


A gauche, le client demande une connexion au serveur par le biais d'une requête. Elle peuvent être de type GET/POST, plus de détails sur la différence entre les deux.

A droite, le serveur reçoit la demande du client et renvoie sa réponse.

Passons à la simulation:

Une fois connecté au réseau, le serveur peut démarrer sur la carte. Celui-ci démarre automatiquement en utilisant les blocs de type [Serveur] ...

Pour envoyer une donnée, le serveur attend une demande de connexion d'un client. Un client peut être une autre carte ESP32 ou bien une page web. Dans l'exemple ci-contre, on va montrer l'exemple de la page web dans le simulateur. 




Pour visualiser les données reçues:



1. Ouvrir le simulateur. Dans le champ de  l'url, entrez l'adresse IP du serveur: http://192.168.1.10/



Le dispositif simulé se comporte ici comme un navigateur sur un ordinateur, une tablette ou un smartphone.

2. La flèche permet de rafraîchir la page web, et donc de demander une nouvelle connexion à la carte ESP32 serveur. C'est utile pour visualiser les nouvelles données qu'envoie le serveur. 

Maintenant, passons à une vraie IHM avec un titre et un bouton.

Remarques:

• Si vous souhaitez démarrer un serveur à la même adresse dans une autre interface, pensez à fermer le simulateur du dernier serveur utilisé.

L'interface Homme-Machine permet de piloter des objets connectés à distance comme par exemple un bouton pour piloter une LED. Pour cela le serveur envoie des données contenant une page HTML, des fonctions JS et du style CSS. Pour envoyer une page web aux clients, utiliser le bloc "[Serveur] envoyer la page html" les blocs de la catégorie Réseau / Créer une page web.

Les blocs [html] ... contiennent plusieurs options comme la taille, la couleur, la position, etc



En tapant de nouveau l'adresse IP dans l'url du simulateur, la page renvoyée est la suivante:



En utilisant le bouton de l'IHM, on voit apparaître dans la console les nouvelles requêtes GET reçues du client.




On peut remarquer dans l'en-tête de la requête qu'elle est de la forme: GET /switch_1=1 HTTP/1.1
Le second paramètre /switch_1 correspond à l'ID entré dans le bloc pour le bouton de la page HTML.

Comment récupérer la donnée du client pour piloter une LED ?

Pour récupérer les valeurs des entrées de la page web et contrôler la LED de l'ESP32,

1. Créer une variable appelée etat_LED

2. Initialiser la variable à 0 dans le bloc "Au démarrage"

3. Utiliser les blocs de la catégorie Réseau / Données page web.

4. Ajouter le bloc "[LED]Contrôler la LED"

5. Ne pas oublier de convertir la donnée reçue en int



Remarque:

• Les ID des éléments de la page HTML et la récupération doivent correspondre pour obtenir les valeurs.

Maintenant, on souhaite allumer la LED mais sur une autre carte ESP32 via l'IHM. Cette autre carte va se comporter ici comme un client ayant une autre adresse IP sur le réseau. On a donc dans notre réseau 1 serveur et 2 clients (carte ESP32 + IHM). On définit l'adresse IP du client ESP32 à 192.168.1.100

Comme les données à envoyer sont différentes pour les deux clients. On doit utiliser le bloc "[Serveur] obtenir l'adresse IP du client" pour vérifier quel client se connecte au serveur. La vérification des clients doit se faire selon la méthode suivante: 



Selon l'adresse du client, le serveur envoie les données correspondantes. Si l'IP est 192.168.1.100, on envoie l'état de la LED, sinon on envoie la page HTML.

Cette fois, on garde les données de type chaîne de caractères sur le serveur.

Serveur:


Client:


Dans le programme du client, on doit utiliser seulement les blocs de type [client] ...
Pour vérifier le fonctionnement final, ouvrez le simulateur de l'interface Serveur puis celui de l'interface Client.
Si cela ne fonctionne pas essayez de relancer le simulateur du serveur, puis celui du client.

Masquer les cartes ESP32 dans les simulateur en cliquant sur pour mieux visualiser.

Tout fonctionne ?
N'hésitez pas à nous écrire si vous avez des questions ou des remarques.