je vous préviens tout de suite, je débute en Javascript et tout ce qui en approche, alors ne me tapez pas tout de suite. Pour le reste, je me débrouille à peu près en html et css.
Voilà mon problème.
Pour une page (html) concernant une installation domotique, j'ai des données qui sont affichées, extraites d'une requête json.
Ces données sont affichées dans des div, et ainsi sont affichés, par exemple, 21°C pour la température, ON ou OFF pour les lumières etc.
Le soucis est que toutes ces infos ne se mettent pas à jour automatiquement sur la page. Si par exemple, la lumière de la salle est allumée, elle reste sur OFF sur la page. Il faudrait la voir passer à ON.
D'après ce que j'ai compris, il semble que je doive passer par ajax. J'ai essayé plusieurs choses, sans arriver à mes fins.
Mon souhait est de rafraîchir l'affichage de seulement ces div, et non la page entière, toutes les X secondes.
Ça doit être évident pour nombre d'entre vous, mais quand on débute, c'est autre chose. J'imploire donc votre indulgence, et je ne cherche qu'à apprendre et comprendre.
Pour plus de clarté, j'ai mis le getJSON... dans une fonction "rafraichdonnees" (j'espère avoir bien fait), ce qui donne cela :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="essai10.css">
</head>
<body>
<div id="ensemble">
<div class="case01">
<div class="case01-donnee-unites">
<div id="tempsalle" class="case01-donnee">
</div>
<div class="case01_unites">
°C
</div>
</div>
<div id="majtempsalle" class="case01-infos">
</div>
<div id="nametempsalle" class="case01-titre">
</div>
</div>
<div class="case01">
<div class="case01-donnee-unites">
<div id="lumsalle" class="case01-donnee onoff">
</div>
</div>
<div id="lumsallemaj" class="case01-infos">
</div>
<div id="lumsallename" class="case01-titre">
</div>
</div>
<div class="case01">
<div class="case01-donnee-unites">
<div id="tempexter" class="case01-donnee">
</div>
<div class="case01_unites">
°C
</div>
</div>
<div id="majtempexter" class="case01-infos">
</div>
<div id="nametempexter" class="case01-titre">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() // "$" est la forme abrégée du mot-clé "jQuery". Cette ligne permet de passer au code javascript que lorsque le DOM (en gros le code HTML interprété par le navigateur) est chargé et fonctionnel.
{
function rafraichdonnees()
{
$.getJSON("http://192.xxx.xx.xxx:xxxx/json.htm?type=devices&filter=all&used=true&order=Name", function(result)
{ // Temp Salle
document.getElementById("tempsalle").innerHTML +=
result.result[21].Temp;
document.getElementById("majtempsalle").innerHTML +=
result.result[21].LastUpdate;
document.getElementById("nametempsalle").innerHTML +=
result.result[21].Name;
// Lum Salle
document.getElementById("lumsalle").innerHTML +=
result.result[5].Data;
document.getElementById("lumsallemaj").innerHTML +=
'Mise à jour le : ' + result.result[5].LastUpdate;
document.getElementById("lumsallename").innerHTML +=
result.result[5].Name;
// Temp Exterieur
document.getElementById("tempexter").innerHTML +=
result.result[26].Temp;
document.getElementById("majtempexter").innerHTML +=
result.result[26].LastUpdate;
document.getElementById("nametempexter").innerHTML +=
result.result[26].Name;
});
}
setInterval(rafraichdonnees, 2000) ;
});
</script>
</body>
</html>
Le problème est que maintenant les données rafraîchies s'affichent les unes après les autres, sans remplacer la précédente (j'espère être assez clair ).
J'ai par exemple pour une température de "18.6" : "18.6", puis "18.618.6", puis "18.618.618.6" etc.
Je pense qu'il doit falloir remettre à zéro quelque part, avec peut-être un "clearInterval" ?
Pour insérer tes données, tu fais element.innerHTML += value
l'opérateur += incrémente la valeur précédente. Pour la remplacer il suffit d'utiliser =
clearInterval vas être utile lorsque tu veux changer de page ou que tu n'as plus besoin de refresh. C'est pour ça que je trouve les timeout un peu plus intéressants.
si je reformule ce que tu veux, c'est que ton serveur envoie des données à ton client (ta page web) quand un truc change, pour que la page web se mettent à jour.
Pour ça tu à trois possibilités la première (le polling) ce que tu fait maintenant, tu demande toutes les x secondes, mais c'est gourmant en ressources.
La seconde tu envois une requêtes ajax, mais ton serveur ne répond que quand il à une donnée. quand le client reçoit une réponse il renvoi une nouvelle requête. ça fonctionne mais c'est pas joli.
La troisième solution (la mieux selon moi) est d'utiliser des socket. en gros ton client écoute un event venant du serveur et ne pause pas de question, c'est le serveur qui le notifie quand quelque chose change.
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Petit bémol sur les socket : si le serveur envoie le message d'update alors que le socket est déconnecté, tu ne reçois pas le message tu peux toujours gérer ce cas, mais ça entraine beaucoup plus de complexité que le polling.
Petit bémol sur les socket : si le serveur envoie le message d'update alors que le socket est déconnecté, tu ne reçois pas le message tu peux toujours gérer ce cas, mais ça entraine beaucoup plus de complexité que le polling.
effectivement, tu dois faire un choix entre la complexité du code(que tu n'est pas obligé de gérer) et la consommation de ressources.
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Si tu part sur du websocket sans gérer l'histoire des déconnexions, tu as un refresh bancal. C'est peut-être moi mais je trouve que ça ne sert pas à grand chose du coup, autant ne pas refresh (ou faire un bouton dans le client). Si tu décide de gérer la déconnexion, il faut la gérer côté client, côté serveur, et mettre en place un système de pub/sub, potentiellement connecté à une bdd ... c'est beaucoup, que ce soit niveau code ou ressources utilisées.
perso je n'utilise pas apache (donc je sais pas comment c'est géré) mais avec nodejs tu te connecte et ça fonctionne direct, si tu perd la connexion au serveur, tu n'a pas de socket, mais des que la connexion revient, tu te reconnecte au serveur sans avoir rien à faire.
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
avec nodejs tu te connecte et ça fonctionne direct, si tu perd la connexion au serveur, tu n'a pas de socket, mais des que la connexion revient, tu te reconnecte au serveur sans avoir rien à faire.
Et comment tu reçois tous les messages perdus à cause de la déconnexion ? La reconnexion automatique ne marche pas avec les websockets de base, il faut passer par une lib. Ce que tu considère comme "sans avoir rien à faire" c'est pas rien en fait. Je décris bien un système marchant sous nodejs et c'est pareil pour apache
ah oui, ok je suis d'accord j'utilise bien une lib, je veux dire qu'on à pas besoin de le faire à la main :D, et vu son cas d'utilisation je pense pas que les messages perdus en cas de déconnection le dérange :D.
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Du coup, tu créer une dépendance à une lib pour utiliser les fonctionnalités de reconnexion, et serveur websocket pour refresh 5 données, et tu penses que c'est plus léger qu'une requête http toutes les X sec ? J'ai un gros doute. D'autant plus que du coup, tu n'es pas sur que ta donnée est bien actualisée ... Utiliser les websockets pour refresh c'est bien sur une grosse appli, mais pour un cas comme ça c'est overkill ou bancal =/
Un grand merci à vous, en remplaçant les += par =, ça fonctionne.
Pour le reste, votre discussion est très intéressante, mais j'avoue m'y perdre
En tout cas, oui, en effet, les messages perdus ne me dérangeraient pas plus que ça.
Mais pour le reste, ça me semble bien complexe à mettre en place pour mon niveau. Mais je ne demande qu'à apprendre.
Sinon, autre question (je ne sais pas si je dois ouvrir un autre sujet ou rester ici ?)
Quand une lampe est sur Off, ça m'affiche "Off". Très bien.
Par contre, quand elle est sur ON, la valeur de Data fournie est "Set Color", et m'affiche donc "Set Color"
Comment puis-je transformer ce "Set Color" en "On" ?
Et dans le même esprit, la valeur affichée de LastUpdate est, par exemple, "2019-02-13 17:27:28". Est-ce que je peux l'afficher en "Dernière mise à jour le 13/02/2019 à 17h27" ?
Merci à vous en tout cas pour votre patience et votre aide.
Un grand merci pour ton aide, ox223252, ça marche très bien pour le "Set Color".
Pour la date et heure, je ne sais pas si j'ai fait au mieux mais ça marche, au moins pour l'heure sans problème.
Au lieu d'utiliser la date et l'heure renvoyées par le jSON sous la forme "2019-02-19 04:34:18", j'ai utilisé celles de new Date() de Javascript. Et les ai sorties du rafraîchissement toutes les 5 secondes des données jSON pour moins surcharger (enfin j'espère) et avoir leur propre setInterval.
N'hésitez pas à commenter, critiquer... c'est là pour ça et j'apprends.
Pour l'heure, j'ai donc fait ceci :
// heure
function heureDuJour() {
var heur = new Date().getHours();
var min = new Date().getMinutes();
if(min < 10)
min = "0" + min;
var sec = new Date().getSeconds();
var texteDate = (heur + "h " + min + "mn et " + sec + "s");
document.getElementById('heure').innerHTML = texteDate;
}
setInterval(heureDuJour, 1000);
puis pour la date :
// Date function dateDuJour() {
var jotab = new Array("Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche" );
var jo = jotab[new Date().getDay() - 1];
var dateJour = new Date().getDate();
var motab = new Array("Janvier", "Février", "Mars", "Avril", "Mais", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" );
var mo = motab[new Date().getMonth()];
var ann = new Date().getFullYear();
var texteHeure = (jo + " " + dateJour + " " + mo + " " + ann);
document.getElementById('datejour').innerHTML = texteHeure;
}
setInterval(dateDuJour, 600000);
Mais pour la date, je bloque sur sa mise à jour. J'ai mis un rafraîchissement toutes les10mn, mais est-il possible de faire un rafraîchissement à une heure précise, c'est-à-dire quand la date du jour change (genre à 0h00mn01s), puisqu'elle ne va pas changer le reste du temps ?
Et autre chose, quand la page s'affiche, la date ne s'affiche qu'au bout de 10mn du coup.
Comment faire pour qu'elle s'affiche dès le chargement de la page, puis ensuite toutes les 10mn.
Je rencontre le même problème pour les données jSON qui ne s'affichent que 5 secondes après le chargement de la page.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Mon GitHub
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Mon GitHub
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Mon GitHub
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Mon GitHub
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Mon GitHub
la connaissance est une chose qui ne nous appauvrit pas quand on la partage.
Mon GitHub