Récupérer et afficher une valeur websocket sur une page html

Version imprimable

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

voici mon script

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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}`);
};

voici un extrait de ce qui ressort sur le log

Code:

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
index.php:36 {
    "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
}

et voici mon span id au sein de mon html

Code:

<span id="wind_speed_last"></span>

11/06/2022, 23h47
mathieu

vous pouvez faire cela par exemple pour afficher une valeur dans le code html.

Code:

document.getElementById("wind_speed_last").textContent = event["data"]["conditions"][0]["wind_speed_last"];
12/06/2022, 10h40
mykerinos1

Citation:

Envoyé par mathieu

vous pouvez faire cela par exemple pour afficher une valeur dans le code html.

Code:

document.getElementById("wind_speed_last").textContent = event["data"]["conditions"][0]["wind_speed_last"];

Bonjour et merci pour cette reponse tres tardive. j'espere que ce n'est pas ma question qui a causé votre insomnie ;).
j'ai donc essayé votre proposition mais cela ne fonctionne pas . Voici le message du log

"7index.php:78 Uncaught TypeError: Cannot read properties of undefined (reading '0')
at socket.onmessage (index.php:78:88)"

pour info , je ne sais pas si cela a une importance mais le console log affiché dans le message d origine n'apparait pas du tout comme ca, celui ci a été retouché par un admin donc je ne sais si mon log est au bon format pour etre traité correctement
je le remet tel qu'il ressort reellement.

Citation:

index.php:36 {"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}

j'ai résolu mon probleme . il fallait d’abord convertir les données au format json. Ça m a permis de bien voir l'adresse a rentrer
donc j'ai rentré
Code:

1 2 3 4 5 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"]*1000; console.log (data); };
Merci pour votre aide

13/06/2022, 10h18
SpaceFrog

L'oubli du JSON.parse ... le genre de petit détail kefren le développement...