11543 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Reception de table d'octets et conversion en valeur numerique

Bonsoir,
Je programme un esp32s3 , et pour visualiser l'état des variables je l'utilise aussi comme serveur .
Pour alléger le travail de l'esp, je souhaite mettre en place des tables d'échanges .
Coté ESP je décompose mes variables type float en 4 octets que je charge dans une table 

void handleBinaryData(AsyncWebServerRequest *request)   {
  dataSize = sizeof(tm1);
  AsyncWebServerResponse *response = request->beginResponse(200, "application/octet-stream",tm1, dataSize);
  request->send(response);
  }
  server.on("/lireTm1", HTTP_GET, handleBinaryData);

je reçois bien la table ,mais je n'arrive pas à "extraire" les octets:
setInterval(function getData()	{
        let xhttp = new XMLHttpRequest();
        let tablerec = new ArrayBuffer(250);               // données generiques pour representer un tampon de connées
        let int8View = new Uint8Array(tablerec);           // // Vue du buffer comme un tableau d'entiers non signés de 8 bits (chaque élément occupe 1 octet)
        let bufferenvoi=new ArrayBuffer(4);             // création d'un tableau de 4 octets
        let val1;

        xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) {
            tablerec=this.responseText;
            document.getElementById("valeurTm1").innerHTML = tablerec;

            bufferenvoi[0]=int8View[0];     //bufferenvoi[0]=0x0;
            bufferenvoi[1]=int8View[1];     //bufferenvoi[1]=0x0;
            bufferenvoi[2]=int8View[2];     //bufferenvoi[2]=0xB0;
            bufferenvoi[3]=int8View[3];     //bufferenvoi[3]=0X40;
     
            val1=Conv_Octet4Float32(bufferenvoi);
            document.getElementById("valeurBat1").innerHTML=val1;
        }};xhttp.open("GET", "lireTm1", true);
        xhttp.send();
        }, 2000);

Les 4 octets sont à 0 alors que le troisième octet doit être égal à 0xB0 et le quatrième octet doit être égal à 0X40
En précision, le tableau "tablerec" contient des octets reçus et int8View est vide.

En modifiant : let tablerec = new Uint8Array(250);
"lireTM1"contient bien les octets que je visualisent avec network sous edge .
Par contre "tablerec" semble contenir la représentation ascii des octets reçus.
"tablerec" devrait contenir : 0x0, 0x0, 0xB0, 0X40, 0x9A, 0x99, 0x21, 0x41, 0x0,0 x0,......
Alors que son "contenu" est :?@??!AffrA???A?A?A B Bff B ,lorsque je l'affiche avec la console.
Salut, tu utilises this.responseText qui retourne une chaîne de caractères (ASCII ou UTF-8) — pas des octets binaires purs. ça vient peut être de là.

essaye de forcer l'arrayBuffer dans la response xhttp :
xhttp.responseType = "arraybuffer";
Modifié par JENCAL (05 May 2025 - 13:14)
Bonjour,
C'est peut être la solution, mais malgré mes tests le tableau de réception est vide en apparence:

setInterval(function getData()	{
        let xhttp = new XMLHttpRequest();
        let tablerec = new ArrayBuffer;               // données generiques pour representer un tampon de connées
       let bufferenvoi=new ArrayBuffer(4);             // création d'un tableau de 4 octets
       let val1;
        xhttp.responseType = "arraybuffer"; 
        xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) {
            tablerec=xhttp.response;
          document.getElementById("valeurTm1").innerHTML = tablerec;
          console.log("buffer reception:", tablerec);
            bufferenvoi[0]=tablerec[0];    
            bufferenvoi[1]=tablerec[1];  
            bufferenvoi[2]=tablerec[2];    
            bufferenvoi[3]=tablerec[3];     
            val1=Conv_Octet4Float32(bufferenvoi);
            document.getElementById("valeurBat1").innerHTML=val1;

        }};xhttp.open("GET", "lireTm1", true);
        xhttp.send();
        }, 2000);

Sur ma page web, pour la valeur de "valeurTm1" il y a [object Arraybuffer]

J'ai trouver cette discussion : https://github-com.translate.goog/mswjs/interceptors/issues/158?_x_tr_sl=en&_x_tr_tl=fr&_x_tr_hl=fr&_x_tr_pto=sc
mais je n'ai pas la solution.
Tu essaies d’assigner des valeurs à bufferenvoi[0], etc.
ArrayBuffer ne permet pas l’accès direct par index comme un tableau.

et en plus tu affiches directement un ArrayBuffer dans le HTML
ArrayBuffer est un objet binaire, pas une chaîne affichable directement.
Modifié par JENCAL (05 May 2025 - 14:40)
Gemini IA m'a proposé une solution qui fonctionne en demandant: "en javascript utilisation de XMLHttpRequest avec responseType = "arraybuffer"; " .
Je pense que les tableaux de reception doivent être déclarées dans la "function" pour que ça marche.

setInterval(function getData()	{
        let xhttp = new XMLHttpRequest();
        let bufferenvoi=new ArrayBuffer(4);             // création d'un tableau de 4 octets 
        let val1;

        xhttp.responseType = "arraybuffer"; 
        xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) {
            var tablerec = this.response;                    
            if (tablerec) {
                var uint8View = new Uint8Array(tablerec);      
                bufferenvoi[0]=uint8View[0];  
                bufferenvoi[1]=uint8View[1];  
                bufferenvoi[2]=uint8View[2];   
                bufferenvoi[3]=uint8View[3];   
                val1=Conv_Octet4Float32(bufferenvoi);
                document.getElementById("valeurBat1").innerHTML=val1;
            } 
            else {
            console.error("La réponse ArrayBuffer est vide.");
            }
        }};xhttp.open("GET", "lireTm1", true);
        xhttp.send();
        }, 2000);

Merci
Prévenir un modérateur
Répondre au sujet
Aller à