Hallo zusammen,
um die Übertragung zu beschleunigen würde ich gerne bei Button
Betätigung nur eine Aktion senden, aber nicht das die Seite komplett neu
geladen werden muss. Wie kann ich das umsetzten?
Bin ein HTML-Neuling habe im Moment folgende Seite die geladen
wird.(siehe Bild und Code)
DanS S. schrieb:> Danke für das schnelle Feedback.> Macht es Sinn für die Kommunikation mit dem ESP8266 das Protokoll auf> Javaskript umzustellen?
Welches Protokoll? Javascript ist eine websprache und kann in /mit HTML
verwendet werden... ?
Wo liegt denn überhaupt konkret das Problem? Dein HTML-Code ist doch eh
nicht sonderlich lang, es fällt mir gerade schwer nachzuvollziehen, wie
die paar Bytes in der Praxis ein grosses Problem darstellen sollen.
Ein paar Bytes und unnötige Redundanz könntest Du noch einsparen, wenn
Du
<style>button {height:100px; width:100px;}</style>
in die head-Section schreibst, und dann das entsprechende style-Attribut
aus den einzelnen Button-Tags entfernst.
Aber ansonsten...
Kenn jemand ein gutes Beispiel wo AJAX mit JQuery verwendet wird was zu
meinen Problem passt.
Oder ein paar Zeilen Code die mein Problem lösen?
Hab so gut wie keine Erfahrung mit HTML und JavaScript.
Joachim S. schrieb:> Wo liegt denn überhaupt konkret das Problem? Dein HTML-Code ist doch eh> nicht sonderlich lang, es fällt mir gerade schwer nachzuvollziehen, wie> die paar Bytes in der Praxis ein grosses Problem darstellen sollen.
Es wird im Außenbereich eingesetzt.
Dort wo es zurzeit zum Einsatz kommt ist das WLAN ziemlich schwach und
führt daher zu Verzögerungen bis zu 3 Sekunden wenn die ganze Seite
geladen werden muss. Da ich ja nur ein Signal zum Schalten senden möchte
wäre es von Vorteil nur die Aktion des betätigen Button zuschicken statt
die ganze Seite erneut zu laden.
Ich persönlich bin ja skeptisch, ob AJAX hier wirklich das Allheilmittel
ist. Sicher, AJAX ist die absolut korrekte Antwort auf die eigentliche
im Eröffnungsposting gestellte Frage, wie man die Befehle schicken kann,
ohne die komplette Seite neu laden zu müssen.
Dennoch bezweifle ich irgendwie, dass der Threadstarter mit der
AJAX-Lösung rundum zufrieden sein wird. Ich vermute eher, dass der
Threadstarter nach vielen Stunden des Herumtüftelns feststellen würde,
dass sein Code plötzlich dreimal so umfangreich ist, das erste Laden der
Seite sogar länger dauert, weil auch der HTMl-Code inkl. Javascript
deutlich länger geworden ist, das Senden der Befehle trotzdem nur
geringfügig schneller geht, und AJAX auch wieder neue
Nachteile/Herausforderungen mit sich bringt.
@Threadstarter: Wenn es Dir darum geht, die Menge der per WLAN von/zum
ESP8266 übertragenen Daten (und somit letztlich die Latenzzeit) zu
minimieren, weil das WLAN an der Stelle im Garten so schwach ist, dann
wäre die optimale Lösung dieses Problems MQTT. Das würde die Architektur
zwar komplett über den Haufen werfen und u.A. einen zusätzlichen
Server/MQTT-Broker (z.B. in Form eines Raspberry Pi) erfordern, würde
die Latenzzeit und von/zum ESP8266 übertragene Datenmenge aber auf das
absolute Minimum reduzieren.
Ich weiss, MQTT wirkt erst einmal abschreckend, schon durch den
zusätzlichen zentralen MQTT-Broker; und die übliche Lösung, stattdessen
einen kleinen Webserver auf dem ESP laufen zu lassen, viel einfacher.
Aber spätestens, wenn man es mit mehr als 1-2 ESP8266-basierten Geräten
zu tun hat, die vielleicht sogar noch intelligent miteinander vernetzt
werden sollen, oder auch nur ein Gerät dazu kommt, das keine reine
Datensenke, sondern eine Datenquelle ist (z.B. ein Rauch- oder
Bewegungsmelder) merkt man schnell die Nachteile des naheliegenden
Ansatzes, auf jedem Device einen eigenen Webserver laufen zu lassen und
Kommunikation und Steuerung per HTTP und HTML machen zu wollen.
https://www.heise.de/developer/artikel/MQTT-Protokoll-fuer-das-Internet-der-Dinge-2168152.html
Ich würde in solchen Fällen gerne eine lokal installierte HTML Datei
(als Alternative zu einer App) verwenden, die per Javascript einfache
UDP Nachrichten sendet. Aber das scheint nicht möglich zu sein.
Oder doch? Falls ja, wo kann ich dazu etwas nachlesen?
Ich glaube nicht dass JS UDP kann. Aber wenn du eh eine lokale
"Anwendung" hast, gibt es IMO wenig Gründe JS zu nehmen. Nimm halt
irgendwie Python oder so.
Joachim S. schrieb:> Dennoch bezweifle ich irgendwie, dass der Threadstarter mit der> AJAX-Lösung rundum zufrieden sein wird. Ich vermute eher, dass der> Threadstarter nach vielen Stunden des Herumtüftelns feststellen würde,> dass sein Code plötzlich dreimal so umfangreich ist, das erste Laden der> Seite sogar länger dauert, weil auch der HTMl-Code inkl. Javascript> deutlich länger geworden ist, das Senden der Befehle trotzdem nur> geringfügig schneller geht, und AJAX auch wieder neue> Nachteile/Herausforderungen mit sich bringt.
jQuery soll man normaleise (wenn man keine Datenschutzbedenken hat)
ohnehin über die entsprechenden CDNs ausliefern. Damit wird das HTML nur
minimal größer und das eigentliche Javascript aus dem Internet gezogen.
Dummerweise ist die jQuery Doku gerade down. Sonst hätte ich ein kleines
Beispiel gepostet.
Stefan U. schrieb:> Ich würde in solchen Fällen gerne eine lokal installierte HTML Datei> (als Alternative zu einer App) verwenden, die per Javascript einfache> UDP Nachrichten sendet. Aber das scheint nicht möglich zu sein.>> Oder doch? Falls ja, wo kann ich dazu etwas nachlesen?
UDP direkt per Webbrowser-Javascript ist m.W.n. tatsächlich schlicht
nicht möglich.
Eine Not-Lösung wäre möglicherweise eine Art HTTP-UDP-Bridge; also dass
man quasi per HTTP-Request die nötigen Informationen (IP-Adresse & Port
des Empfängers + eigentliche Daten) an einen zwischengeschalteten
Webserver schickt, und dieser zwischengeschaltete Webserver dann ein
entsprechendes UDP-Paket an den eigentlichen Empfänger sendet.
Hans schrieb:> jQuery soll man normaleise (wenn man keine Datenschutzbedenken hat)> ohnehin über die entsprechenden CDNs ausliefern. Damit wird das HTML nur> minimal größer und das eigentliche Javascript aus dem Internet gezogen.
Dass jQuery per CDN ausgeliefert wird, habe ich stillschweigend
vorausgesetzt. jQuery vom ESP8266 serven zu lassen, wäre im vorliegenden
Szenario ja wirklich Unsinn und würde das vermeintliche Problem ja nur
verschlimmern.
Joachim S. schrieb:> UDP direkt per Webbrowser-Javascript ist m.W.n. tatsächlich schlicht> nicht möglich.
Es würde auch in der Regel wenig Sinn machen.
Bei Ajax Anwendungen MÖCHTE ich den Response des Servers auswerten
können, alleine schon um die Farbe des Klickfeldes ändern zu können,
wenn eine Lampe angeht. (oder, was auch immer gerade gezeigt werden
will)
Und es gibt ja noch Websockets...
Beide Verfahren kann man mit dem ESP abhandeln.
Auch Speichermangel kann nicht wirklich das Problem sein. Denn bis zu
3MByte SPIFFS sind von hause aus drin. Selbst die Anbindung einer
SD-Karte bereitet keine unendlichen Sorgen.
Das ausliefern der JQuery Datei ist also vom ESP aus möglich. Und durch
mitsenden der betreffenden HTTP Cache Header, belastet es nur einmal das
Netz, pro Sitzungsdauer.
Bitte, auch bei sonstigen statischen Inhalten (Bilder,CSS, usw) an die
Cache Header denken.
Arduino F. schrieb:> Joachim S. schrieb:>> UDP direkt per Webbrowser-Javascript ist m.W.n. tatsächlich schlicht>> nicht möglich.>> Es würde auch in der Regel wenig Sinn machen.>> Bei Ajax Anwendungen MÖCHTE ich den Response des Servers auswerten> können, alleine schon um die Farbe des Klickfeldes ändern zu können,> wenn eine Lampe angeht.
?
Das geht mit UDP genauso ...
Sven B. schrieb:> ?> Das geht mit UDP genauso ...
Ja?
Dann zeige doch mal bitte, wie du den Browser überredest, einen UDP
Socket auf zu halten, und er dann die Antwort an JS weiter reicht...
Ich fürchte das wird dir schwer fallen.
Wenn es sich um "Port aufhalten" dreht, sind einfach Websockets das
Mittel der Wahl.
Da hilft es auch nicht, darauf rum zu hacken, dass ich mich evtl. etwas
unklar ausgedrückt habe.
Arduino F. schrieb:> Und es gibt ja noch Websockets...
In der Tat, Websockets könnten hier mglw. noch eine Lösung sein.
Irgendwelche Workarounds mit UDP hingegen machen imho tatsächlich eher
wenig Sinn.
> Auch Speichermangel kann nicht wirklich das Problem sein. Denn bis zu> 3MByte SPIFFS sind von hause aus drin. Selbst die Anbindung einer> SD-Karte bereitet keine unendlichen Sorgen.>> Das ausliefern der JQuery Datei ist also vom ESP aus möglich.
Klar, möglich wäre das schon. Macht im hier vorliegenden Fall ja aber
nun wenig Sinn, jQuery vom ESP statt von einem CDN ausliefern zu lassen.
Das Problem, um das es hier geht, würde es ja nur verschlimmern - wenn
angeblich schon ca. 700 Bytes an HTML-Daten für sekundenlange Latenzen
sorgen sollen, weil die WLAN-Verbindung am Standort des ESP so übel ist,
warum sollte man dann unnötigerweise ca. 80kb jQuery-Daten dann über die
gleiche schlechte Netzwerkanbindung übertragen, wenn man es genauso gut
von einem schnellen CDN ausliefern lassen könnte. Zusätzlicher
Arbeitsaufwand, der das Problem aber nur verschlimmern würde.
Arduino F. schrieb:> Sven B. schrieb:>> ?>> Das geht mit UDP genauso ...>> Ja?> Dann zeige doch mal bitte, wie du den Browser überredest, einen UDP> Socket auf zu halten, und er dann die Antwort an JS weiter reicht...
Geht halt nicht weil ist nicht implementiert, aus welchem Grund auch
immer. Aber Sinn machen würde es schon, man könnte Web Sockets
genausogut auch mit UDP machen -- warum soll das weniger Sinn machen als
TCP?
Sven B. schrieb:> Geht halt nicht weil ist nicht implementiert, aus welchem Grund auch> immer. Aber Sinn machen würde es schon, man könnte Web Sockets> genausogut auch mit UDP machen -- warum soll das weniger Sinn machen als> TCP?
Ungelegte Eier...
Joachim S. schrieb:> wenn> angeblich schon ca. 700 Bytes an HTML-Daten für sekundenlange Latenzen> sorgen sollen, weil die WLAN-Verbindung am Standort des ESP so übel ist,
Naja...
Auch da gibt es sicherlich Mittel und Wege...
Ein Repeater?
Auf halben Weg noch einen ESP setzen(ESP-Mesh)?
Vielleicht ist es auch einfach nur die falsche Technik am richtigen Ort?
Joachim S. schrieb:> Zusätzlicher> Arbeitsaufwand, der das Problem aber nur verschlimmern würde.
Der Zusätzliche Arbeitsaufwand beschränkt sich doch nur auf das Senden
zusätzlicher Cache Header.
Diese Header verschlimmern das Problem nicht, sie mildern es.
UDP ist schon alleine wegen der schlechten Verbindung unbrauchbar - die
Nachrichten werden verlorengehen, ohne dass man das mitkriegt.
WebSockets ist für einen Anfänger zu viel, hier ist AJAX ohne jQuery
tatsächlich die bessere Wahl (ungetestet):
Beim Klick auf den Button wird function "Ausgang1On" aufgerufen, die
dann Seite "ausgang1on" aufruft.
Der Returnwert der Seite, es könnte einfach ein String "Eingeschaltet"
sein, wird in die <div id="status"> reingeschrieben.
Das ist alles.
MfG,
Andreas
DanS S. schrieb:> um die Übertragung zu beschleunigen würde ich gerne bei Button> Betätigung nur eine Aktion senden, aber nicht das die Seite komplett neu> geladen werden muss. Wie kann ich das umsetzten?
Wenn du nicht unbedingt auf das neumodische Javascript/AJAX-Gedöhns
umsteigen willst: Das geht ganz Old-School per HTTP-Response-Code.
https://http.cat/204 "No Content"
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204> The HTTP 204 No Content success status response code indicates that the> request has succeed, but that the client doesn't need to go away from its> current page.
Planlos schrieb:> DanS S. schrieb:>> um die Übertragung zu beschleunigen würde ich gerne bei Button>> Betätigung nur eine Aktion senden, aber nicht das die Seite komplett neu>> geladen werden muss. Wie kann ich das umsetzten?>> Wenn du nicht unbedingt auf das neumodische Javascript/AJAX-Gedöhns> umsteigen willst: Das geht ganz Old-School per HTTP-Response-Code.>> https://http.cat/204 "No Content">> https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204>> The HTTP 204 No Content success status response code indicates that the>> request has succeed, but that the client doesn't need to go away from its>> current page.
Interessant, dieser Statuscode 204 war mir bislang gar nicht
bewusst/bekannt.
Erscheint mir auf Anhieb tatsächlich die einfachste und sinnvollste
Lösung zu sein.
die Frage die sich noch stellt - will der TO nur den Befehl absetzen,
was man mit dem laden einer Minimaldatei oder Leerdatei in ein nicht
sichtbares IFrame machen könnte, oder möchte er auf der Seite auch eine
visuelle Rückmeldung sehen?
Sascha
Thread beobachten
Seitenaufteilung abschalten