Deux appels consécutifs au serveur

**mormic** · 01/11/2023, 18h32

Bonsoir à tous
Dès le chargement d'une page (HTML + CSS + JS) le client a besoin de lancer deux commandes successivement.
Je l'ai imaginé ainsi:

Code :

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

1
2
3
4
5
6
7
8
//******************chargement des etats au load de la page*******************************
window.onload = function(){
    codeAction="E"; codeEquipe="A"; tx==0;
    appServeur("/API?Cmd=E&volet=A&valeur=0",ack);
 
    codeAction="E"; codeEquipe="B";
    appServeur("/API?Cmd=E&relais=B",ack);
}

Mais cela ne fonctionne pas, certainement parce que l'accusé réception n'a pas le temps d'arriver.
Auriez-vous une idée de la façon de faire?

**ProgElecT** · 01/11/2023, 20h35

Salut

Cela ne viendrait il pas de la ligne 3
codeAction="E"; codeEquipe="A"; tx==0;

codeAction="E"; codeEquipe="A"; tx=0;

**mormic** · 02/11/2023, 10h12

Merci ProgElect
Bien vu pour l'erreur de syntaxe (== au lieu de =)
Mais le problème est ailleurs.
Le premier appel au serveur ne se finit pas complètement.
Par contre le deuxième se passe correctement.
En "monitorant" côté serveur, c'est le deuxième appel qui arrive en premier!
Bizarre
Voici mon script complet, si cela peut aider:

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
let action="", equipe="", touche, tx=0;
let codeAction="", codeEquipe="", message="";
let etatVol = [0,0,0,0,0,0,0,0,0], etatRel = [0,0,0,0];
//******************chargement des etats au load de la page*******************************
window.onload = function(){
    codeAction="E"; codeEquipe="A"; tx=0;
    appServeur("/API?Cmd=E&volet=A&valeur=0",ack);  //demande l'etat des volets
    codeAction="E"; codeEquipe="B";
    appServeur("/API?Cmd=E&relais=B",ack);          //demande l'etat des relais
}
//**********************Chargement des volets *****************************************
function chargeEtatVolet(){
    let mescanvas = '';
    for(let i = 1; i < 10; i++) {
        mescanvas += `<div class="divParent"><span>V${i}</span><div class="position" id="v${i}"></div><span>${etatVol[i-1]}%</span></div>`;
    }
    document.getElementById('container').innerHTML = mescanvas;
    for (const taux of document.getElementsByClassName('position')) {
        let pourcent = taux.parentElement.lastChild.innerText;
        taux.style.backgroundImage = `linear-gradient(to top, #a8eb12 ${pourcent}, gray 0%)`;       
    }
}
function majVolets(tempo){
    for(let j=0; j<tempo.length/2;j++){
        if(tempo.substring(j*2,j*2+2)=="OT") etatVol[j]=100;
        else etatVol[j]= parseInt(tempo.substring(j*2,j*2+2));
    }
}
//*******************Mise à jour etat relais locaux*****************************************
function majRelais(tempo){
    for(let j=0; j<4;j++){
        let z="b"+(j+1); let bgc; 
        etatRel[j] = parseInt(tempo.substring(j,j+1));
        bgc = (etatRel[j]==1)? 'red' : 'cornflowerblue';
        document.getElementById(z).style.backgroundColor = bgc;
    }
}
//*******************evenement click sur voyant relais local********************************
let relais=0, mouv="";
let listeRelais = document.querySelectorAll(".relais");
listeRelais.forEach(function(k){
    k.addEventListener("click", function(kk){
        relais = kk.target.innerHTML;
        codeAction="C";
        mouv = (etatRel[relais-1]==0)? "O":"F";
        appServeur("/API?Cmd=" + codeAction + "&relais=" + relais + "&mouv=" + mouv, ack);
    })
})
//*********************evenemnts saisies du clavier recu en HTML*****************************
let msgErr = "tapez C pour corriger";
let demandeResult=false;
let listeBouton = document.querySelectorAll(".bb");
listeBouton.forEach(function(i){
    i.addEventListener("click", function(e){
        touche = e.target.innerHTML;
        if(touche == 'C'){ raz(); tx = 0; return;}	//remise a zero
        let tempo = document.getElementById("action").innerHTML;
        let tempi = document.getElementById("equipement").innerHTML;
        let tempa = document.getElementById("taux").innerHTML;
        //debut de la saisie
        if(tempo == "action"){
            switch(touche){         //this.value = String
                case '0': 
                    action = "Ouverture"; codeAction = "O";
                break;
                case 'F': 
                    action = "Fermeture"; codeAction = "F";
                    document.getElementById("taux").innerHTML="100%";
                break;
                case 'E':
                    action = "Etat"; codeAction = "E";
                break;
                case 'A':
                    action = "On/OFF"; codeAction = "A";
                    document.getElementById("taux").innerHTML="..."; 
                break;
                default:
                    action = "Erreur";
            }
            document.getElementById("action").innerHTML=action;
        }
        //choix de l'Ã©quipement (volet ou capteur)
        else if(tempi == "equipement"){
            codeEquipe = touche;
            switch(touche){                    
                case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9':
                    if(codeAction == "F" || codeAction == "O") equipe = "Volet " + touche;
                    else if(codeAction=='A') equipe = "Relais " + touche;
                break;
                case 'E':
                    equipe = "Volets cote jardin"; codeEquipe= equipe;
                break;
                case 'D':
                    equipe = "Volets cote rue"; codeEquipe=equipe;
                break;
                case 'A':
                    if(codeAction=="F" || codeAction=="O") {
                        equipe = "Tous les volets"; codeEquipe=equipe;}
                    else if(codeAction=="E") {equipe="volet(s)"; codeEquipe="A";}
                break;    
                default: equipe = "Volet inexistant";
                         action = "Erreur";
            }
            document.getElementById("equipement").innerHTML=equipe;
        }
        //paramÃ¨tres de la commande (1ere valeur)
        else if(codeAction=="O" && tx == 0 && tempa == "taux" && touche>=0 && touche<=9){
            tx = (+touche*10);
            document.getElementById("taux").innerHTML = tx.toString();
        }
        //paramÃ¨tre de la commande (2eme valeur)
        else if(codeAction=="O" && tx!=0 && touche>=0 && touche<=9){
            tx += (+touche);
            document.getElementById("taux").innerHTML = tx.toString() + "%";
        }
        //pour entree la valeur 100
        else if(codeAction=="O" && tx==0 && touche==0){
            tx=100;
            document.getElementById("taux").innerHTML="100%";
        }
        else if(codeAction=="E" && codeEquipe=="A" && touche==0){
            document.getElementById("taux").innerHTML = "tous";
            tx=0;
            demandeResult=true;
        }
        else if(codeAction=="E" && codeEquipe=="A" && touche>0 && touche<=9){
            document.getElementById("taux").innerHTML = touche; tx=touche.toString();
            demandeResult=true;
        }
        else action="Erreur";
        if(action=="Erreur") invalidEnvoi();          
    })  
})
//************************remise a zero****************************************************
function raz(){
    document.getElementById("action").innerHTML="action";
    document.getElementById("equipement").innerHTML="equipement";
    document.getElementById("taux").innerHTML = "taux";
    document.getElementById("accuse").innerHTML = "Accuse reception";
    document.getElementById("envoi").disabled = false;
    tx=0;
}
//******************** invalidation du bouton envoi en cas d'erreur ************************
function invalidEnvoi(){
    document.getElementById("envoi").disabled = true;
    alert(msgErr);
}
//*********************evenement click sur touche etat relais locaux***********************
document.getElementById("etatRel").addEventListener("click",function(){
    codeAction="E"; codeEquipe="B";
    appServeur("/API?Cmd=E&relais=B",ack);
});
//*********************evenement click sur touche etat volets *****************************
document.getElementById("etatVol").addEventListener("click",function(){
    codeAction="E"; codeEquipe="A"; tx==0;
    appServeur("/API?Cmd=E&volet=A&valeur=0",ack);
});
//*********************evenemnt click sur touche envoi**************************************
document.getElementById("envoi").addEventListener("click",function(){
    appServeur("/API?Cmd=" + codeAction + "&volet=" + codeEquipe + "&valeur=" + tx, ack);
});
//************************envoi de la commande**********************************************
function appServeur(url,fonction){
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){       //creation evenement attente d'une reception
        if(this.readyState==4 && this.status==200){
            fonction(this);
        }
    };
    //envoi de la requete par un GET l'url contient la commande API qui renvoit l'ack 
    xhttp.open("GET", url, true);
    xhttp.send();
}
//*********************execution de la fonction a l'accuse reception**********************
function ack(xhttp){
    message=xhttp.responseText;
    if(message.substring(0,2) == "Ok"){
        if(codeAction=='O' || codeAction=='F'){
            etatVol[codeEquipe-1]=tx;
            chargeEtatVolet();
        }
        else if(codeAction=="E" && codeEquipe=="A" && tx==0){
            document.getElementById("accuse").innerHTML = "Mise à jour etat des volets";
            majVolets(message.substring(2));
            chargeEtatVolet();
        }
        else if(codeAction=="E" && codeEquipe=="A" && tx !=0){
            if(message.substring(3)=="00"){  
                document.getElementById("accuse").innerHTML = "Volet " + message.substring(2,3) + " en fermeture totale";
                etatVol[tx-1]=0;
                chargeEtatVolet();
            }
            else{
                document.getElementById("accuse").innerHTML = "Volet " + message.substring(2,3) + " en ouverture de " + message.substring(3) + "%";   
                etatVol[tx-1] = message.substring(3).toInt();
                chargeEtatVolet();
            }
        }
        else if(codeAction=="E" && codeEquipe=="B"){
            document.getElementById("accuse").innerHTML = "Mise à jour etat des relais locaux";
            majRelais(message.substring(2));
        }
        else if(codeAction=="C" && message.substring(2,8)=="Relais"){
            let x =""; let z="b" + relais;
            if(mouv=="O"){
                x = "ON";
                etatRel[relais-1]= 1;
                document.getElementById(z).style.backgroundColor='red';
            }
            else{
                x="OFF"; 
                etatRel[relais-1] = 0;
                document.getElementById(z).style.backgroundColor = 'cornflowerblue';
            }
            document.getElementById("accuse").innerHTML = "Relais " + relais + ": " + x;
 
        }
 
    }
    else document.getElementById("accuse").innerHTML = "Erreur - Recommencer";
    raz();
}

Si je ne demande pas le deuxième appel (état des relais), l'état des volets se charge bien.

**mormic** · 02/11/2023, 10h43

Je viens d'inverser les deux appels:
appel état des relais en premier, appel état des volets en deuxième.

Sur le serveur, c'est bien l'appel des relais qui est monitoré en premier, mais n'est pas correctement mis à jour. par contre l'état des volets est correctement mis à jour.

Dois-je insérer un délais entre les deux appels?

**ProgElecT** · 02/11/2023, 13h08

Salut

Il faut donc attendre que le premier appel ai eu sa réponse, peut être comme ceci

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
let action="", equipe="", touche, tx=0;
let codeAction="", codeEquipe="", message="";
let etatVol = [0,0,0,0,0,0,0,0,0], etatRel = [0,0,0,0];
let NumAppel = 0; //< ------------------  Nouveau drapeau ------------------------ >
//******************chargement des etats au load de la page*******************************
window.onload = function(){
    codeAction="E"; codeEquipe="A"; tx=0;
    appServeur("/API?Cmd=E&volet=A&valeur=0",ack);  //demande l'etat des volets
 
    // l'état des relais ne sera traité qu'au retour de la demande d'état des volets dans la fonction appServeur()
    //codeAction="E"; codeEquipe="B";
    //appServeur("/API?Cmd=E&relais=B",ack);          //demande l'etat des relais
 
 
}

Modification de la fonction, déclenchement demande l'etat des relais qu'après demande l'etat des volets du window.onload

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
function appServeur(url,fonction){
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){       //creation evenement attente d'une reception
        if(this.readyState==4 && this.status==200){
            if (NumAppel>=2){
				fonction(this);
			}
            if (NumAppel==0){  // retour demande état des volets
				NumAppel=1;
				fonction(this);
				codeAction="E"; codeEquipe="B";
				appServeur("/API?Cmd=E&relais=B",ack);          //demande l'etat des relais
			}
            if (NumAppel==1){ // retour demande état des relais
				NumAppel=2;
				fonction(this);
			}
		};
    //envoi de la requete par un GET l'url contient la commande API qui renvoit l'ack 
    xhttp.open("GET", url, true);
    xhttp.send();
}

**mormic** · 02/11/2023, 15h39

Cette solution fonctionne parfaitement.
J'avais essayé sur le même principe d'un drapeau avec un while(ackRecu).
Mais en vain sans que je puisse comprendre pourquoi.

Merci ProgElect pour cette aide précieuse.

Cordialement
Michel

**NoSmoking** · 02/11/2023, 18h40

Bonjour,
point positif tu cherches à factoriser ton code avec ta fonction « fourre tout » ack.
point négatif tu utilises des variables globales, modifiables entre deux appels/retours.

Si le deuxième appel dépend du résultat du premier appel alors oui il faut le faire au retour du premier mais si ce n'est pas le cas hormis surcharger la fonction appServeur il n'y a aucun intérêt, sauf à palier au point négatif vu ci-dessus.

En effet, il ne faut pas perdre de vue que cette fonction est asynchrone, donc le retour n'est pas forcément immédiat, et le soucis est que le code JavaScript lui continu de progresser.

En gros dans ton code :

Code :

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

1
2
3
4
5
6
window.onload = function(){
    codeAction="E"; codeEquipe="A"; tx=0;
    appServeur("/API?Cmd=E&volet=A&valeur=0",ack);  // (1)
    codeAction="E"; codeEquipe="B";
    appServeur("/API?Cmd=E&relais=B",ack);          // (2)
}

Le retour de l'appel en (1) peut revenir après l'appel en (2) mais surtout entre temps tu as modifié la valeur de la variables codeEquipe que tu utilises dans ta fonction ack ce qui peut perturber tes tests et actions.

Tu pourrais avantageusement passer à ta fonction appServeur un code de traitement qu'il te suffira de transmettre à ta fonction ack.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function appServeur(url, fonction, codeTraitement) {
  let xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() { //creation evenement attente d'une reception
    if (this.readyState == 4 && this.status == 200) {
      fonction(this, codeTraitement);  // on passe l'info
    }
  };
  //envoi de la requete par un GET l'url contient la commande API qui renvoit l'ack 
  xhttp.open("GET", url, true);
  xhttp.send();
}

l'appel deviendrait, par exemple :

Code :

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

1
2
appServeur("/API?Cmd=E&volet=A&valeur=0",ack, ETAT_VOLETS);
appServeur("/API?Cmd=E&volet=A&valeur=0",ack, ETAT_RELAIS);

il te reste à définir les constantes ETAT_VOLETS et ETAT_RELAIS pour que tu t'y retrouves au mieux.

Cela te permettrais de gérer simplement les retours dans ta fonction ack avec un simple switch.

Le travail en amont est souvent plus important que le codage lui même

**mormic** · 02/11/2023, 19h24

Merci NoSmoking pour ce conseil.
Il me faut en effet revoir la structure de mon script car c'est plutôt fouillis.
C'est vrai qu'avec un switch cela deviendrait plus clair.
Je vais sauvegarder cette dernière solution qui fonctionne et me remettre au travail.
Bien cordialement

**NoSmoking** · 03/11/2023, 18h59

A la relecture je vois que je n'ai pas abordé une solution côté serveur, si tu as accès aux modifications bien sûr.

Côté serveur après réalisation des opérations de traitement on peut tout à fait retourner un objet JSON, dans ce cas, ayant la structure suivante :

Code :

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

1
2
3
4
5
{
  "status": "OK",
  "code": "le code pour traitement côté client, à définir suivant le cas et le traitement côté serveur",
  "message": "tout ce que l'on veut traiter"
}

c'est également une façon de faire qui te permet de te passer du paramétrage à passer à la requête côté client.

**mormic** · 04/11/2023, 10h44

merci NoSmoking mais je ne vois pas où placer cet envoi d'informations.
Voici comment mon serveur répond aux requêtes:

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
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
//********************initialisation du serveur**************************************
void initServeur(){
  //****pageHtml****
  serveur.on("/comVol", HTTP_GET, [](AsyncWebServerRequest *req){
    req->send(200,"text/html", pageHTML);
    clientConnected=true;
  });
  //****style.css****
  serveur.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *req){
    req->send(200, "text/css", pageCSS);
  });
  //****code.js****
  serveur.on("/code.js", HTTP_GET, [](AsyncWebServerRequest *req){
    req->send(200, "application/javascript", pageJS);
  });
  //****API****
  serveur.on("/API", HTTP_GET, [](AsyncWebServerRequest *req){
    String reponse = "" , equipement= "", taux = "", nAction = "";
    String commande[4], action[4];
    int nbArgs = req->args();
    for(int i=0;i<nbArgs;i++){
      Serial.printf("ARG[%s]: %s\n", req->argName(i).c_str(), req->arg(i).c_str());
      commande[i] = req->argName(i); action[i]=req->arg(i);
    }
    //demande ouverture volet
    if( commande[0] == "Cmd"  && action[0] == "O" && commande[1] == "volet") {
      equipement = req->arg(1);
      nAction = "Ouverture";
      taux = req->arg(2);
      reponse = "OkVolet " + equipement + " en " + nAction + " a " + taux + "%";
      req->send(200,"text/plain", reponse);
      if(taux=="100") taux="00";
      cmdCl[0]= 'O'; cmdCl[1]= equipement.charAt(0); cmdCl[2]= taux.charAt(0); cmdCl[3]=taux.charAt(1);
      cmdCl[4]='Z'; cmdCl[5]='\0';
      commandeRecu=true;
    }
    //demande fermeture volet
    else if(commande[0] == "Cmd" && action[0] == "F" && commande[1] == "volet" ){
      equipement = req->arg(1);
      nAction = "Fermeture";
      reponse = "OkVolet " + equipement + " en " + nAction + " totale";
      req->send(200,"text/plain", reponse);
      cmdCl[0]= 'F'; cmdCl[1]= equipement.charAt(0); cmdCl[2]= 'Z'; cmdCl[3]='\0';
      commandeRecu=true;
    }
    //demande etat volet(s)
    else if(commande[0] == "Cmd" && action[0] == "E" && commande[1] == "volet" ){
      equipement = req->arg(2);
      String tempo = "";
      if(equipement != "0"){    //un seul volet
        if(etat[equipement.toInt()] == 0){
        reponse = "Ok" + equipement + "00"; //en fermeture totale
        }
        else{
          tempo = (etat[equipement.toInt()] == 100)? "100" : String(etat[equipement.toInt()]-100);
          reponse = "Ok" + equipement +  tempo;
        }
        req->send(200,"text/plain", reponse);
      }
      else{               //tous les volets
        reponse = "Ok";
        for(int i=1; i<NB_VOLETS+1; i++){
          if(etat[i]== 0) tempo = "00"; else if(etat[i]==100) tempo="OT"; else tempo= String(etat[i]-100);
          reponse += tempo;
        }
        req->send(200,"text/plain",reponse);
      }
    }
    //commande relais locaux
    else if(commande[0]== "Cmd" && action[0] == "C" && commande[1] == "relais"){
      reponse = "OkRelais" + action[1] + action[2];
      req->send(200,"text/plain",reponse);
      cmdCl[0]= 'C'; cmdCl[1]= action[1].charAt(0); cmdCl[2]=action[2].charAt(0);
      cmdCl[3]='Z'; cmdCl[4]='\0';
      commandeRecu=true;  //CxO/F
    }
    //demande etat des relais locaux
    else if(commande[0]=="Cmd" && action[0]=="E" && commande[1]=="relais" && action[1]=="B"){
      String tempo=""; reponse ="Ok";
      for(int i=0;i<4;i++){
        tempo = (etatRel[i]==0)? "0":"1";
        reponse += tempo;
      }
      req->send(200,"text/plain",reponse);
    }
 
    //aucune demande valide
    else {reponse= "Commande erroné";
      req->send(200,"text/plain", reponse);
    }
    afficLigLcd(cmd,obt,DURAFF);
  });
  serveur.begin();
}

**mormic** · 04/11/2023, 16h23

je viens de lire plusieurs cours sur JSON, mais je n'arrive pas à comprendre comment intégrer cela dans mon script, comment faire un modèle JSON et y transmettre mes variables.
Les exemples dans les cours me paraissent simplistes, ou plutôt pour des données très structurées.
Ou alors cela part dans des syntaxes que mon peu de connaissances ne sait employer.
Je sais que c'est toujours plus enrichissant de trouver les choses soi-même. Mais là, je suis au delà de mes limites.
Il faut peut-être que je retourne aux programmes pour faire clignoter une led !!

**mathieu** · 04/11/2023, 16h50

la proposition de NoSmoking est dans le cas où vous vous occupez aussi du développement du serveur.
est ce que c'est le cas ? ou alors le serveur est imposé et fixe et vous devez adapter le coté client ?

**mormic** · 04/11/2023, 17h01

C'est bien moi qui m'occupe du développement du serveur.

**mathieu** · 04/11/2023, 17h32

dans ce cas dans l'api, vous pouvez créer un nouveau point de sortie "toutes_les_donnees_de_la_page_web".
et dans le code qui génère le résultat de ce point de sortie, commencez par récupérer toutes les données dont vous avez besoin.
quel langage de programmation utilisez vous pour le serveur ?

**mormic** · 04/11/2023, 17h39

C/C++ sur Visual Studio Code pour un microcontroleur ESP32

**NoSmoking** · 04/11/2023, 18h54

Tu devrais trouver ton bonheur avec « The best JSON library » ArduinoJson.

Deux appels consécutifs au serveur

JavaScript

Discussions similaires

Partager

Partager