Forums Tout JavaScript

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}

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

Bonjour.
Déja merci pour ton aide.
La valeur apparait comme "undefined" sur ma page web. voici le console log de "data"

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

Forums Tout JavaScript

Recuperer et afficher une valeur websocket sur une page html

Recuperer et afficher une valeur websocket sur une page html

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

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

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