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.

**dje8269** · 21/06/2021, 17h48

Re,

Déjà merci a ceux qui ont bien voulu m'aider.

Je suis arrivé a quelques choses qui fonctionne a peu prêt !

voici mes codes

dans le fichier index (ma page web) j'ai donc du php pour gérer l'appui des boutons html qui vont écrire sur des fichiers et du JS, qui va automatiquement mettre à jour l'état de la led en lisant un fichier
Dans le fichier etatLED1 , j'écris l'état de la led que mon ESP32 m'a envoyé par un argument et j'écris aussi dans le fichier base pour indiquer que la consigne est réalisée.
Dans le fichier base.txt , j’écris les consignes à appliquer par l'ESP32 . ce fichier ne me sert qu'a lire par l'ESP32 ce que l'ESP32 doit faire.

Je pense que c'est très boiteux comme système , mais ça fonctionne en tout cas. je vais tenter de l'améliorer. L’inconvénient est qu'il faudra autant de fichier que d'état a connaitre.

Voila si des courageux m'ont compris et veulent regarder ce code pour l'améliorer je suis preneur !

index.php :

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="id-etat-led">
			<!-- L'état de la LED sera affiché ici -->
		</p>
 
		<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'];
 
                        // J'ai recu l'information que la led est allumée sur le module
                        if ($valeurBP  == "ON ")
                        {                               
                                $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 \n" ); // On écrit la nouvelle consigne
                                fclose($monfichier);
                                $monfichier = fopen('etatLED1.php', '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, "allumée\n" ); // On écrit le nouvel état
                                fclose($monfichier);
                        }
                        else {
                                $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\n" ); // On écrit la nouvelle consigne
                                fclose($monfichier);
                                $monfichier = fopen('etatLED1.php', '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, "éteinte \n" ); // On écrit le nouvel état
                                fclose($monfichier);
                        }
                ?>
 
 
		<script type="text/javascript"> 
                        
                        /*Met à jour l'état de la LED toutes les 1 secondes */
                        const etatLedElement = document.getElementById("id-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", "/etatLED1.php");
                        requete.send();
                        }
 
                        updateEtatLed()
                </script>
 
    </body>
</html>

etatLED1.php :

Code php :

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
allumée
 
 
<?php
    // J'ai recu l'information que la led est allumée sur le module
    if($_GET['E_LED1'] == '1')
    {				
        $monfichier = fopen('etatLED1.php', '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, "allumée\n" ); // On écrit le nouvel état
        fclose($monfichier);
        // ecrirute des consignes
        $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 \n" ); // On écrit le nouvel état
        fclose($monfichier);
     }
    elseif ($_GET['E_LED1']  =='0') {
        $monfichier = fopen('etatLED1.php', '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, "éteinte \n" ); // On écrit le nouvel état
        fclose($monfichier);
        // ecrirute des consignes
        $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\n" ); // On écrit le nouvel état
        fclose($monfichier);
    }  
?>

base.txt

Code :

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

C_LED1=OFF

ca avance ca avance !!

**NoSmoking** · 21/06/2021, 18h15

Je pense que tu gagnerais à passer uniquement par Ajax pour faire tes mises à jour côté serveur et affichage côté client.

**tag9724** · 21/06/2021, 19h19

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

Il m'arrive souvent quand je copie le code et le colle dans mon éditeur de code de le modifier, soit pour fixer des erreurs comme des balises mal fermées ou encore enlever du superflu comme le code en php qui m'empêcherais de tester en local de mon coté.

Vu que le formulaire n'avais pas grand chose à voir avec la question initiale je ne me suis pas prit le temps d'en parler mais tout ce qui as changé c'est que l'attribut id en double id="envoyer" a été enlevé car pas utilisé en plus d'être une erreur, un attribut id doit être unique et ne peux pas être utilisé plusieurs fois dans la page.

Ensuite le $_SERVER['PHP_SELF'] a été enlevé car non nécessaire ici, un formulaire sans attribut action enverra les informations postées sur la page courante.

Une question sinon que je me pose dans le fichier index.php est pourquoi éteindre la LED quand on ouvre la page ?
Grossièrement ton code se présente comme ça :

Code php :

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

1
2
3
4
5
6
7
8
9
$valeurBP = $_POST['envoyer'];
 
if ($valeurBP  == "ON "){ 
  // On allume la LED
}
 
else {                      
  // On éteint la LED
}

Ici a chaque fois que la page index.php sera ouvert sans méthode POST avec comme valeur passée envoyer="ON" la LED sera éteinte.

Je ne pense pas que ce soit un comportement voulu, comme l'as dit NoSmoking utiliser des requêtes Ajax serais une bonne idée dans ton cas.
L'idée serais d'avoir une page par action demandée :

Une page "etat-led.php" renverra juste si la LED est allumées ou éteinte
Une page "changer-etat-led.php s'occupera d'allumer ou déteindre la LED

Ensuite il suffiras en Javascript d'appeler l'une ou l'autre des pages via une requête Ajax comme ça a été fait dans l'exemple précédent pour récupérer toutes les deux secondes l'état de la LED.

Envoyé par NoSmoking

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

J'aurais appris quelque chose aujourd'hui, je ne connaissais pas cette API merci

**dje8269** · 21/06/2021, 19h53

Merci pour ces explications, j'ai donc corriger mon code en fonction de tes remarques.

Une question sinon que je me pose dans le fichier index.php est pourquoi éteindre la LED quand on ouvre la page ?

Euhhh... je sais pas. effectivement à chaque ouverture de page, la led s'éteint !!! au secours !!!

Pour remédier à cela, en faisant

Code :

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

1
2
3
4
5
6
7
			if ($valeurBP  == "ON ")
			{				
				// allumer
			}
			else if ($valeurBP  == "OFF"){
				// éteindre
			}

Ça fonctionne ! oufffff j'ai eu peur.

Concernant AJAX, pfffiuoo voile une semaine que je me dépatouille à apprendre le html, css, php et javascript et vous me rajouter de l'AJAX ?????
Ces notions de requêtes sont vraiment encore floues pour moi. Je recopie du code sans le comprendre c'est pas intéressant.

D’ailleurs pour quoi faire une requête toute les 2 secondes, ne sont-elles pas censées s'effectuer sur un événement justement ?
Je serais partant pour une version AJAX mais il faut que vous m'aidez un peu plus !

C'est déjà super sympa ce que vous avez fait , j'ai un truc qui fonctionne pas trop mal, même si c'est pas optimisé du tout.

J'aurais appris quelque chose aujourd'hui, je ne connaissais pas cette API merci

C'est souvent en aidant les autres , qu'on apprend et finalement on s'aide soi-même.

**mathieu** · 21/06/2021, 20h24

pour mieux comprendre comment javascript pourrait vous aider pour votre page, il faut d'abord que vous compreniez mieux comment fonctionne les communications http.
ces communications se font entre un serveur (par exemple le logiciel apache) et un client http (par exemple un navigateur). quand vous tapez l'adresse "monserveur.com/index.php", le navigateur envoie la demande au serveur et le serveur retourne le code html de la page. le navigateur analyse alors le code html et s'il trouve des ressources à chercher comme par exemple un fichier css, javascript ou des images, il va refaire une requête http pour chaque ressource.
vous pouvez voir ces requêtes dans l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

sur l'article suivant, il y a un schéma qui explique les requêtes http plus en détails et qui indique à quel endroit se passent les requêtes http "ajax".
https://dmouronval.developpez.com/tu...-requete-ajax/

**dje8269** · 21/06/2021, 21h24

Merci Mathieu de ces conseils avisés !

Même après lecture de plusieurs tutos, la théorie reste de la théorie. Étant un presque vieux j'aime apprendre par les exemples concrets !

**mathieu** · 22/06/2021, 14h23

juste pour être sur que j'ai bien compris, vous confirmez que sur votre carte esp32, il y a la diode et le bouton directement branchés dessus ?
et côté logiciel, il y a le programme qui agit sur la diode et le serveur http avec php ?
vous avez montré un bout de code avec "client.println", c'est quel langage ? je suppose que vous utilisez ça parce que c'est plus compliqué de communiquer avec la diode directement en php ?

Envoyé par dje8269

D’ailleurs pour quoi faire une requête toute les 2 secondes, ne sont-elles pas censées s'effectuer sur un événement justement ?

cela vient de l'utilisation du protocole http qui est optimisé pour répondre rapidement aux requête du client. cela veut dire qu'un fois la réponse envoyée, le serveur n'a plus de possibilité de dialoguer avec le client et donc c'est au client d'envoyer des requête régulièrement pour obtenir l'information de l'état de la diode.

**dje8269** · 22/06/2021, 18h13

Bonjour,

Oui sur la carte ESP32 il y a une led (même deux aujourd'hui) une verte et une bleue . Il y a aussi un BP directement branché dessus.

99% des personnes utilisent l'ESP32 en lui intégrant un serveur pour faire de la domotique sur le réseau wifi interne de la maison. Hors dans mon cas je souhaite que L'esp32 soit un client, car je possède déjà un serveur externe. Ainsi Je peux piloter mes objets depuis mon serveur web a l'autre bout de la France. car mon ESP32 lui reste à la maison sur ma box. Ceci me permet de ne pas le laisser allumer en permanence. Il dort la majorité du temps et se réveille pour interroger le serveur seulement.Je gagne en autonomie sur pile.

Le programme de l'esp32 contrôle les leds, et reçoit les informations du BP ou tout autre capteur. La seule chose que je sais faire avec l'ESP32 c'est envoyé une requête à mon serveur (avec argument) et lire la réponse caractère par caractère du serveur. Dans la réponse je tri et récupère les informations qui m’intéresse et exécute une action au besoin.

Le client.println c'est du langage bizarre!!! c'est de l'arduino (C++) interprété et compris par le firmware de l'ESP32. Je ne suis pas à l'aise non plus avec ce langage moi mon domaine c'est le "C" .

En fait je dois faire communiquer deux client ensembles au final par l’intermédiaire d'un serveur qui stock les infos de l'un et de l’autre qu'ils s’échangent.

Si l'ESP allume une led, il l'écrit sur le serveur. le client ( navigateur web) va lire de temps en temps ( toutes les 2 secondes ) si il y a une mise à jour à faire. et affiche l'état de la led.
Mais l'ESP aussi de temps va lire sur le serveur si il n'as pas une action à exécuter de la part du client web.

A l'inverse, le client web ( mon navigateur) écrit sur le serveur si un bp html à été appuyer (fichier consigne). il va aussi lire( le fichier etatLED1 et etatLED2) de temps en temps pour voir si il doit afficher allumée ou éteinte.

Je suis certain qu'il y a beaucoup plus optimisé, mais je débute vraiment , même si le langage informatique m'est familier.

Aujourd'hui j'ai avancé et remis un peu d'ordre dans le nom de mes fichiers et apportés quelques modifs. Franchement le programme fonctionne parfaitement pour le moment.( du moins en apparence

)

Les modifications apportées :
-Avant quand j'appuyais sur un BP html la page avait un sursaut (rafraichissement), c'était très moche, je donc modifier mes bp html pour utiliser du JS en arrière plan.
- J'en ai profiter pour rajouter une deuxième LED et donc encore 2 boutons html.
- j'ai également rajouté la mise à jour de la seconde led en recopiant le code de la première. j'ai passé à 500ms le temps interrogation pour gagner en réactivité.

la partie avec le quel j'ai le plus de mal c'est la requete

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
const etatLed_B_Element = document.getElementById("id-etat-ledb");
 
			const updateEtatLedB = () => {
			const requete_LEDB = new XMLHttpRequest();
 
			requete_LEDB.addEventListener("load", () => {
				etatLed_B_Element.textContent = requete_LEDB.responseText
				setTimeout(updateEtatLedB, 500)
			});
 
			requete_LEDB.open("GET", "/etatLED2.php");
			requete_LEDB.send();

la c'est coton !!!! je comprends pas le déroulé et le fonctionnement car tout est imbriqué, j'ai l'impression d’avoir un résultat avec d'avoir posé la question ! lol.

Si jamais vous voulez m'aider à améliorer le programme je suis preneur, voir a passé en ajax, mais il faut m'aiguiller.
Pour infos je vous joins l'état de mes fichiers actuels et je vous remercie encore de vos réponses.

INDEX.PHP

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
const etatLed_B_Element = document.getElementById("id-etat-ledb");
 
			const updateEtatLedB = () => {
			const requete_LEDB = new XMLHttpRequest();
 
			requete_LEDB.addEventListener("load", () => {
				etatLed_B_Element.textContent = requete_LEDB.responseText
				setTimeout(updateEtatLedB, 500)
			});
 
			requete_LEDB.open("GET", "/etatLED2.php");
			requete_LEDB.send();

etatLED1.php et etatLED2.php qui est le même avec des noms differents :

Code :

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
éteinte 
 
<?php
    // J'ai recu l'information que la led est allumée sur le module
    if($_GET['E_LED1'] == '1')
    {                           
        $monfichier = fopen('etatLED1.php', '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, "allumée\n" ); // On écrit le nouvel état
        fclose($monfichier);
        // ecrirute des consignes
        $monfichier = fopen('consignes.php', '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 \n" ); // On écrit le nouvel état
        fclose($monfichier);
     }
    elseif ($_GET['E_LED1']  =='0') {
        $monfichier = fopen('etatLED1.php', '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, "éteinte \n" ); // On écrit le nouvel état
        fclose($monfichier);
        // ecrirute des consignes
        $monfichier = fopen('consignes.php', '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\n" ); // On écrit le nouvel état
        fclose($monfichier);
    }  
?>

et mon fichier consigne.php qui stock les ordres des boutons html. et physique

Code :

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
C_LED1=ON C_LED2=ON 
 
 
<?php
    // J'ai recu l'information que la led est allumée sur le module
    if($_GET['E_LED1'] == '1')
    {
    // #####################################   LED 1   ####################################################
                                
        $monfichier = fopen('etatLED1.php', '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, "allumée\n" ); // On écrit le nouvel état
        fclose($monfichier);
        // ecrirute des consignes
        $monfichier = fopen('consignes.php', '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 \n" ); // On écrit le nouvel état
        fclose($monfichier);
     }
    elseif ($_GET['E_LED1']  =='0') {
        $monfichier = fopen('etatLED1.php', '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, "éteinte \n" ); // On écrit le nouvel état
        fclose($monfichier);
        // ecrirute des consignes
        $monfichier = fopen('consignes.php', '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\n" ); // On écrit le nouvel état
        fclose($monfichier);
    }  
    // #####################################   LED 2 ######################################################
    if($_GET['E_LED2'] == '1')
    {                           
        $monfichier = fopen('etatLED2.php', '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, "allumée\n" ); // On écrit le nouvel état
        fclose($monfichier);
        // ecrirute des consignes
        $monfichier = fopen('consignes.php', 'r+'); // j'ouvre le fichier et je place le curseur au début
        fseek($monfichier, 10); // On remet le curseur au début du fichier
        fputs($monfichier, "C_LED2=ON \n" ); // On écrit le nouvel état
        fclose($monfichier);
     }
    elseif ($_GET['E_LED2']  =='0') {
        $monfichier = fopen('etatLED2.php', '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, "éteinte \n" ); // On écrit le nouvel état
        fclose($monfichier);
        // ecrirute des consignes
        $monfichier = fopen('consignes.php', 'r+'); // j'ouvre le fichier et je place le curseur au début
        fseek($monfichier, 10); // On remet le curseur au début du fichier
        fputs($monfichier, "C_LED2=OFF\n" ); // On écrit le nouvel état
        fclose($monfichier);
    }     
?>

Je vous fait grace du css qui est tout ridicule.

Toute proposition de modification est la bienvenue !

**mathieu** · 22/06/2021, 21h50

Envoyé par dje8269

utiliser du JS en arrière plan

voilà vous y êtes, c'est une autre façon de définir l'utilisation d'ajax. dit d'une autre façon, ce qu'on appelle souvent "ajax" en ce moment, c'est le fait d'avoir une page html qui reste fixe dans le navigateur et c'est le code javascript qui est le client http, qui envoie donc les requêtes http et qui modifie ensuite le contenu de la page html.

Envoyé par dje8269

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
const etatLed_B_Element = document.getElementById("id-etat-ledb");
 
			const updateEtatLedB = () => {
			const requete_LEDB = new XMLHttpRequest();
 
			requete_LEDB.addEventListener("load", () => {
				etatLed_B_Element.textContent = requete_LEDB.responseText
				setTimeout(updateEtatLedB, 500)
			});
 
			requete_LEDB.open("GET", "/etatLED2.php");
			requete_LEDB.send();

je comprends pas le déroulé et le fonctionnement car tout est imbriqué, j'ai l'impression d’avoir un résultat avec d'avoir posé la question ! lol.

la partie "addEventListener" permet de définir ce qu'il se passe à la réception de la réponse du serveur. c'est ici que se passe la partie asynchrone, puisque à l'appel de "send", la requête est envoyée et le code passe directement à la suite sans attendre la réponse. et c'est seulement un peu plus tard quand la réponse est récupérée, que le code de l'évènement "load" est lancé.

en ce qui concerne l'organisation des cartes esp32 qui communiquent avec un serveur, je trouve que ça tient complètement la route.

et pour la code, ma 1re remarque est par rapport à la sécurité des communications. je suppose que c'est un simple test pour le moment donc gardez juste dans un coin de votre tête que dans l'état actuel, une personne malveillante qui trouve l'adresse de votre page pourrait agir sur les différentes actions disponibles.
il est possible de sécuriser cela de différentes façons avec des mots de passe, du chiffrement ou des signatures.

et pour finir, il est possible de réorganiser votre code. en règle générale, quand vous commencer à faire des copier-coller, c'est un signe que le code peut être factoriser avec des boucles ou des fonctions.
par exemple les fichiers etatLED1.php, etc, pourraient être remplacés par quelque chose comme cela :

Code :

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
// cette fonction peut être mise dans un autre fichier pour pouvoir être utilisée à plusieurs endroits
function ecriture_fichier_dialogue($nom_fichier, $instruction)
{
 
	$monfichier = fopen($nom_fichier, '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, "$instruction\n" ); // On écrit le nouvel état
	fclose($monfichier);
 
}
 
 
$nom_diode = $_GET["nom_diode"] ?? "";
 
if ("" !== $nom_diode) { // si le nom de la diode est définie
 
	$etat_diode = $_GET["etat_diode"] ?? "0"; // si l'argument n'est pas passé dans l'url, éteindre la diode
 
	if ("1" === $etat_diode) { // si la diode doit être allumée
		ecriture_fichier_dialogue("etat_$nom_diode.php", "allumée");
		ecriture_fichier_dialogue("consignes_$nom_diode.php", "C=ON");
	} else { // si la diode doit être éteinte
		ecriture_fichier_dialogue("etat_$nom_diode.php", "éteinte");
		ecriture_fichier_dialogue("consignes_$nom_diode.php", "C=OFF");
	}
 
}

et donc vous aurez un seul fichier que vous appellerez de cette sorte :
etat.php?nom_diode=d1&etat_diode=0
etat.php?nom_diode=diode2_salon&etat_diode=1

pour l'opérateur "??" en php, regardez là :
https://www.php.net/manual/fr/langua...rison.coalesce

cette factorisation peut aussi se faire dans le code javascript ce qui vous permettra de gérer un grand nombre d'éléments.

**dje8269** · 23/06/2021, 09h36

Bonjour à tous,

@Mathieu: merci de vos remarques. Effectivement je suis sensible à la sécurité. Et pour le moment une personne malveillante pourra seulement allumée des LEDs. Je compte mettre un mot de passe pour accéder à la page par la suite. Mais dans tous les cas, les choses possibles seront d'ordre domotique et pas très grave en cas d'allumage non voulu.

J'ai factoriser les fonctions. Je vais essayer de me créer un fichier fonction du coup et de l'inclure.

Pour votre proposition de code etatled, j'ai un doute que cela fonctionne. Car il me faut le texte écrit en dur pour chaque LED, car je vais lire ensuite ce texte pour l'afficher.

Sinon j'ai bossé sur la compréhension de la partie qui me chiffonne, car je pense quelle est importante.

J'ai donc remplacé la partie que je trouve alembiqué par quelques choses que je comprends mieux. Pouvez-vous me dire si ca va ce que j'ai pondu ?

Ancienne version

Code :

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
 
  		        const etatLed_B_Element = document.getElementById("id-etat-ledb");
 
			const updateEtatLedB = () => {
			const requete_LEDB = new XMLHttpRequest();
 
			requete_LEDB.addEventListener("load", () => {
				etatLed_B_Element.textContent = requete_LEDB.responseText
				//setTimeout(updateEtatLedB, 600)
			});
 
			setInterval(mafonction, 10000);	
 
			requete_LEDB.open("GET", "/etatLED2.php");
			requete_LEDB.send();
			}
			updateEtatLedB()

Ma version

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function MAJLedB() {
		const idTextAremplacer = document.getElementById("id-etat-ledb"); // je défini l'endroirt du texte que je dois remplacer par son ID
                const requete_LEDB = new XMLHttpRequest();  // Je créer un objet de type requete
                requete_LEDB.open("GET", 'etatLED2.php', true);  // je constitue ma requete
                requete_LEDB.send();  // j'envoie ma requete				
 
		requete_LEDB.addEventListener("load", () => {  // à la reception de la réponse du réponse, je remplace le texte
			idTextAremplacer.textContent = requete_LEDB.responseText // je remplace le texte par la réponse recue dans la requete
		});				
            }
setInterval(MAJLedB, 1000);  // je repete l'opération toute les secondes

J"ai un doute sur le placement de setinterval ? dois-je le mettre à l’intérieur de la fonction plutôt ?

Prochaine étape, mettre une petite image quand la led est allumé et une autre quand la led est éteinte ! le graphique ca parle plus à ma femme lol .
J'aurais aimé aussi modifié les boutons on et off quand la led est allumée ou éteinte. Par exemple si la led est allumée, alors la seule action possible c'est de l'éteindre, et donc le bouton "ON" serait grisé on va dire.

**mathieu** · 23/06/2021, 12h28

ce n'est pas une bonne idée d'utiliser "setInterval" parce qu'en cas de surcharge du serveur, la réponse va prendre plus de temps et les répétitions vont s'empiler et surcharger le serveur encore plus.
ce que vous avez fait avant est ce qui est le plus souvent utilisé, avec le lancement de la mise à jour suivante quand la réponse a été analysée.

Envoyé par dje8269

Pour votre proposition de code etatled, j'ai un doute que cela fonctionne. Car il me faut le texte écrit en dur pour chaque LED, car je vais lire ensuite ce texte pour l'afficher.

je n'ai pas compris à quel moment cela pose problème. montrez nous comme vous fonctionnez quand il y a 2 ou 3 diodes.
avec ce que je vous ai proposé, vous aurez les fichiers etat_d1.php et consignes_d1.php pour la 1re diode, etat_diode2.php et consignes_diode2.php pour la 2e diode, etc.

**NoSmoking** · 23/06/2021, 15h30

Nonobstant, tiens cela faisait longtemps que je ne l’avais placé celui-là, tout ce qui vient de ce dire, je vous propose une approche légèrement différente et basique de ce qui pourrait ce faire.

Pourquoi partir sur un fichier par composant et ne pas tout regrouper dans un même fichier ? :

J'articulerais cela autour de 4 fichiers :

LED-config.ini
LED-form.html
LED-read-config.php
LED-write-config.php

LED-config.ini

Code :

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

1
2
3
4
led_1 = 0
led_2 = 1
led_3 = 0
led_4 = 1

la référence des clés étant la référence des éléments correspondants dans le HTML afin de facilement les mettre à jour.

LED-form.html, au moins une partie

Code html :

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

1
2
3
4
5
6
7
8
9
<form action="#" method="POST">
  <h2>Contrôle leds</h2>
  <p><label><input type="checkbox" name="led_1">Led #1</label>
  <p><label><input type="checkbox" name="led_2">Led #2</label>
  <p><label><input type="checkbox" name="led_3">Led #3</label>
  <p><label><input type="checkbox" name="led_4">Led #4</label>
  <p><label><input type="checkbox" name="led_5">Led #5</label>  
  <div id="result"></div>
</form>

On pourrait également passer par des ID.
Les éléments sont « encapsulés » dans un élément <form> afin de pouvoir déclencher la modification d’un état sur le onchange du formulaire.

La lecture des données du fichier INI celle-ci peut se faire simplement
LED-read-config.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$fileName = "LED-config.ini";
if (file_exists($fileName)) {
  $leds = parse_ini_file($fileName, false);
  echo json_encode($leds);
}
else {
  echo json_encode(array(
      "status" => 404,
      "statusText" => "file not found"
    ));
}
?>

Ce fichier sera appelé au chargement pour initialiser les champs et ensuite pour les éventuelles mises à jour via un setTimeout, voir fonction getAjaxData.

Dans le cas d’une modification on utilise le fichier serveur LED-write-config.php qui va traiter la demande et tout mettre dans le même fichier.
LED-write-config.php

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
<?php
$fileName = "LED-config.ini";
if (file_exists($fileName)) {
  $leds = parse_ini_file($fileName, false);
 
  $datas = json_decode(stripslashes(file_get_contents("php://input")), true);
  if (!empty($datas) && is_array($datas)) {
    foreach ($datas as $key => $value) {
      if (isset($leds[$key])) {
        $leds[$key] = $value;
 
        $res = [];
        foreach ($leds as $key => $val) {
          $res[] = "$key = " . (is_numeric($val) ? $val : '"' . $val . '"');
        }
 
        if ($fp = fopen($fileName, "w")) {
          fwrite($fp, implode("\r\n", $res));
          fclose($fp);
        }
      }
      else {
        echo "<b style='color:red'>ERREUR</b> : $key is undefined !";
      }
    }
  }
  else {
    echo "<b style='color:red'>ERREUR</b> : sur envoi/traitement des données !";
  }
}
else {
  echo json_encode(array(
      "status" => 404,
      "statusText" => "file not found"
    ));
} 
?>

Fonction getAjaxData

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
function getAjaxData(url, success) {
  var oXhr = new XMLHttpRequest();
  oXhr.onload = function() {
    success && success(JSON.parse(this.responseText));
    setTimeout(() => {
      getAjaxData(url, success)
    }, 1000)
  }
  oXhr.open("GET", url);
  oXhr.send(null);
}

Avec l'appel suivant au chargement de la page

Code :

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

getAjaxData("LED-read-config.php", updateChamps);

Nota : La fonction updateChamps est la fonction appelée lors que la réponse OK revient, c’est elle qui va se charger de mettre à jour les champs :
Fonction updateChamps

Code :

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

1
2
3
4
5
6
7
8
9
function updateChamps(data) {
  const ids = Object.keys(data);
  ids.forEach((id) => {
    const elem = document.querySelector(`[name="${id}"]`);
    if (elem) {
      elem.checked = data[id] == "1";
    }
  });
}

On voit donc bien la relation entre le name et la clé du composant.

Pour chaque modification on va envoyer au serveur ce qui est modifié via la fonction sendAjaxData.
Fonction sendAjaxData et celles liées:

Code :

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
function showResult(retour) {
  document.getElementById("result").innerHTML = retour;
}
function sendAjaxData(url, param, success) {
  showResult("");
  var oXhr = new XMLHttpRequest();
  oXhr.onload = function() {
    success && success(this.responseText);
  }
  oXhr.open("POST", url);
  oXhr.send(JSON.stringify(param));
}
 
function handleFormChange(e) {
  e.preventDefault();
  const data = {};
  data[e.target.name] = e.target.checked ? "1" : "0";
  sendAjaxData("LED-write-config.php", data, showResult);
}
// affectation pour prise en compte modification
const oForm = document.querySelector("form");
oForm.addEventListener("change", handleFormChange);
// mise à jour
getAjaxData("LED-read-config.php", updateChamps);

La fonction shoxResult n’étant qu’une aide et non primordiale.

Pour résumer le fichier LED-form.html :

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple Ajax simple</title>
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
form {
  width: 40em;
  margin: auto;
}
form label {
  cursor: pointer;
}
[type="checkbox"] {
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  margin: 0 .5em;
  border: 3px double #888;
  border-radius: 50%;
  font-size: 1.5em;
  vertical-align: middle;
  background: #FAA;
  box-shadow: 0 0 0.5em #A00 inset;
  cursor: pointer;
  transition: all .3s;
}
[type="checkbox"]:checked {
  background: #2F4;
  box-shadow: 0 0 0.5em #080 inset,0 0 .5em #880;
}
</style>
</head>
<body>
<section>
  <form action="#" method="POST">
    <h2>Contrôle leds</h2>
    <p><label><input type="checkbox" name="led_1">Led #1</label>
    <p><label><input type="checkbox" name="led_2">Led #2</label>
    <p><label><input type="checkbox" name="led_3">Led #3</label>
    <p><label><input type="checkbox" name="led_4">Led #4</label>
    <p><label><input type="checkbox" name="led_5">Led #5</label>
    <div id="result"></div>
  </form>
</section>
<script>
function showResult(retour) {
  document.getElementById("result").innerHTML = retour;
}
 
function updateChamps(data) {
  const ids = Object.keys(data);
  ids.forEach((id) => {
    const elem = document.querySelector(`[name="${id}"]`);
    if (elem) {
      elem.checked = data[id] == "1";
    }
  });
}
 
function sendAjaxData(url, param, success) {
  showResult("");
  var oXhr = new XMLHttpRequest();
  oXhr.onload = function() {
    success && success(this.responseText);
  }
  oXhr.open("POST", url);
  oXhr.send(JSON.stringify(param));
}
 
function getAjaxData(url, success) {
  var oXhr = new XMLHttpRequest();
  oXhr.onload = function() {
    success && success(JSON.parse(this.responseText));
    setTimeout(() => {
      getAjaxData(url, success)
    }, 1000)
  }
  oXhr.open("GET", url);
  oXhr.send(null);
}
function handleFormChange(e) {
  e.preventDefault();
  const data = {};
  data[e.target.name] = e.target.checked ? "1" : "0";
  sendAjaxData("LED-write-config.php", data, showResult);
}
const oForm = document.querySelector("form");
oForm.addEventListener("change", handleFormChange);
getAjaxData("LED-read-config.php", updateChamps);
</script>
</body>
</html>

Pour info, il y a une led en plus dans le HTML pour tester et voir la suite à donner, je retourne une « erreur » dans ce cas.
J'ai rajouté un peu de cosmétique, ceci étant l'approche reste basique et pourrait sans nul doute être optimisé, je pense notament au PHP mes carences n'étant plus à démonter

J'espère ne rien avoir oublié !

Prochaine étape, mettre une petite image quand la led est allumé et une autre quand la led est éteinte ! le graphique ca parle plus à ma femme lol .
J'aurais aimé aussi modifié les boutons on et off quand la led est allumée ou éteinte. Par exemple si la led est allumée, alors la seule action possible c'est de l'éteindre, et donc le bouton "ON" serait grisé on va dire.

Il sera préférable d'ouvrir une nouvelle discussion mais tu peux ores et déjà regarder Toggle Switch with <input type="checkbox">, l'exemple #2, sachant que la toile n'est pas avare d'exemples

**dje8269** · 23/06/2021, 17h01

Bonjour NoSmoking,

Merci de ton intervention ! je suis un peu gêné car ton post arrive un peu tard. Tu t'es donné du mal à le faire et je t'en remercie.
Ton introduction beaucoup trop de nouvelles notions pour moi.

J'aime comprendre ce que je fais. et la il faudrait tout que je re-essaye de comprendre. Le but est de gagner en autonomie et de pouvoir modifier des trucs tout seul, pas de recopier un programme fait par un autre. Mais d'avancer en le construisant petit a petit grâce à vos conseils.

Cela parait sans doute simpliste pour toi, mais ne l'a pas du tout pour moi. Trop de notion nouvelle d'un coup. De plus il ne faut pas oublié que j'ai aussi l'autre partie à gérer coté ESP32 . Et lui ne sait que lire un fichier avec des get. donc il faut aaussi que les fichiers soient courts sinon il va passer sont temps à faire des gets et je perdrais en réactivité.

J'ai factoriser la fonction écriture dans les fichiers. je vais écouter le conseil de Mathieu et remettre le timeout .
Je vais regarder la toile pour des exemples d'images et pour modifier mes boutons si je n'y arrive pas j’ouvrirai un second post .

qui va piano va sano

En tout cas un grand merci pour l’intérêt que tu as porté et bravo pour ton code

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

JavaScript

Discussions similaires

Partager

Partager