Wie wäre es, wenn du die Webseite mit der Antwort des Servers nicht selbst neu laden müsstest, um die aktuelle Temperatur zu erfahren? Kein Problem!
In dieser Lektion lernst du zwei Methoden kennen, die genau das für dich übernehmen.
Autorefresh mit einem Meta-Tag
Die erste Methode erfordert nur eine kleine Anpassung im HTML der Antwort deines Servers. Erweitere einfach den Head des HTML um folgende Information:
<meta http-equiv=\"refresh\" content=\"5\">Der gesamte Head sollte dann wie folgt aussehen:
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<meta charset=\"utf-8\"><meta http-equiv=\"refresh\" content=\"5\"></head>");Jetzt lädt deine Webseite alle 5 Sekunden neu – und stellt somit eine neue Anfrage an deinen ESP8266, der daraufhin die Temperatur ermittelt und zurückgibt.
Das funktioniert im Prinzip ganz gut – allerdings kannst du damit einen Refresh höchstens einmal pro Sekunde ausführen. Wenn du häufigere Anfragen möchtest, um deine Daten quasi in Echtzeit zu erhalten, eignet sich ein kleines Script besser.
___STEADY_PAYWALL___
Autorefresh mit JavaScript
Mit dem folgenden Script kannst du deine Webseite häufiger als einmal pro Sekunde neu laden – theoretisch sogar jede tausendstel Sekunde. Das wäre jedoch etwas zu viel des Guten.
Füge also statt des Meta-Tags von oben folgendes Script deinem Head hinzu:
<script>
function refresh(refreshPeriod)
{
setTimeout('location.reload(true)', refreshPeriod);
}
window.onload = refresh(5000);
</script>Der Head sollte dann in deinem Sketch so aussehen:
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<meta charset=\"utf-8\">");
client.println("<script>function refresh(refreshPeriod){setTimeout('location.reload(true)', refreshPeriod);}");
client.println("window.onload = refresh(500);</script></head>");Jetzt aktualisiert sich deine Webseite alle 500 Millisekunden von alleine. Diese Information findest du in refresh(500) – probiere es gleich einmal aus und ersetze diesen Wert durch andere. Siehst du, wie schnell sich die Temperatur im Browser verändert (vorausgesetzt sie verändert sich wirklich um deinen Sensor herum)?