Riešenie problémov so sťahovaním súborov JavaScript z webového servera ESP32

Pochopenie problémov so sťahovaním súborov JavaScript s ESP32

Sťahovanie súborov z webového servera môže byť niekedy zložité, najmä pri práci s mikrokontrolérmi, ako je ESP32. Pri pokuse o stiahnutie súboru pomocou JavaScriptu môžu nastať prípady, keď sťahovanie funguje perfektne, keď k nemu pristupujete priamo z prehliadača, ale zlyhá, keď sa spúšťa prostredníctvom skriptu.

V tomto scenári ESP32 obsluhuje statický súbor .CSV pomocou webového servera PsychicHTTP. Problém nastáva, keď sa súbor nestiahne cez JavaScript, napriek tomu, že je dostupný cez priamy HTML odkaz v prehliadači. Tento problém môže byť frustrujúci, ale pri práci so vstavanými systémami je bežný.

Kód JavaScript používa XMLHttpRequest na vyžiadanie súboru z ESP32, ale nespustí sťahovanie podľa očakávania. Tento článok preskúma, prečo priamy odkaz funguje, ale metóda JavaScript nie. Poskytne tiež informácie o tom, ako upraviť JavaScript pomocou modernejšieho rozhrania API na vyriešenie problému.

Ďalej budeme diskutovať o tom, či sú potrebné zmeny v kóde ESP32 pri prechode z XMLHttpRequest na fetch API. Preskúmaním týchto dvoch otázok odhalíme základný problém a poskytneme riešenia pre spoľahlivé sťahovanie súborov.

Analýza metód a riešení sťahovania súborov JavaScript

V uvedených príkladoch bolo cieľom stiahnuť súbor CSV z webového servera ESP32 so systémom PsychicHTTP. Prvý skript využíva modernu Fetch API, výkonný nástroj na vytváranie požiadaviek HTTP v JavaScripte. Táto metóda zjednodušuje proces spracovaním prísľubov a je čitateľnejšia ako staršie techniky ako XMLHttpRequest. Požiadavka na vyzdvihnutie odošle požiadavku GET do ESP32, načíta súbor a potom ho skonvertuje na kvapka formát, ktorý je nevyhnutný na prácu s binárnymi údajmi, ako sú súbory CSV. Potom sa vygeneruje dočasná adresa URL, ktorá používateľovi umožní stiahnuť súbor prostredníctvom značky ukotvenia.

Druhý skript je alternatívou pomocou XMLHttpRequest, tradičnejšieho spôsobu vytvárania požiadaviek HTTP. Hoci XMLHttpRequest je starší, stále sa používa v mnohých aplikáciách. V tomto príklade responseType je nastavený na „blob“, aby spracoval binárny súbor vrátený serverom. Skript počúva odpoveď a po úspešnom návrate dynamicky vytvorí kotviaci prvok, ktorý spustí sťahovanie. Táto metóda poskytuje podrobnejšiu kontrolu nad požiadavkou, ale chýba jej jednoduchosť a flexibilita rozhrania Fetch API, najmä pri spracovávaní sľubov.

Tretím riešením je záložné riešenie, ktoré vôbec nevyžaduje JavaScript. Používa HTML kotvovú značku s stiahnuť atribút, ktorý umožňuje používateľom kliknúť na odkaz a automaticky stiahnuť súbor. Toto je najzákladnejšie riešenie a nevyžaduje žiadne skriptovanie. Je však menej flexibilný, pretože vám neumožňuje programovo spracovávať sťahovanie súborov ani pridávať žiadne podmienky alebo logiku pred spustením sťahovania.

Každé z týchto riešení rieši iný prípad použitia. Fetch API je odporúčané riešenie pre moderné aplikácie kvôli jeho jednoduchosti a výkonu. XMLHttpRequest je užitočný, keď potrebujete väčšiu kontrolu nad požiadavkou a odpoveďou. A nakoniec, riešenie len pre HTML je ideálne pre statické alebo jednoduché webové stránky, kde nie je potrebný JavaScript. Implementáciou jednej z týchto metód môžete zabezpečiť spoľahlivé sťahovanie súborov z webového servera ESP32, čím sa zlepší používateľská skúsenosť aj funkčnosť.

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);
  });
});

Skúmanie rozdielov v metódach sťahovania súborov JavaScript a HTML

Pri sťahovaní súborov cez JavaScript je dôležité pochopiť, ako rôzne metódy interagujú s bezpečnostnými zásadami prehliadača. Jedným z dôvodov, prečo funguje priamy odkaz na panel s adresou, je to, že prehliadač dokáže okamžite vyriešiť požiadavku a spracovať sťahovanie. Pri pokuse o to prostredníctvom JavaScriptu však prehliadače uplatňujú prísnejšie pravidlá, ako je napríklad požiadavka správnosti CORS (Cross-Origin Resource Sharing) nastavenia. Bez nastavenia no-cors alebo kor správne, sťahovanie nemusí prebehnúť.

Okrem toho moderné prehliadače uprednostňujú použitie fetch() API oproti starším metódam, napr XMLHttpRequest, pretože poskytuje väčšiu kontrolu nad tým, ako sa spracúvajú odpovede, najmä pre kvapka alebo objekty podobné súborom. Tiež zvláda chyby elegantnejšie, vďaka čomu je spoľahlivejším riešením na dynamické sťahovanie súborov. Nastavenie správnych typov MIME je ďalším kľúčovým faktorom na zabezpečenie toho, aby klient so súborom narábal správne.

Pre aplikácie, ako je sťahovanie z a ESP32, je dôležité zabezpečiť, aby server správne spracovával požiadavky a odpovede a poskytoval správne typy MIME a hlavičky. Rozhranie Fetch API tiež umožňuje lepšie spracovanie prísľubov, čo je užitočné najmä v asynchrónnych prostrediach, ako je sťahovanie súborov, čím sa zabezpečí, že používateľská skúsenosť zostane plynulá a pohotová.