Řešení problémů se stahováním souborů JavaScript z webového serveru ESP32

Vysvětlení problémů se stahováním souborů JavaScript s ESP32

Stahování souborů z webového serveru může být někdy složité, zejména při práci s mikrokontroléry, jako je ESP32. Při pokusu o stažení souboru pomocí JavaScriptu mohou nastat případy, kdy stahování funguje perfektně, když k němu přistupujete přímo z prohlížeče, ale selže, když je spuštěno pomocí skriptu.

V tomto scénáři ESP32 obsluhuje statický soubor .CSV pomocí webového serveru PsychicHTTP. Problém nastává, když se soubor nestáhne přes JavaScript, přestože je přístupný přes přímý HTML odkaz v prohlížeči. Tento problém může být frustrující, ale při práci s vestavěnými systémy je běžný.

Kód JavaScript používá XMLHttpRequest k vyžádání souboru z ESP32, ale nespustí stahování podle očekávání. Tento článek prozkoumá, proč přímý odkaz funguje, ale metoda JavaScript ne. Poskytne také informace o tom, jak upravit JavaScript pomocí modernějšího 'fetch' API k vyřešení tohoto problému.

Dále probereme, zda jsou nutné změny v kódu ESP32 při přechodu z XMLHttpRequest na fetch API. Prozkoumáním těchto dvou otázek odhalíme základní problém a poskytneme řešení pro spolehlivé stahování souborů.

Analýza metod a řešení stahování souborů JavaScript

V uvedených příkladech bylo cílem stáhnout soubor CSV z webového serveru ESP32, na kterém běží PsychicHTTP. První skript využívá moderní Načíst API, výkonný nástroj pro vytváření požadavků HTTP v JavaScriptu. Tato metoda zjednodušuje proces zpracováním slibů a je čitelnější než starší techniky, jako je XMLHttpRequest. Požadavek na načtení odešle požadavek GET do ESP32, načte soubor a poté jej převede na kapka formát, který je nezbytný pro práci s binárními daty, jako jsou soubory CSV. Poté se vygeneruje dočasná adresa URL, která uživateli umožní stáhnout soubor prostřednictvím značky ukotvení.

Druhý skript je alternativou využívající XMLHttpRequest, což je tradičnější způsob vytváření požadavků HTTP. Ačkoli je XMLHttpRequest starší, stále se používá v mnoha aplikacích. V tomto příkladu je typ odezvy je nastaven na „blob“, aby zpracoval binární soubor vracený serverem. Skript naslouchá na odpověď a po úspěšném návratu dynamicky vytvoří kotvící prvek, který spustí stahování. Tato metoda poskytuje podrobnější kontrolu nad požadavkem, ale postrádá jednoduchost a flexibilitu rozhraní Fetch API, zejména při zpracování slibů.

Třetím řešením je záložní řešení, které vůbec nevyžaduje JavaScript. Používá značku kotvy HTML s příponou stáhnout atribut, který uživatelům umožňuje kliknout na odkaz a automaticky stáhnout soubor. Toto je nejzákladnější řešení a nevyžaduje žádné skriptování. Je však méně flexibilní, protože vám neumožňuje programově zpracovávat stahování souborů nebo přidávat jakékoli podmínky nebo logiku před spuštěním stahování.

Každé z těchto řešení řeší jiný případ použití. Fetch API je doporučeným řešením pro moderní aplikace kvůli své jednoduchosti a výkonu. XMLHttpRequest je užitečný, když potřebujete větší kontrolu nad požadavkem a odpovědí. A konečně, řešení pouze pro HTML je ideální pro statické nebo jednoduché webové stránky, kde není potřeba JavaScript. Implementací jedné z těchto metod můžete zajistit spolehlivé stahování souborů z webového serveru ESP32 a zlepšit tak uživatelskou zkušenost i funkčnost.

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

Zkoumání rozdílů v metodách stahování souborů JavaScript a HTML

Při stahování souborů pomocí JavaScriptu je důležité pochopit, jak různé metody interagují s bezpečnostními zásadami prohlížeče. Jedním z důvodů, proč funguje přímý odkaz na adresní řádek, je to, že prohlížeč dokáže okamžitě vyřešit požadavek a zpracovat stahování. Při pokusu o to prostřednictvím JavaScriptu však prohlížeče uplatňují přísnější pravidla, například vyžadují správnost CORS (Cross-Origin Resource Sharing). Bez nastavení no-cors nebo kor správně, nemusí ke stažení dojít.

Kromě toho moderní prohlížeče preferují použití fetch() API přes starší metody jako XMLHttpRequest, protože poskytuje větší kontrolu nad tím, jak jsou zpracovávány odpovědi, zejména pro kapka nebo soubory podobné objektům. Také zvládá chyby elegantněji, takže je spolehlivějším řešením pro dynamické stahování souborů. Nastavení správných typů MIME je dalším klíčovým faktorem pro zajištění správného zacházení se souborem klientem.

Pro aplikace, jako je stahování z ESP32, je důležité zajistit, aby server správně zpracovával požadavky a odpovědi a poskytoval správné typy MIME a hlavičky. Rozhraní Fetch API také umožňuje lepší zpracování slibů, což je užitečné zejména v asynchronních prostředích, jako je stahování souborů, což zajišťuje, že uživatelská zkušenost zůstane hladká a pohotová.