Recuperer et afficher une valeur websocket sur une page html

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
mykerinos1
Messages : 12
Enregistré le : 25 mai 2022, 07:57

Recuperer et afficher une valeur websocket sur une page html

Message par mykerinos1 » 11 juin 2022, 15:34

Je souhaite insérer des valeurs d'un capteur de vent en direct sur une page Html. J'opte pour cela par Node red et le node websocket. J'ai fait le test de réception en utilisant l'extension Chrome "simple websocket client" et je reçois bien mes données. Hélas je ne maîtrise pas trop javascript pour faire ressortir ces valeurs sur ma page web. Je voudrais afficher uniquement les données "wind_speed_last". comment faire ? Merci

Code : Tout sélectionner


let socket = new WebSocket("ws://192.168.86.84:1880/endpoint/test");
 //socket.onopen = function(e) {
 // alert("[open] Connection etablie");
//alert("Sending to server");
//};
socket.onmessage = function (event) {
console.log (event.data);
};
socket.onclose = function(event) {
if (event.wasClean) {
alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
// par exemple : processus serveur arrêté ou réseau en panne
// event.code est généralement 1006 dans ce cas
alert('[close] Connection died');
}
};
socket.onerror = function(error) {
alert(`[error] ${error.message}`);
};

consolelog des donnees recues
{"data":{"did":"001D0A71121E","ts":1654941133,"conditions":[{"lsid":340707,"data_structure_type":1,"txid":1,"temp":74.5,"hum":61.9,"dew_point":60.6,"wet_bulb":64.2,"heat_index":74.9,"wind_chill":74.5,"thw_index":74.9,"thsw_index":null,"wind_speed_last":3,"wind_dir_last":314,"wind_speed_avg_last_1_min":2.93,"wind_dir_scalar_avg_last_1_min":60,"wind_speed_avg_last_2_min":2.93,"wind_dir_scalar_avg_last_2_min":62,"wind_speed_hi_last_2_min":5,"wind_dir_at_hi_speed_last_2_min":51,"wind_speed_avg_last_10_min":3.37,"wind_dir_scalar_avg_last_10_min":null,"wind_speed_hi_last_10_min":8,"wind_dir_at_hi_speed_last_10_min":92,"rain_size":2,"rain_rate_last":0,"rain_rate_hi":0,"rainfall_last_15_min":0,"rain_rate_hi_last_15_min":0,"rainfall_last_60_min":0,"rainfall_last_24_hr":0,"rain_storm":0,"rain_storm_start_at":null,"solar_rad":null,"uv_index":null,"rx_state":0,"trans_battery_flag":0,"rainfall_daily":0,"rainfall_monthly":308,"rainfall_year":943,"rain_storm_last":45,"rain_storm_last_start_at":1654667821,"rain_storm_last_end_at":1654790460},{"lsid":340706,"data_structure_type":4,"temp_in":79.1,"hum_in":45.9,"dew_point_in":56.5,"heat_index_in":78.7},{"lsid":340705,"data_structure_type":3,"bar_sea_level":30.24,"bar_trend":0.003,"bar_absolute":29.069}]},"error":null}

Avatar du membre
webmaster
Administrateur du site
Messages : 466
Enregistré le : 28 févr. 2017, 15:19

Re: Recuperer et afficher une valeur websocket sur une page html

Message par webmaster » 11 juin 2022, 20:26

Bonjour

C'est facile
Dans le body, il faut ajouter un div avec id

Code : Tout sélectionner

<div id="vent"></div>
Et à la place de

Code : Tout sélectionner

console.log (event.data);
on ajoute :

Code : Tout sélectionner

var data=JSON.parse(event.data) //pour transformer le retour texte en JSON
document.getElementById("vent").innerHTML=data.wind_speed_last
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

mykerinos1
Messages : 12
Enregistré le : 25 mai 2022, 07:57

Re: Recuperer et afficher une valeur websocket sur une page html

Message par mykerinos1 » 12 juin 2022, 11:02

Bonjour.
Déja merci pour ton aide.
La valeur apparait comme "undefined" sur ma page web. voici le console log de "data"
Image
Fichiers joints
Capture d’écran 2022-06-12 105925.png
copie ecran log
Capture d’écran 2022-06-12 105925.png (35.42 Kio) Vu 202 fois

mykerinos1
Messages : 12
Enregistré le : 25 mai 2022, 07:57

Re: Recuperer et afficher une valeur websocket sur une page html

Message par mykerinos1 » 12 juin 2022, 11:18

webmaster a écrit :
11 juin 2022, 20:26
Bonjour

C'est facile
Dans le body, il faut ajouter un div avec id

Code : Tout sélectionner

<div id="vent"></div>
Et à la place de

Code : Tout sélectionner

console.log (event.data);
on ajoute :

Code : Tout sélectionner

var data=JSON.parse(event.data) //pour transformer le retour texte en JSON
document.getElementById("vent").innerHTML=data.wind_speed_last

j'ai fini par trouver grace a ton aide. Seul l adrese etait a corriger
voila ce que j'ai mis

Code : Tout sélectionner

 socket.onmessage = function (event) {
var data=JSON.parse(event.data) //pour transformer le retour texte en JSON
document.getElementById("vent").innerHTML=data["data"]["conditions"][0]["wind_speed_last"];
console.log (data);
};
Merci beaucoup

Répondre