Discussion :

[mormic]

Bonjour à tous
Après des heures passées à chercher ça et là des idées pour résoudre mon problème, j'en appelle à nouveau à ce forum.
Je stocke les données saisies par un client dans une variable texte msg.
J'essaie d'envoyer ce texte au serveur par un POST avec XMLHttpRequest:

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
//************************envoi de la saisie**********************************************
function prgServeur(url,fctRetour){
    let zhttp = new XMLHttpRequest();                   //création de l'objet AJAX  
    zhttp.onreadystatechange = function(){              //creation evenement attente d'une reception
        if(this.readyState==4 && this.status==200){     //si message est bien reçu par le serveur 
            fctRetour(this);                            //exécute la fonction retour
        }
        else if(this.readyState && this.status==408){
            alert("Le serveur a rompu la liaison");
            return;
 
        }
    };
    //envoi de la saisie par un POST, le serveur renvoit l'ack 
    zhttp.open("POST", url, true);
    zhttp.setRequestHeader("Content-Type","Text/Plain");
    zhttp.send(msg);
}
//********************** traitement du message  retour ***************************
function retour(zhttp){
    let reponse = zhttp.responseText;
    alert(reponse);
}

Pas de réponse du serveur.
J'essaie aussi avec fetch:

Code :

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

1
2
3
4
5
6
7
8
9
10
function prgServeur(url){
    fetch(url, {
        method: 'POST',
        headers:{"Content-Type": "Text/Plain"},
        body: msg,
    })
    .then((response) => {
        alert(response);
    });
}

Toujours pas de réponse.
Je pense que mon message ne part pas.
Auriez vous une piste?

[ASCIIDEFOND]

Salut mormic,

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
    fetch(url, {
        method: 'POST',
        body: JSON.stringify(msg),
        headers: { "Content-Type" : "Text/Plain" }
    })
        .then(response => response.text())
        .then(reponse => {
            alert(response);
        })
        .catch(err => console.log(err));

[mormic]

Merci ASCIIDEFOND pour cette réponse mais le serveur n'attend pas un objet JSON mais simplement du texte (à ski de fond).
Le Content_Type le précise bien avec Text/Plain.

Je vais de suite modifier le .then avec ta proposition.

[ASCIIDEFOND]

body: JSON.stringify(msg),

Désolé, un copier-coller que je n'ai pas corrigé

[NoSmoking]

Bonjour,
plus que ta façon d'envoyer les données, mais utilise l'API Fetch, c'est la façon dont tu les lis côté serveur qui pêche !
Avec :

Code :

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

1
2
3
4
5
6
7
8
9
fetch(url, {
    method: 'POST',
    body: "Evoi d'un simple texte",
  })
  .then(response => response.text())
  .then(reponse => {
    console.log(response);
  })
  .catch(err => console.log(err));

côté serveur, il te faut récupérer les données avec :

Code php :

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

$data = file_get_contents('php://input');

[mormic]

Merci NOSMOKING pour ta remarque

c'est la façon dont tu les lis côté serveur qui pêche !

Tu as raison car en consultalt la console je vois ces meessages:

Par contre je n'utilise php.
Mon serveur est embarqué dans un microcontroleur ESP32 programmé en C/C++ avec PlateformIO et j'utilise une librairie
asyncWebServer:

Code :

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

1
2
3
4
5
6
7
8
9
//****API****
  serveur.on("/API&Cmd=2AA", HTTP_POST, [](AsyncWebServerRequest *req){ 
    req->send(200, "text/plain", "OK");
    String x = req->getHeader(x)->value();
    afficLcd2String(x,"");
    String message = req->getParam(message)->value();
    afficLcd2String(message,"");
    delai('s',5);   
  });

Peut-être que cela ne vous parle pas et qu'il faille que je m'adresse au forums Arduino/ESP32?

[NoSmoking]

Peut-être que cela ne vous parle pas et qu'il faille que je m'adresse au forums Arduino/ESP32?

effectivement car dans ton code il y a des choses qui piquent les yeux

Entre autres, des variables semble t-il non déclarées : String message = req->getParam(message)->value();, que vaut par exemple message ?

De plus il te faudra surement envoyer tes messages de la forme "msg=Le contenu" ou JSON.stringify({msg:"Le contenu"}) si tu veux récupérer un paramètre nommé msg.

Commence donc par faire un test avec simplement

Code :

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

1
2
3
  serveur.on("/API&Cmd=2AA", HTTP_POST, [](AsyncWebServerRequest *req){ 
    req->send(200, "text/plain", "OK");
  });

[mormic]

Bonjour NOSMOKING
J'ai modifie côté serveur ainsi:

Code :

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

1
2
3
4
5
6
//****API****
  serveur.on("/API&Cmd=2AA", HTTP_POST, [](AsyncWebServerRequest *req){ 
    req->send(200, "text/plain", "OK");
    int nbParams = req->params();
    afficLcd2String("nb param",String(nbParams));
});

Côté client j'ai maintenant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function prgServeur(url){
    fetch(url, {
        method: 'POST',
        headers:{"Content-Type": "Text/Plain"},
        body: msg
    })
        .then(response => response.text())
        .then(response => alert(response))
        .catch(err => {console.log(err),
                        alert(err)});
}

La console log indique maintenant ceci:

Ce qui semblerait dire que le fetch n'est pas bien chargé. Y a-t'il une limitation dans le nombre de caractères envoyés?
Voici comment je constitue le message msg:

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
function lectureSaisie(){
    msg = "dest:" + touche + ",";
    progNum=document.getElementById("prog_num").value;
    msg += "pg:" + progNum;
    for(let i=0;i<10;i++){
        adEquipe[i]= document.querySelector("#m" + i + " .equipe_add").value;
        numRelais[i]= document.querySelector("#m" + i + " .n_relais").value;
        paramAction[i] = document.querySelector("#action" + i + " .taux").value;
        heureAction[i] = document.querySelector("#action" + i + " .hr").value;
        let y = "equip" + i;
        let x = document.querySelectorAll("input[name=" + y + "]");
        typeEquipe[i] = "0";
        for(let z of x){
            if(z.checked) {
                typeEquipe[i]= z.value;
                break;
            }
        }
        y = "acte" + i;
        x = document.querySelectorAll("input[name=" + y + "]");
        typeAction[i] = "0";
        for(let z of x){
            if(z.checked) {
                typeAction[i]= z.value;
                break;
            }
        }
    msg += ",man:" + i + ",adE:" + adEquipe[i] + ",nRl:" + numRelais[i] + ",tEq:" + typeEquipe[i] +
    ",tAc:" + typeAction[i] + ",pAc:" + paramAction[i] + ",hAc:" + heureAction[i];
    }   
}

Le problème vient peut-être de là. Je ne vois pas comment le convertir en JSON.

[Toufik83]

Bonjour,

Personnellement, je n'ai jamais eu ce genre d'erreur, mais en cherchant un peu sur google et stackoverflow, j'ai trouvé pas mal de discussions concernant le même sujet, les voici :
Sujet1
Sujet 2.

Ils parlent tous du même problème lié aux extensions google chrome, je ne sais pas si vous avez essayé un autre navigateur...

[mormic]

Merci Toufik pour cette piste.
Je viens d'enlever les extensions Google Chrome et en effet les deux premiers messages d'erreur ont disparus.
Il ne reste plus que:

Mais là c'est une autre histoire!

Je viens de trouver une grosse anomalie:
Dans mon serveur j'ai écrit:

Code :

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

serveur.on("/API&Cmd=2AA", HTTP_POST, [](AsyncWebServerRequest *req){

Alors que mon url doit-être "/API?Cmd=2AA". Voilà j'ai mis un & à la place du ? je suis vraiment nul parfois.

Il ne reste plus que:

[Toufik83]

Bonjour,

2 erreurs ont disparu c'est déjà un bon départ, mais je me demande aussi si tu as accès au code source de l'API ou bien au moins s'assurer qu'elle accepte les variables HTTP_POST ou bien GET ou PUT ?

Parce que d'après le code d'erreur 500, le problème est généralement lié a une mauvaise configuration du serveur, il faudrait donc trouver le fichier LOG qui enregistre les messages d'erreurs de chaque requête enoyée.

Concernant les paramètres de la requête, seulement le premier qui doit être précédé par un point d'intérrogation "?", les autres doivent être précédés par un "ET commercial &"

Dernier point, si tu utilises GET au lieu de POST serveur.on("/API?Cmd=2AA", HTTP_GET, [](AsyncWebServerRequest *req), des erreurs, ça passe... ?

[mormic]

Bonjour Toufik
Oui si j'utilise GET cela passe parfaitement; d'ailleurs j'initialise déjà mon serveur pour recevoir plusieurs commandes et je viens de rajouter un GET avec la commande "2AA" qui affiche bien sur le serveur et qui me renvoit bien "Hello" au client:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
serveur.on("/API", HTTP_GET, [](AsyncWebServerRequest *req){
    if(!clientConnected){
      req->send(408,"text/html", "Timeout");
      return;
    }
    String commande[8], action[8];
    int nbArgs = req->args();
    for(int i=0;i<nbArgs;i++){
      commande[i] = req->argName(i); action[i]=req->arg(i);
    }
    if(commande[0]=="Cmd" && action[0]=="2AA"){
      afficLcd2String("Get recu", "ack envoye");
      req->send(200,"text/plain", "Hello");
    }

Donc c'est vraiment la syntaxe du POST qui ne va pas.
***************************************************************
Je viens de trouver où se situe le problème:
Pour transmettre mon POST, j'utilise l'URL "/API" mais pour revevoir des GET j'utilise aussi "/API" ce qui créer une confusion au niveau du serveur. J'ai remplacé l'URL du POST par "/Toto" et voilà, ça fonctionne parfaitement.
Désolé d'avoir remué ciel et terre pour une bétise comme un débutant sait en faire.
Quoi qu'il en soit je vous remercie d'avoir contribué à me sortir de l'ornière.

Bien cordialement
Michel

[Toufik83]

Bonjour,

Content que tu as pu résoudre le problème, mais ceci n'empêche pas d'optimiser l'API et de renvoyer un message d'erreur clair aux utilisateurs lorsque :

• La méthode utilisée est POST, mais un ou plusieurs paramètres existent dans l'url
• La méthode utilisée est GET, mais aucun paramètre n'existe dans l'url

C'est une erreur bloquante qui empêche totalement le fonctionnement du programme, il faudrait donc la gérer.
En faite, c'est seulement ce que je pense ..., rien ne t'obliges à le faire tout de suite.

[mormic]

Bonjour Toufik
En fait, dans mon programme existant, mon url /API...GET traite une quinzaine de commandes avec gestion des erreurs et message renvoyé au client. Tout cela fonctionne bien.
Voulant faire évoluer le prog par l'envoi de données émanant du client, je pensais que la librairie saurait faire le distingo entre une /API...GET et une /API...POST avec la somme d'ennuis générés.
Le fait de mettre une commande quelconque (/Toto...POST) j'ai enfin eu une réponse du serveur. Non satisfaisante car j'ai un message "Non reçues".

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
const char* MSG="message";
serveur.on("/Toto", HTTP_POST, [](AsyncWebServerRequest *req){
    String msg ="";
    if(req->hasParam(MSG,true)){
      msg=req->getParam(MSG,true)->value();
    }
    else{
      msg="Non recues";
    }
    req->send(200, "text/plain", msg);     
    afficLcd2String("Reception", msg.substring(0,15));     
  });

Il me reste maintenant à découvrir comment simplement récupérer les données envoyées par le client.
Les explications sur la librairie ESPAsynWebServer son difficiles à comprendre pour un amateur et souvent cela se résume à pomper des exemples pris sur le Net sans vraiment piger le pourquoi du comment.
Je continue donc mes investigations.

Merci encore pour ton implication.