JavaScript-fájlok letöltésével kapcsolatos problémák megoldása az ESP32 webszerverről

Az ESP32-vel kapcsolatos JavaScript fájlletöltési problémák megértése

A fájlok webszerverről történő letöltése néha trükkös lehet, különösen az ESP32-hez hasonló mikrokontrollerek esetén. Amikor egy fájlt JavaScript használatával próbál meg letölteni, előfordulhat, hogy a letöltés tökéletesen működik, ha közvetlenül a böngészőből éri el, de nem sikerül, ha parancsfájllal indítja.

Ebben a forgatókönyvben az ESP32 statikus .CSV-fájlt szolgál ki PsychicHTTP webszerver használatával. A probléma akkor jelentkezik, ha a fájl nem töltődik le JavaScripten keresztül, annak ellenére, hogy a böngészőben található közvetlen HTML-hivatkozáson keresztül érhető el. Ez a probléma frusztráló lehet, de ez gyakori probléma a beágyazott rendszerekkel végzett munka során.

A JavaScript kód egy XMLHttpRequest segítségével kéri le a fájlt az ESP32-től, de nem váltja ki a letöltést a várt módon. Ez a cikk megvizsgálja, hogy miért működik a közvetlen hivatkozás, de a JavaScript-módszer miért nem. Arról is betekintést nyújt, hogyan lehet módosítani a JavaScriptet egy modernebb „fetch” API segítségével a probléma megoldása érdekében.

Továbbá megvitatjuk, hogy szükség van-e változtatásokra az ESP32 kódban, amikor XMLHttpRequestről a lekérési API-ra váltunk. E két kérdés megvizsgálásával feltárjuk a mögöttes problémát, és megoldásokat kínálunk a megbízható fájlletöltésekre.

JavaScript fájlletöltési módszerek és megoldások elemzése

A bemutatott példákban egy CSV-fájl letöltése volt a PsychicHTTP-t futtató ESP32 webszerverről. Az első szkript a modern API lekérése, egy hatékony eszköz HTTP-kérések készítéséhez JavaScriptben. Ez a módszer leegyszerűsíti a folyamatot az ígéretek kezelésével, és jobban olvasható, mint a régebbi technikák, például az XMLHttpRequest. A lekérési kérés GET kérést küld az ESP32-nek, lekéri a fájlt, majd átalakítja folt formátumban, ami elengedhetetlen a bináris adatok, például a CSV-fájlok kezeléséhez. Ezután egy ideiglenes URL jön létre, amely lehetővé teszi a felhasználó számára a fájl letöltését egy horgonycímkén keresztül.

A második szkript egy alternatíva az XMLHttpRequest használatával, amely a HTTP-kérések hagyományosabb módja. Bár az XMLHttpRequest régebbi, még mindig sok alkalmazásban használják. Ebben a példában a választípus a „blob” értékre van állítva a szerver által visszaadott bináris fájl kezelésére. A szkript figyel a válaszra, és sikeres visszatérés esetén dinamikusan létrehoz egy horgonyelemet, amely elindítja a letöltést. Ez a módszer részletesebben szabályozza a kérést, de hiányzik belőle a Fetch API egyszerűsége és rugalmassága, különösen az ígéretek kezelésekor.

A harmadik megoldás egy tartalék, amelyhez egyáltalán nincs szükség JavaScriptre. HTML horgonycímkét használ a letöltés attribútum, amely lehetővé teszi a felhasználók számára, hogy a hivatkozásra kattintsanak, és automatikusan letöltsék a fájlt. Ez a legalapvetőbb megoldás, és nem igényel szkriptet. Ez azonban kevésbé rugalmas, mivel nem teszi lehetővé a fájlletöltések programozott kezelését, illetve nem ad hozzá feltételeket vagy logikát a letöltés elindítása előtt.

Ezen megoldások mindegyike más-más felhasználási esetre vonatkozik. A Fetch API a modern alkalmazások számára ajánlott megoldás egyszerűsége és teljesítménye miatt. Az XMLHttpRequest akkor hasznos, ha nagyobb ellenőrzésre van szüksége a kérés és a válasz felett. Végül, a csak HTML-alapú megoldás ideális olyan statikus vagy egyszerű weboldalakhoz, ahol nincs szükség JavaScriptre. Ezen módszerek egyikének megvalósításával megbízható fájlletöltést biztosíthat az ESP32 webszerverről, javítva a felhasználói élményt és a funkcionalitást.

function downloadFile(url, fileName) {
  fetch(url, { method: 'GET', mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      const aElement = document.createElement('a');
      const objectUrl = URL.createObjectURL(blob);
      aElement.href = objectUrl;
      aElement.download = fileName;
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(objectUrl);
      document.body.removeChild(aElement);
    })
    .catch(error => console.error('Fetch error:', error));
}
downloadFile('http://192.168.0.136/saveFile', 'sample.csv');

function saveFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/saveFile', true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (xhr.status === 200) {
      var blob = xhr.response;
      var aElement = document.createElement('a');
      var url = URL.createObjectURL(blob);
      aElement.href = url;
      aElement.download = 'sample.csv';
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(url);
      document.body.removeChild(aElement);
    }
  };
  xhr.send();
}

<a href="http://192.168.0.136/saveFile" download="sample.csv">Download CSV</a>

describe('Download File Test', function() {
  it('should successfully download a file using fetch', function(done) {
    const url = 'http://192.168.0.136/saveFile';
    fetch(url, { method: 'GET' })
      .then(response => {
        expect(response.ok).toBe(true);
        return response.blob();
      })
      .then(blob => {
        expect(blob.size).toBeGreaterThan(0);
        done();
      })
      .catch(done.fail);
  });
});

A JavaScript és a HTML fájlletöltési módszerek közötti különbségek felfedezése

Amikor JavaScript-en keresztül tölt le fájlokat, fontos megérteni, hogy a különböző módszerek hogyan hatnak egymásra a böngésző biztonsági szabályzataival. Az egyik oka annak, hogy a címsor közvetlen hivatkozása működik, mert a böngésző azonnal képes megoldani a kérést és kezelni a letöltést. Amikor azonban ezt JavaScripten keresztül próbálják meg, a böngészők szigorúbb szabályokat alkalmaznak, például megkövetelik a helyességet CORS (Cross-Origin Resource Sharing) beállításokat. Beállítás nélkül no-cors vagy cors módban, előfordulhat, hogy a letöltés nem történik meg.

Emellett a modern böngészők előnyben részesítik a fetch() API régebbi módszerekkel szemben, mint pl XMLHttpRequest, mivel jobban szabályozza a válaszok kezelését, különösen a folt vagy fájlszerű objektumok. A hibákat is kecsesebben kezeli, így megbízhatóbb megoldás a fájlok dinamikus letöltésére. A megfelelő MIME-típusok beállítása egy másik kulcsfontosságú tényező annak biztosításában, hogy az ügyfél megfelelően kezelje a fájlt.

Olyan alkalmazásokhoz, mint például a letöltés egy ESP32, elengedhetetlen annak biztosítása, hogy a szerver megfelelően kezelje a kéréseket és válaszokat, és a megfelelő MIME-típusokat és fejléceket szolgálja ki. A Fetch API jobb ígéretkezelést is lehetővé tesz, ami különösen hasznos az aszinkron környezetekben, például a fájlletöltésben, biztosítva, hogy a felhasználói élmény zökkenőmentes és érzékeny maradjon.