Actualiser une page à la reception d'une requête

**dje8269** · 20/06/2021, 22h46

Bonjour à tous,

Avant toute chose,excusez ma mauvaise compréhension car je suis électronicien à la base . Pour un petit projet sans prétention en domotique je me suis lancé dans le web.

Pour ce faire le contexte est le suivant. Je possède un esp32 qui réagit en fonction des données qu'il lit sur un serveur web en envoyant une requête GET.

J'ai un serveur web qui contient : ma page web , un fichier css et un fichier "base" qui contient mes données a transmettre d'un client a l'autre

Pour le moment je m'entraine à allumer une simple LED mais qui se pilote des deux cotés. Soit coté ESP32 avec un bouton poussoir ou soit coté web avec un bouton HTML.

Ok le tableau est à peu prêt dressé !

Donc je bloque sur le point suivant. J'aimerais savoir si c'est possible qu'en recevant une requête avec un argument , une page web peut s’actualiser.

En fait quand j'allume ma LED en local (avec le BP), cela envoi une requête avec un argument à ma page web qu ieecrit sur mon fichier "base". Si ma page web est ouverte, j’aimerais qu'on voit l'état de la led passé de OFF à ON ?

Bon je pense qu'il faut du javascript, mais je n'arrive a exécuter une fonction javascript quand je reçois un argument.

Voici mon code à l'heure actuel, "avec des tests en javascript"

si jamais vous voyez des erreurs ou des améliorations n'hésitez pas à m'en faite part !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
		<link href="style.css" rel="stylesheet" media="screen" type="text/css"> 
		<title>Commande LED</title>
    </head>
 
    <body>
 
		<h1 id="titre" >Mon serveur Web</h1>		
 
		<p id="mySelect" onchange="myFunction()">
			La LED est <?php if ($E_LED1 == 1){echo "allumée";}else{echo "éteinte";} ?>
	    </p> <!-- je recois en parametre l'état de la LED du module -->
 
 
		<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
			<input type="submit" class="bouton_on" id="envoyer" name="envoyer" value="ON ">
			<input type="submit" class="bouton_off" id="envoyer" name="envoyer" value="OFF">
		<form>
 
 
		<?php
                        $valeurBP = $_POST['envoyer'];
                        $ETATLED = $_GET['E_LED1'];
 
                        // je traite en premier les bp WEB
                        // Je regarde quel BP Web à été appuyé et j'écris sur le fichier base pour mettre à jour
                        if ($valeurBP  == "ON "){ $ETATLED  = 1;}
                        if ($valeurBP  == "OFF"){ $ETATLED  = 0;}
 
                        // J'ai recu l'information que la led est allumée sur le module
                        if($ETATLED == 1)
                        {
                                mySelect.value  ="ters";
                                $monfichier = fopen('base.txt', 'r+'); // j'ouvre le fichier et je place le curseur au début
                                fseek($monfichier, 0); // On remet le curseur au début du fichier
                                fputs($monfichier, "C_LED1=ON \nE_LED1=1\n" ); // On écrit le nouvel état
                                //fseek($monfichier, 0); // On remet le curseur au début du fichier
                                fclose($monfichier);
                        }
                        elseif (($ETATLED  == 0)) {
                                $monfichier = fopen('base.txt', 'r+'); // j'ouvre le fichier et je place le curseur au début
                                fseek($monfichier, 0); // On remet le curseur au début du fichier
                                fputs($monfichier, "C_LED1=OFF\nE_LED1=0\n" ); // On écrit le nouvel état
                                //fseek($monfichier, 0); // On remet le curseur au début du fichier
                                fclose($monfichier);
                        }
                ?>
 
		<script type="text/javascript"> 
                        function myFunction() {
                                var x = document.getElementById("mySelect").value;
                                document.getElementById("demo").innerHTML = "You selected: " + x;
                        }
                        //if ($valeurBP=="ON "){
                                //var elem = document.getElementById("idtest");
                                idtest.value = envoyer.value;
                        
                        /*
                        function Fonction_eteint(url) {
                                document.getElementById("E_LED1").innerHTML = "LED éteinte" ;
                                document.getElementById("etat").innerHTML = "0" ;
                                var xhttp = new XMLHttpRequest();
                                xhttp.open("GET", "off", true);
                                xhttp.send();                                                           
                        }
                        */                      
                </script>
 
    </body>
</html>

Je pensais notamment à un truc comme "onchange" ou tout autre chose qui pourrais me permettre d’exécuter cette action quand quelques chose se passe . Après mes notions sont plutôt faibles alors il est vrai que je m'embrouille

Voici le fond de ma pensé :

Mon ESP32 envoie donc une requête avec une URL et un argument genre ?E_LED=1

Ma page va donc recevoir cet argument. un code php lit cet argument et modifie donc mon code html ( a savoir lequel)

Et ce code html qui à été modifié me provoque une action de rafraichissement ou de lancement de requête pour mettre a jour la page un truc du genre. ou peux être grâce a mon fichier "base" qui stock des données que j'é"cris pour dialoguer entre le web le serveur et l'ESP32 .

merci de m'avoir lu !

**tag9724** · 21/06/2021, 02h45

Juste pour être sur d'avoir bien compris tu voudrais que quand le site web est ouvert et affiche l'état de la LED celui-ci s'actualise en direct en cas d'interaction depuis l'extérieur.

En gros si on allume ou éteint la LED physiquement la page met à jour l'affichage de l'état de cette LED.

Il y aura trois façons de faire, la première serais de rafraichir toute la page toutes les X secondes, ce n'est pas vraiment une méthode recommendable mais a l'avantage de fonctionner sans javascript avec une simple balise <meta http-equiv="refresh" content="5;"> dans le HTML.

La seconde manière serais d'envoyer une requête Ajax au serveur toutes les X secondes et de mettre à jour le contenus de la page en fonction de la réponse donnée.
Ici nous aurons toujours le souci de devoir demander constamment au serveur web si il y a eu du changement mais cela reste probablement la meilleure solution pour toi, au moins pour commencer.

La troisième méthode quand à elle consistera a utiliser les web sockets.
Probablement un peut plus dur a implémenter les web sockets permettent au serveur d'envoyer un message au client, en gros si l'esp32 envoie une requête au serveur web ce dernier enverras à son tour un message à toutes les page web ouvertes pour leurs notifier le changement.

Il existe des bibliothèques comme https://socket.io/ qui facilitent l'usage/l'implémentation de ces dernier sur un serveur web mais si tu n'est pas encore bien familier avec Javascript ou encore avec PHP pour mettre en place ça je te conseil vraiment de commencer par la seconde méthode.

Il faudra donc prévoir quelques petits changements à commencer par créer une nouvelle page etat-led.php qui contiendras uniquement :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php if ($E_LED1 == 1){echo "allumée";}else{echo "éteinte";} ?>

Ensuite nous rajouterons sur la page une fonction JS qui appellera etat-led.php toutes les 2 secondes et affichera la réponse de la requête sur la page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
 
  <h1>Mon serveur Web</h1>
 
  <p id="etat-led">
    <!-- L'état de la LED sera affiché ici -->
  </p>
 
  <form method="post" id="change-etat-form">
    <input type="submit" class="bouton_on" name="envoyer" value="ON ">
    <input type="submit" class="bouton_off" name="envoyer" value="OFF">
  </form>
 
  <script>
 
    /* Met à jour l'état de la LED toutes les 2 secondes */
 
    const etatLedElement = document.getElementById("etat-led");
 
    const updateEtatLed = () => {
      const requete = new XMLHttpRequest();
 
      // On affichera l'état de la LED et on redemande au serveur dans 2 secondes
      requete.addEventListener("load", () => {
        etatLedElement.textContent = "La LED est " + requete.responseText
        setTimeout(updateEtatLed, 2000)
      });
 
      requete.open("GET", "./etat-led.php");
      requete.send();
    }
 
    updateEtatLed()
 
  </script>
 
</body>

**dje8269** · 21/06/2021, 08h28

Bonjour à tous,

@ tag9724 : tu as parfaitement saisi l'idée.
Comme tu l'a dit la première solution n'est pas envisageable, car par la suite il y aura d'autre boutons basé sur le même principe et avoir une page se rafraichir toute les secondes n'est pas vraiment pas esthétique.
La seconde est dans mes cordes de compréhension je pense, étant un gros débutant.
Et la troisième effectivement trop compliqué pour moi, on verra dans quelques années.

Donc la seconde solution est effectivement l'idée grosso modo a quoi je pensais !

Avant de l’améliorer j'ai donc créer à la racine de mon serveur un fichier "etat-led.php" dans lequel j'ai mis la ligne :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php if ($E_LED1 == 1){echo "allumée";}else{echo "éteinte";} ?>

Donc ce fichier va contenir soit allumée soit éteinte" quand on va le lire ?
Pour ce faire j'ai donc modifier ma demande requête quand la led est allumée par l'ESP32 : par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

client.println("GET /etat-led.php?E_LED1=1 HTTP/1.1");

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

client.println("GET /etat-led.php?E_LED1=0 HTTP/1.1");

quand la led est éteinte .

Ensuite dans mon index.php j'ai rajouté ton code. Je ne comprends pas pourquoi tu refais des botuons en HTML ?

Voila mon code complet pour le moment pour être sur que je n'ai pas fait de bêtise , car la phrase reste toujours "La LED est éteinte" quand j'allume ou non ma led avec l'ESP32.
Mais je sens qu'on es proche du but.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
		<link href="style.css" rel="stylesheet" media="screen" type="text/css"> 
		<title>Commande LED</title>
    </head>
 
    <body>
 
		<h1 id="titre" >Mon serveur Web</h1>
 
 
		<p id="etat-led">
			<!-- L'état de la LED sera affiché ici -->
		</p>
 
		<form method="post" id="change-etat-form">
			<input type="submit" class="bouton_on" name="envoyer" value="ON ">
			<input type="submit" class="bouton_off" name="envoyer" value="OFF">
		</form>		
 
		<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
			<input type="submit" class="bouton_on" id="envoyer" name="envoyer" value="ON ">
			<input type="submit" class="bouton_off" id="envoyer" name="envoyer" value="OFF">
		<form>
 
		<?php
                        $valeurBP = $_POST['envoyer'];
                        $ETATLED = $_GET['E_LED1'];
 
                        // je traite en premier les bp WEB
                        // Je regarde quel BP Web à été appuyé et j'écris sur le fichier base pour mettre à jour
                        if ($valeurBP  == "ON "){ $ETATLED  = 1;}
                        if ($valeurBP  == "OFF"){ $ETATLED  = 0;}
 
                        // J'ai recu l'information que la led est allumée sur le module
                        if($ETATLED == 1)
                        {                               
                                $monfichier = fopen('base.txt', 'r+'); // j'ouvre le fichier et je place le curseur au début
                                fseek($monfichier, 0); // On remet le curseur au début du fichier
                                fputs($monfichier, "C_LED1=ON \nE_LED1=1\n" ); // On écrit le nouvel état
                                //fseek($monfichier, 0); // On remet le curseur au début du fichier
                                fclose($monfichier);
                        }
                        elseif (($ETATLED  == 0)) {
                                $monfichier = fopen('base.txt', 'r+'); // j'ouvre le fichier et je place le curseur au début
                                fseek($monfichier, 0); // On remet le curseur au début du fichier
                                fputs($monfichier, "C_LED1=OFF\nE_LED1=0\n" ); // On écrit le nouvel état
                                //fseek($monfichier, 0); // On remet le curseur au début du fichier
                                fclose($monfichier);
                        }
                ?>
 
		<script type="text/javascript"> 
                        
                        /* Met à jour l'état de la LED toutes les 2 secondes */
 
                        const etatLedElement = document.getElementById("etat-led");
 
                        const updateEtatLed = () => {
                        const requete = new XMLHttpRequest();
 
                        // On affichera l'état de la LED et on redemande au serveur dans 2 secondes
                        requete.addEventListener("load", () => {
                                etatLedElement.textContent = "La LED est " + requete.responseText
                                setTimeout(updateEtatLed, 1000)
                        });
 
                        requete.open("GET", "./etat-led.php");
                        requete.send();
                        }
 
                        updateEtatLed()
 
                        </script>
 
		</script>
 
    </body>
</html>

**dje8269** · 21/06/2021, 10h27

Bon, en faisant quelques tests je me rends compte d'un problème plus embêtant !

Quand j'appui sur le BP( physique) pour allumer la led ; celle-ci s'allume parfaitement, mais si je rafraichis la page web, cela éteint la led. En effet la valeur du bouton html est sur off dons en rafraichissant la page je relance une mise à off de la led .....

GRgrgrgrgr je me tire les cheveux .......

I lfaudrait que la valeur du bouton HTML soit par défaut vide, puis quand on clic dessus elle passe a une valeur "on" ou "off" , puis repasse a vide !

**NoSmoking** · 21/06/2021, 12h14

Bonjour,
juste pour dire qu'il existe une « quatrième méthode » via L'API EventSource.

**dje8269** · 21/06/2021, 12h20

Bonjour NoSmoking,

Merci à toi d’intervenir pour tenter de m'aider.

Pourrais-tu en dire un peu plus sur ton idée, car mon niveau est vraiment débutant, et je me rends compte que les choses sont mal faites ! donc je galère vraiment.

Merci en tout cas de ta proposition.

Actualiser une page à la reception d'une requête

JavaScript

Vue hybride

Discussions similaires

Partager

Partager