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

Deux appels consécutifs au serveur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager