ESP32 nagy html kiszolgálás

C/C++

Sziasztok,

ESP32 mikrokontrollerre szeretnék egy (általános) fejlesztői környezetet írni, amiben már kész vannak az alap dolgok, utána csak az üzleti logikával kéne foglalkozni. Az alapok megvannak, már működik, de szeretném fejleszteni. Ehhez tartozik egy webes felület is. Korábban ez "kézzel írt" html és javascript volt, ami fájlonként volt 7-10 kb. Pl ez: https://github.com/redakker/blecker/tree/main/html
Ahhoz, hogy egységesebb legyen gondoltam választok egy javascrip framework-öt, így jutottam el a Svelte-ig, ami az egész mindenséget bele tudja fordítani egy darab html fájlba. Így a kiszolgálás is egyszerűsödik, de a fájl 100kb-osra nőtt.

Tehát a probléma: Az ESP-nek 100kb kiszolgálása már nehézséget okoz. EspAsyncWebserver library-t használnék.
Kérdés: Mit lehet ez ügyben tenni?

Sajnos a C++ ismereteim még nem elegek ennek a problémának a megoldásához, ezért kérek segítséget.
Kérdeztem a chatGPT-t is, de nem voltam vele sikeres.

Tehát van egy PROGMEM változóm, ami be a build során bekerül a HTML kód.
 

const char data_index_html[] PROGMEM = R"=====(
<!DOCTYPE HTML><html>
...
nagyon szép admin oldal, html, javascript, css
...
</html>
)=====";

Az egészet szeretném egy objektumba zárni:

#include <ESPAsyncWebServer.h>

class WebServer {
  public:
    WebServer(int port) : server(port) {}

    void begin() {
      server.on("/", HTTP_GET, [this](AsyncWebServerRequest *request){
        handleRoot(request);
      });
      
      server.begin();
    }

  private:
    AsyncWebServer server;

    void handleRoot(AsyncWebServerRequest *request) {
      String response = data_index_html;
      request->send(200, "text/html", response);
    }

   
};

És üres lapot kapok. Valószínűleg memória gondok lesznek. Próbáltam feldarabolni és streamként küldeni, de nem sikerült (nem az elv miatt).

Szóval tudna valaki támpontokat, esetleg kódrészletet írni, hogy merre induljak?

Köszönöm!

Üdv: redman

  • 1274 megtekintés

( dromie v | 2023. 05. 08., h – 09:46 )

Az első dolog amit kipróbálnék, hogy gzip-pel tömöríteném, és a tömörített stream-et adnám vissza, természetesen a megfelelő http header társaságában.

Én azt hiszem még ESP 8266 alatt mélyedtem bele a webes kiszolgálásba olyannyira, hogy megpróbáltam végül saját webszervert írni, ami használhatóan szolgál ki többfájlos környezetben. Végül belebuktam. A fogyasztó-termelő problémát nem tudtam megfelelően megoldani. Emlékeim szerint azzal zártam le magamban a project-et, hogy a 4 TCP kapcsolatot kezelő hardver egyszerűen kevés ehhez. Szerintem ESP32 alatt is áll ez a korlát - ha nem, majd okosabbak megmondják.

A lényeg, hogy erősen támogatom az egyfájlos gondolatot. Szerintem azzal fogsz tudni a legstabilabb kiszolgálást elérni. Persze a fentebb már említett gzip elengedhetetlen.

( erenon | 2023. 05. 08., h – 09:55 )

Ezt nezted? https://github.com/me-no-dev/ESPAsyncWebServer#send-large-webpage-from-…

const char index_html[] PROGMEM = "..."; // large char array, tested with 14k
request->send_P(200, "text/html", index_html);

Nem egyertelmu nekem, hogy mi a `String` tipus, de ha az, amire gondolok, akkor feleslegesen masolja a data_index_html erteket. Egyebkent mibol gondolod, hogy a memoria a baj? Probaltad sokkal kisebb tartalommal? Milyen meret utan nem megy?

( FeriX v | 2023. 05. 08., h – 11:35 )

Szerkesztve: 2023. 05. 08., h – 11:37

Túl nagy a fájl, ezt nem tudod csak úgy megoldani, csak ha zip-el vagy gzip-el tömöríted.

A tömörített html-t itt tudod konvertálni https://notisrac.github.io/FileToCArray/ 

A data_index_html pedig uint8_t legyen ne char

Kell egy 

#define data_index_html_len xxx

ahol az xxx a konvertáló web kimenete kommentben: "array size is xxx" 

handleRoot pedig így módosul:

void handleRoot(AsyncWebServerRequest *request) {
    const char* contentType = "text/html";
    AsyncWebServerResponse *response = request->beginResponse_P(200, contentType, data_index_html, data_index_html_len);
    response->addHeader("Content-Encoding", "gzip");
    request->send(response);
}

Ezt itt gépeltem, lehet benne elírás.

( Elbandi v | 2023. 05. 08., h – 11:57 )

ha sehogy sem sikerul, akkor meg mindig hasznalhatod ugy hogy egy kulso webserveren van a html kod, az esp-re meg csak az api hivasok mennek.

A vegtelen ciklus is vegeter egyszer, csak kelloen eros hardver kell hozza!

( cadmagician | 2023. 05. 08., h – 15:30 )

esp-idf kell, ott minden adott, tudsz fájlrendszert buildelni az image-be. van fileserver kód is. én komplett bootstrapes megoldát kodoltam bele, 5 oldal, form, postolás, mentés fájlba, konfiguráció mentés betöltés. json  ajax json kommunikáció. ez az arduino kinézetű megoldás komolytalan...

Aki másnak vermet ás, az stack pointer.

( STP | 2023. 05. 08., h – 17:18 )

Nem érdemes kisbicskával fát vágni.

Egyébként meg gzip.

Pontosan tudom, hogy ESP32-vel mit lehet csinálni. És fancy weboldalakat kiszolgálni nem érdemes. S nem azt írtam, hogy nem lehet, csak azt, hogy nem érdemes. 'Fapad' funkcionális weboldalhoz elmegy, bár az is simán kinyírható, mert gyenge a proci, nincs tűzfal, nincs elég RAM benne, stb. Ja, és az SSL cert menedzseléssel is foglalkozni kell.

( FeriX v | 2023. 05. 09., k – 08:12 )

Ha tanulni szeretnél, ajánlom figyelmedbe a nyílt forráskódú WLED projektet. Ezt használom a saját gyártású lámpáimhoz. Rengeteg funkciót préseltek bele egy ESP-be, és ezen felül pedig ESP Web Tools segítségével böngészőből lehet frissíteni az eszközöket, amivel még édesanyám is könnyedén módosítja a lámpák szoftverét amikor módosítok valamit. Nagyon sokat lehet tanulni ezen a projekten.

( dotnetlinux | 2024. 02. 10., szo – 19:42 )

Most kezdtem el foglalkozni ezzel, kicsit gyorsabb mint az AsyncWebServer: https://github.com/hoeken/PsychicHttp

ESP32 (akár arduino, akár platform.io) már nem kell PROGMEM-mem vacakolni, elég az uint8_t elé odatenni, hogy const és PROGMEM területre kerül, viszont natív módon elérhető. 1500 byte méretű tartalmat vissza tud adni, 2000 byte-ot nem, 1750-et igen, tovább nem binarySearch-öztem, meglesem holnap.