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

**mykerinos1** · 11/06/2022, 18h12

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 :

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
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 :

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
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 HTML :

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

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

**mathieu** · 11/06/2022, 23h47

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

Code :

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

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

**mykerinos1** · 12/06/2022, 10h40

Envoyé par mathieu

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

Code :

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

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.

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}

**mykerinos1** · 12/06/2022, 11h35

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 :

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

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