Comment transférer des données sans avoir a actualiser une page Web

Hello hello,
Suite à l'achat de mon esp8266, je me suis lancé à sa découverte.
Pour cela je me suis muni d'un dht22 et j'aimerais avoir la température et l'humidité sur une page Web.
Jusque là tout va bien, j'ai réussi à combiner le dht22 à la bibliothèque WifiManager, j'ai bien ma page web avec l'ip de l'esp sur laquelle j'ai les données.
Seulement, il faut sans cesse actualiser la page pour avoir un transfert de données de l'esp vers le web, est-ce possible que ce transfert ai lieu sans actualiser la page ? C'est a dire qu'en restant sur la page, sans rien faire, on aurait les données qui varient si on souffle sur le capteur par exemple.
Merci d'avance :slight_smile:

Le code :

/* 
Objet : Serveur web temperature et humidité avec un esp8266-01
Nom : phmo_temp_hum_esp_dht_1.ino
Infos sketch : 
- Créé le 12 jan 2016 sur la base des exemples des bibliotheques Arduino par PHMO
*/

// ajout des bibs ESP8266 WiFi et sonde dht
#include <ESP8266WiFi.h>
#include "DHT.h"
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>  

// la sonde est de type dht22
#define DHTTYPE DHT22   // DHT 22 

//// remplacer par le nom et mot de passe de votre reseau wifi
//const char* ssid = "Livebox-AF70";
//const char* password = "m9Hn37ybkusk4pRCcf";

// definition d'un serveur web ecoutant sur le port 80
WiFiServer server(80);

// la sonde dht est connectee sur le port GPIO2 de l esp8266-01
const int DHTPin = D2;
// instanciation objet dht
DHT dht(DHTPin, DHTTYPE);

// variables de travail
static char celsiusTemp[7];
static char humidityTemp[7];

// trt d init
void setup() {
 // init liaison serie
 Serial.begin(115200);
 delay(10);


   //WiFiManager
   //Local intialization. Once its business is done, there is no need to keep it around
   WiFiManager wifiManager;
   //reset saved settings
   //wifiManager.resetSettings();
   
   //set custom ip for portal
   //wifiManager.setAPStaticIPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));

   //fetches ssid and pass from eeprom and tries to connect
   //if it does not connect it starts an access point with the specified name
   //here  "AutoConnectAP"
   //and goes into a blocking loop awaiting configuration
   wifiManager.autoConnect("AutoConnectAP");
   //or use this for auto generated name ESP + ChipID
   //wifiManager.autoConnect();

   //if you get here you have connected to the WiFi
   Serial.println("connected...yeey :)");

 dht.begin();
 
 // connexion au wifi
 Serial.println();
 Serial.print("lancement connexion au reseau wifi :  ");
 //Serial.println(ssid);
 
//  WiFi.begin(ssid, password);
 
 while (WiFi.status() != WL_CONNECTED) {
   delay(500);
   Serial.print(".");
 }
 Serial.println("");
 Serial.println("connexion au WiFi OK");
 
 // demarrage serveur web
 server.begin();
 Serial.println("le serveur web est lancé, attente fourniture ip locale de l esp ...");
 delay(1000);
 
 // affichage adresse ip locale
 Serial.println(WiFi.localIP());
}

// boucle de traitement
void loop() {
 // attente client web
 WiFiClient client = server.available();
 
 if (client) {
   Serial.println("detection dune nouvelle demande client web .....");
   // bolean to locate when the http request ends
   boolean blank_line = true;
   while (client) {
     if (client.available()) {
       char c = client.read();
       
       if (c == '\n' && blank_line) {
           // lecture humidite
           float h = dht.readHumidity();
           // lecture temperature
           float t = dht.readTemperature();
           // verif si lecture dht22 ok
           if (isnan(h) || isnan(t)) {
             Serial.println("impossible de lire les donnees du dht22 !!!!!!!");
             strcpy(celsiusTemp,"probleme");
             strcpy(humidityTemp, "probleme");         
           }
           else{
             // lecture de la sonde ok, envoi des elements sur le port serie
             float hic = dht.computeHeatIndex(t, h, false);       
             dtostrf(hic, 6, 2, celsiusTemp);                    
             dtostrf(h, 6, 2, humidityTemp);
             // envoi des message sur la console serie
             Serial.print("Humidite : ");
             Serial.print(humidityTemp);
             Serial.print(" %\t Temperature : ");
             Serial.print(celsiusTemp);
             Serial.print(" *C ");
           }
           // envoi des données au client web
           client.println("HTTP/1.1 200 OK");
           client.println("Content-Type: text/html");
           client.println("Connection: close");
           client.println();
           // your actual web page that displays temperature and humidity
           client.println("<!DOCTYPE HTML>");
           client.println("<html>");
           client.println("<head></head><body><h1>ESP8266 - Temperature and Humidite</h1><h3>Temperature en Celsius : ");
           client.println(celsiusTemp);
           client.println("*C</h3><h3>Humidite : ");
           client.println(humidityTemp);
           client.println("%</h3><h3>");
           client.println("</body></html>");     
           break;
       }
       if (c == '\n') {
         // premiere ligne a blanc
         blank_line = true;
       }
       else if (c != '\r') {
         // lignes suivantes avec du contenu
         blank_line = false;
       }
    }
   }  
   // fermeture connexion client
   delay(1);
   client.stop();
  Serial.println("client web deconnecte ____________________");
   
 }
 delay(5000);
}
           client.println("HTTP/1.1 200 OK");
           client.println("Content-Type: text/html");
           client.println("Connection: close");
           client.println("Refresh: 5");
           client.println();

Remplace 5 par la valeur désirée en secondes.

Ca refresh la page et met a jour les valeurs certes, mais j'aimerais éviter le refresh.
A mon avis cela ne doit pas être possible en html.
Ce que j'aimerais, c'est que mes données évoluent en gardant la page chargée, sans refresh.
Si ce n'est pas possible, j'attendrais d'évoluer dans le projet avant de m'y atteler.
Sinon des idées pour gérer un site web accessible partout ?
J'aimerais que les données du capteur soit accessibles partout dans le monde.
Pour cela je pensais utiliser un vieux pc à recycler en serveur pour m'en servir comme base de données.
Le capteur envoie ses données au serveur tous les x temps, et le site internet ou une future application interroge cette base de données pour avoir les valeurs. Ca éviterais d'avoir un site html dégueu codé sur l'esp et ca permettrais de faire quelque chose de plus esthétique pour y intégrer par la suite d'autres infos. Pour l'instant je ne rajoute pas de capteurs, j'éssaye de tout mettre en oeuvre avec le dht plutot que me compliquer la tache avec pleins de valeurs à gérer, plus simple pour moi comme je débute sur l'esp et le web.
Du coup est-ce que ca paraît faisable ? Si oui auriez-vous quelques pistes ?

Sachant qu'à l'avenir, ce sera un module complet installé dans plusieurs pièces de la maison, donc les sites internet qui gèrent des bases de données payant ne sont pas dans mes options. Je préférerais tout faire moi même.
De plus, d'autres modules pourraient être situés dans d'autres maisons, c'est possible qu'ils aient aussi accès à la base de données ?
L'idéal c'est qu'il n'y ai aucune manip complexe a faire du style redirection des ports et tout.
Merci d'avance :wink:

Bonsoir,

Tu peux transférer sur thingspeak, il est gratuit pour gérer 4 canaux et les mises à jour sont automatiques toutes les 15 secondes en dessous, il faut payer. On peut lire les données de partout.

Une autre solution consiste à transferer via Udp ou autre sur un raspberry et stocker dans une base comme par exemple influxdb lisible graphiquement avec grafana.

Problème ça reste local.

Bonsoir

je vais dans le même sens que Lacuzon

Pour suivre des données sous forme de graphes 'de puis partout' la solution 'cloud' ThinkSpeak est intéressante et facile à mettre en oeuvre. (HTTP ou MQTT)
Avec la version gratuite on peut mettre à jour toutes les 15 secondes jusqu'à 32 graphes (4 'canaux' de 8 graphes = 4 pages de 8 courbes)
Bonus : Matlab est disponible gratuitement en arrière plan pour effectuer des traitements sur les données envoyées et produire des graphes issus de ces traitrements.. + la boite à outils Matlab est particulièrement bien fournie....

Pour InfluxDB + Grafana il existe une offre 'cloud' gratuite chez Corlysis, 'accessible de partout'
On peut y dessiner un grand nombre de tableaux de bords

Ceci dit une redirection de quelques ports vers un Rasberry PI faisant tourner par exemple InfluxDB et Grafana ce n'est pas sorcier

Ca refresh la page et met a jour les valeurs certes, mais j'aimerais éviter le refresh.
A mon avis cela ne doit pas être possible en html.
Ce que j'aimerais, c'est que mes données évoluent en gardant la page chargée, sans refresh.

Jetez un oeil sur mon tuto Techniques "avancées" de serveur web sur ESP8266 et comment utiliser Ajax pour un refresh “discret”

Si vous allez jusqu’au bout vous pourrez faire une page web qui affiche la T° dans un beau thermomètre ou cadran genre (c’est configurable)

Corlysis semble une solution vraiment intéressante, comme thingspeak c'est gratuit pour un usage limitė et pour ceux qui connaissent bien influxdb et grafana, le passage sur le cloud de corlysis doit être plutôt rapide.

Merci de l'info

....solution intéressante mais il n'y a pas le soutien d'un grosse société (comme MathWorks derrière ThingSpeak)
On peut se poser des questions sur la pérénnité d'une petite startup comme Corlysis
ll ya du monde sur ce marché... ça va et ça vient... le gratuit disparait souvent.
En attendant c'est effectivement pratique, éventuellement pour découvir InfluxDB et Grafana sans petit serveur maison

Je garde ton tuto dans un coin de ma tête JML, j'y ai jeté un coup d'oeil et il m'a l'air très intéressant !
Cependant vous n'avez pas trop répondu à ma question, vous m'avez proposé des solutions en utilisant des choses déjà faites, comme thingspeak ou autre, mais est-ce vraiment possible de créer mon propre serveur sur lequel envoyer mes données et les partager à travers le monde ?

Salut ,

Generalement quand on veut faire de l ' actualisation sans changer de page sur un serveur web ,

il n ' y a pas 50 solutions : AJAX est prevu pour cela .

il peut etre combiné a du PHP , MYSQL HTML , CSS en fonction des besoins et du resultat attendu .

tout cela est dispo gratuitement dispo avec un raspberry pi , evidement ca prend du temps a coder , mais le resultat sera exactement ce que vous desirez .

Avec un arduino je n ' ai jamais fait , mais a priori @J-M-L vous a indique le lien approprié .

Herouis:
Je garde ton tuto dans un coin de ma tête JML, j'y ai jeté un coup d'oeil et il m'a l'air très intéressant !
Cependant vous n'avez pas trop répondu à ma question, vous m'avez proposé des solutions en utilisant des choses déjà faites, comme thingspeak ou autre, mais est-ce vraiment possible de créer mon propre serveur sur lequel envoyer mes données et les partager à travers le monde ?

oui avec un raspberry pi , je suis certain que c ' est faisable : je l' ai fait pour des portails et leur gestion a distance .

Merci iznobe,
Avec une raspberry c'est donc possible mais avec un vieux pc dual core sous linux Ubuntu, ca change quelque chose ?

Ca refresh la page et met a jour les valeurs certes, mais j'aimerais éviter le refresh.
A mon avis cela ne doit pas être possible en html.

La demande aurait pu être plus précise au départ ...

S'il s'agit de mettre à jour une donnée sur une page WEB sans redessiner la page complète, effectivement le HTML ne le permet pas.

Tu ne précises pas non plus le rôle de l'ESP8266.
Au départ j'ai pensé qu'il hébergeait le serveur WEB. Est-ce bien le cas ?

Pour le moment c'est le cas.
Mais a terme j'aimerais que sont rôle ne soit que de relever les valeurs des capteurs et les envoyer vers un serveur local ou non.
Ce serveur serait mon vieux pc.
C'est ce vieux pc qui hébergerait plusieurs pages webs, une pour chaque module esp8266 avec des capteurs.

"un vieux pc dual core sous linux Ubuntu" peut faire le boulot de serveur web bien sûr... et ça a un sens si vous souhaitez conserver un historique des données. (un peu de PHP et Apache)

Sinon si c'est pour de l'information "continue" sans besoin d'historique, vous pourriez avoir une page web (générée par n'importe lequel des ESP) qui envoie des requêtes (en utilisant l'approche AJAX) vers l'ensemble de vos points de capture d'info.

La page web et le mécanisme de rafraîchissement s'occupe d'aller chercher les data là où elles sont

Herouis:
Je garde ton tuto dans un coin de ma tête JML, j'y ai jeté un coup d'oeil et il m'a l'air très intéressant !
Cependant vous n'avez pas trop répondu à ma question, vous m'avez proposé des solutions en utilisant des choses déjà faites, comme thingspeak ou autre, mais est-ce vraiment possible de créer mon propre serveur sur lequel envoyer mes données et les partager à travers le monde ?

Le tuto de JML répond parfaitement à ce que tu veux faire.
Après, l'accès à ton serveur web de partout 'à travers le monde' dépend du fait que tu as une adresse ip fixe ou que tu utilises un serveur dns et de la configuration de ta box.

rappel : les solutions externes genre ThingSpeak ont été proposées en réponse à cette demande du message #2 :

L'idéal c'est qu'il n'y ai aucune manip complexe a faire du style redirection des ports et tout.

Si cette réticence tombe ça change les choses.....

Avec une raspberry c'est donc possible mais avec un vieux pc dual core sous linux Ubuntu, ca change quelque chose ?

Non, cela ne change rien.

Une RASPBERRY PI sera aussi performante qu'un vieux PC et consommera 50 à 100 fois moins d'énergie.
Un PC consomme au mieux 50W et coûte donc 50€ par an, le prix d'une PI4.

Ensuite, WebSocket, Ajax, etc. les technos ne manquent pas pour faire une page WEB dynamique.

L'adresse de ce vieux pc est déjà configurée en fixe.
Vous pensez faisable le fait que :
-On se connecte a une page web du type : températuremaison.com
-On peut choisir de se connecter à différents comptes, avec un user et un mdp
-Chaque compte redirige vers les données d'un module.

Je sais pas si j'arrive bien à me faire comprendre, sinon pas de soucis, je peux re expliquer différemment.
Si c'est faisable, la difficulté sur une échelle de 1 à 10, 10 étant très compliqué, c'est combien ?

J'ai proposé l'utilisation d'un pc pour avoir du stockage.
Combien de place ça prendrais sur le pc de stocker les données de 10 stations pendant 1 semaine ? Environ ? Moins d'1Go ou plus ?

Tu pourrais calculer ça facilement.
Mon serveur Teleinfo sur RASPBERRY PI 1B tourne depuis le 1/01/2016. Il enregistre les données de deux compteur EDF toutes les 15 minutes.
Taille actuelle de la base de données : 12Mo.
On est loin du GigaOctet.