Dotaz: ESP32 a web s dynamickými stránkami?

[Ježek]

Rád bych na ESP32 rozjel http server, který by uměl html stránky s Javascriptem na kterých by se třeba zobrazoval graf do kterého by automaticky třeba co 10s přibila nová data. Našel jsem nějaký příklad pro ESP32 a tam to bylo udělané tak, že když přišel na http servet v EPS32 požadavek na zobrazené index.html tak se zavolala funkce, která na SPIFFS , tedy vlastně v externi SPIFlash jejiž část byla použita jako partition se souborovým systémem otevřela soubor index.html a do měj uložila to co se mělo přenést ke klienti včetně odkazu na komprimovaný javascript, který byl tako uložen v NORSPI tedy v partition, kam byl nahraný při programování toho celého. Až sem celekm jasné. Otázkou je co se stane za 10s m EPS32 změří nějaká data a co ted? První co každého napadne je vygenerovat nový index ,html nebo aspoň v tom starém změnit data a celé to pak poslat clientú. Nicméně to je špatně a hned ze dvou důvodů. 1. Pokud bychom dělali zápisy do NOR Flash každých 10s tak jí velice rychle zničíme 2, Bylo by to značně neefektivní, co 10s by se přenášela celá index.html Otázkou je jak by to mělo být udělané správně? Nemám s tím zkušenosti. Popradě i ty Javascripty jsem si dostudoval až ted v souvislosti s tímto projektem. Vim že existuje něco jako AJAX což je asi to co chci, ale nevím jak to fungýuje na strně http serveru a tak nevim jak se to naprogramuje na staně serveru aby tento poznal, že má jen poslat data z RAM a ne znovu generovat index.html nebo jak jinak se to řeší? Pordíte na o mám kouknout a co dostudovat?

Odpovědi

[X]

Jestli myslis tento navod tak tam se data ctou kazdych 30 do JS pole(v prohlizeci..).

[Kit]

index.html by měl být statický, v něm pouze link na JS knihovnu (nejlépe na cloudu) s ajaxem, který bude umět dynamicky dotáhnout data - to řeší browser. Data je možné udržovat v RAM a na ajaxový dotaz je prezentovat jako JSON, se kterým si browser poradí. Ovšem pokud data nejsou přepisována, ale jen dopisována na konec souboru, životnost flešky to nesnižuje. Vadí jim jen příliš časté přepisování jedné buňky.

Zbývá jen vybrat vhodný webserver pro ESP32, který bude umět z těch dat dynamicky generovat JSON. Grafy by se opět generovaly až v browseru.

[z_sk]

Najlepsie: WebSocket

Ak Ťa zlosti opotrebovanie RAM, tak ukladaj do RAM (sem tam archivuj data na disk/siet), tj. /dev/shm, resp. alebo pripoj nejaký priečinok z tamtial niekam (cez "-o bind") kam potrebujes (napr. /var/www/html/bla).

Dačo take sa už riešilo: https://www.abclinuxu.cz/poradna/programovani/show/459660

[Monopil]

Rada s RAM dobrá, té má dost, nejmíň celých 520KB, ale /dev/shm na ESP32 bude hledat těžko (no dobrá jde to, ale tazatel tam linux určitě nemá

[Ježek]

Především někuji všem.

Jestli myslis tento navod tak tam se data ctou kazdych 30 do JS pole(v prohlizeci..).

Nemyslim, toto je celekm jednoduchý a pořehledný příkalsd v kterém i já vidím na stránce/scriptu XMLHttpRequest() tedy AJAX a na straně serveru vidím použití request->send a request->send_P. Sice nevím proč musí být pro poslíní dat z SRAM (PROGMEM) Send_P, ale to bych si dohledal.

Ja se koukal na trochu komplexnější a také méně přehledný kod , přesněji na toto

[X]

Zalezi jestli chces uchovavat historicka data. Pokud staci aktualni zivy vystup, muze se cela dynamika odehravat v prohlizci ktery dotazuje data a generuje graf a cely obsah v ESP32 bude staticky bez intenzivniho zapisovani. Ale, nebudes mit historicka cisla. Ta si ovsem muzes potichu ukladat nekam mimo ESP32 volat bokem. Cil je predpokladam nezatezovat ESP32 nejakym slozitym generovanim stranek a intenzivnim zapisovanim.

[Bugsa]

Na ESP rozjedeš webserver https://github.com/me-no-dev/ESPAsyncWebServer. Z flash paměti vrátíš "index.html" při requestu na "/".

V tom index.html vše naprogramuješ pomocí JS. V rychlosti mne napadají 2 možné varianty řešení:

1) WebSocket - ESP po změření zašle notifikaci pro všechny připojené WS klienty s novýma hodnotama proměnných. Třeba ve formátu JSON. JS na index.html zprávu zpracuje a změní patřičné HTML elementy.

2) To samé co 1, ale použije se AJAX z klienta. Ten v pravidelných intervalech bude dotazovat ESP, třeba requestem na "/status", které bude vracet aktuální hodnoty proměnných.

[Ptáček]

Koukal jsme na zde odkazovný příklad i na ESPAsyncWebServer mám několik dotazu.

1. Exituje něco jako dokumentace v které by byl přehled funkci/metod a vyznam jejeich parametru, proměnnych atd?

2. Trochu totiž nechápu, tedy chápu funkci,ale nechápu jak . Napříkald v příkaldu  je uvedemo

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send(SPIFFS, "/index.html", String(), false, processor);

});

Chápu co to dělá, tedy, že to clientu na GET požadvek vrátí index.html v kterém funce processor nahradi zastupný %STATE% 
za On nebo Off,ale nehcpu jak se STATE ocitl v parametru funkce processor, netuším co znamenaji další parmtry tyedy flase a String(),
hledl bych to v dokumentaci,ale tu s emi nepodařilo najit

Poradíte?

[z_sk]

1. https://github.com/me-no-dev/ESPAsyncWebServer/blob/master/README.md

2. https://github.com/me-no-dev/ESPAsyncWebServer/blob/master/README.md#respond-with-content-coming-from-a-file resp. pozriet implemetnaciu, ak to z prikladu neni jasne https://github.com/me-no-dev/ESPAsyncWebServer/blob/2f784268f0a358741ee6384480d48656e159d726/src/WebRequest.cpp#L775

[Bugsa]

2) Za mne je to asi nejméně vhodný způsob jak to vyřešit. Aby se stránka zaktualizovala, tak bude třeba refresh a ESP bude muset zbytečně generovat a vracet celé HTML. To se spíš hodí pro info stránku, která slouží pro jednorázový výpis hodnot proměnných. Ano, sice by šel vracet třeba jen nějaký malý div s hodnotama a načítat ho AJAXem, ale fakt bych to takhle nedělal.

Je to takový jednoduchý "template" engine. Funkce Processor proměnnou získá tak, že funkci Processor interně zavolá funkce request->send pro každou %PROMĚNNOU%, kterou nalezne ve zdrojovém HTML a název té proměnné předá jako argument funkce Processor (var). Pak nahradí v HTML %PROMĚNNOU% výsledkem funkce Processor. Jenže je to neohrabané, musíš ve funkci Processor pro každou proměnnou vytvořit podmínku a doplnit její hodnotu.