Dynamic webpage ohne php oder framework?
Guten Abend!
Ich versuch aktuell auf einer webpage einen Wert alle paar sekunden aktualisieren zu lassen, finde allerdings nur lösungen mit php oder frameworks, was in meinem fall allerdings nicht möglich ist. Gäbe es eine Lösung die nur mit js funktioniert? Im backend benutz ich einen Flask webserver.
LG
3 Antworten
a) Du fragst mit JavaScript in regelmäßigen Abständen nach einem Wert:
setInterval(function() {
fetch("/some-flask-route")
.then(response => response.text())
.then(data => { /* update value in DOM */ });
}, 2000);
In diesem Fall würde alle 2000ms (= 2s) eine Anfrage an eine Flask Controller-Methode geschickt werden, der den aktuellen Wert zurückgibt.
@app.route('/some-flask-route')
def some_flask_route():
updated_value = # get current value ...
return flask.Response(updated_value, mimetype="text/plain")
Die Antwort wird in die data-Variable geschrieben und du kannst mit JavaScript die Seite (das Element im DOM) aktualisieren.
b) Schöner wäre allerdings wohl eine Lösung, bei der eine Verbindung offengehalten wird und der Server selbst entscheidet, wann er neue Daten an den Client schickt (also dann, wenn sich der Wert ändert). Dafür würde sich ein Push-System eignen (Server-Sent Events). Lies bezüglich einer Implementation hier.
Dafür braucht man auch kein Framework oder ähnliches, so was wie JQuery nur dafür einzubinden ist, meiner Meinung nach, totaler Quatsch.
Natürlich brauchst du irgendeinen Weg die Daten erst mal vom Server abzurufen, wie du das machst musst du selber raus finden - ich nutze kein Flask.
Du hast hast drei Probleme:
- Daten Abfragen
- Daten Anzeigen
- Dies Regelmäßig zu tun
Um solche Daten abzufragen würde ich die Fetch API nutzen https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch . Das ist eine einfache Browser API um Daten von Servern abzufragen. Du kannst dort auch bestimmen ob z.B. der Browser Cache genutzt wird oder nicht.
Die Daten anzeigen musst du natürlich selber wissen, in vanilla JS kann man für einfache Dinge natürlich document.querySelector() und .innerText nutzen, weiß ja nicht ob du irgendwas komplizierteres beim Anzeigen anstrebst wie irgendwelche Graphen plotten.
Das regelmäßig ausführen würde ich über setTimeout machen und dann nach einer Abfrage einen neuen Timeout erstellen. Das hat gegenüber setInterval den Vorteil das nicht mehrere Abfragen gleichzeitig laufen könnten wenn eine Abfrage warum auch immer länger als der Interval braucht.
Aus einer anderen Antwort "Schöner wäre allerdings wohl eine Lösung, bei der eine Verbindung offengehalten wird und der Server selbst entscheidet, wann er neue Daten an den Client schickt"
Das kann man über long polling machen, in dem Fall antwortet der Server auf eine Abfrage für einen festgelegten Zeitraum nicht sondern erst wenn Daten verfügbar sind oder der eingestellte Zeitraum abgelaufen ist. Oder besser eine WebSocket Verbindung, das ist allerdings etwas komplizierter - aber auch nicht sonderlich schwer wenn es das Backend Framework unterstüzt.
An sich ist es egal, was für eine Serversprache du benutzt oder ob du überhaupt eine benutzt. Man kann theoretisch ja auch txt Dateien einfach nachladen lassen.
PHP wäre alles andere als dynamisch. JavaScript bietet dir da eine Menge Möglichkeiten. Ich empfehle dir jQuery Ajax. Damit wählst du eine der einfachsten Möglichkeiten Daten dynamisch hochzuladen und downzuloaden.
Im Internet gibt es dazu viele Tutorials oder Lesequellen
Mal als Beispiel: https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
Alles klar danke, und wahrscheinlich wirds mit einem json objekt nicht zu viel komplizierter werden, oder?