Rješavanje problema s preuzimanjem JavaScript datoteke s web-poslužitelja ESP32

Razumijevanje problema preuzimanja JavaScript datoteka s ESP32

Preuzimanje datoteka s web-poslužitelja ponekad može biti teško, osobito kada se radi o mikrokontrolerima poput ESP32. Prilikom pokušaja preuzimanja datoteke pomoću JavaScripta, može doći do slučajeva kada preuzimanje radi savršeno kada mu se pristupi izravno iz preglednika, ali ne uspije kada se pokrene putem skripte.

U ovom scenariju, ESP32 poslužuje statičnu .CSV datoteku pomoću web poslužitelja PsychicHTTP. Problem nastaje kada se datoteka ne preuzima putem JavaScripta, unatoč tome što joj se može pristupiti putem izravne HTML veze u pregledniku. Ovaj problem može biti frustrirajući, ali čest je s kojim se suočavate pri radu s ugrađenim sustavima.

JavaScript kôd koristi XMLHttpRequest za traženje datoteke od ESP32, ali ne pokreće preuzimanje kako se očekuje. Ovaj članak će istražiti zašto izravna veza radi, a JavaScript metoda ne. Također će pružiti uvid u to kako modificirati JavaScript pomoću modernijeg 'fetch' API-ja za rješavanje ovog problema.

Nadalje, raspravit ćemo jesu li potrebne promjene u ESP32 kodu pri prelasku s XMLHttpRequest na API za dohvaćanje. Ispitivanjem ova dva pitanja otkrit ćemo temeljni problem i pružiti rješenja za pouzdano preuzimanje datoteka.

Analiza metoda i rješenja preuzimanja JavaScript datoteke

U navedenim primjerima, cilj je bio preuzeti CSV datoteku s ESP32 web poslužitelja koji pokreće PsychicHTTP. Prvi scenarij koristi moderni API za dohvaćanje, moćan alat za izradu HTTP zahtjeva u JavaScriptu. Ova metoda pojednostavljuje proces rukovanjem obećanjima i čitljivija je od starijih tehnika kao što je XMLHttpRequest. Zahtjev za dohvaćanje šalje GET zahtjev ESP32, dohvaća datoteku i zatim je pretvara u mrlja formatu, koji je neophodan za rukovanje binarnim podacima poput CSV datoteka. Zatim se generira privremeni URL koji korisniku omogućuje preuzimanje datoteke putem oznake sidra.

Druga skripta je alternativa koja koristi XMLHttpRequest, tradicionalniji način postavljanja HTTP zahtjeva. Iako je XMLHttpRequest stariji, još uvijek se koristi u mnogim aplikacijama. U ovom primjeru, responseType je postavljen na 'blob' za rukovanje binarnom datotekom koju vraća poslužitelj. Skripta osluškuje odgovor i nakon uspješnog povratka dinamički stvara element sidra za pokretanje preuzimanja. Ova metoda pruža detaljniju kontrolu nad zahtjevom, ali joj nedostaje jednostavnost i fleksibilnost API-ja za dohvaćanje, osobito pri rukovanju obećanjima.

Treće rješenje je zamjena koja uopće ne zahtijeva JavaScript. Koristi HTML oznaku sidra s preuzeti atribut, omogućujući korisnicima da kliknu na vezu i automatski preuzmu datoteku. Ovo je najosnovnije rješenje i ne zahtijeva skriptiranje. Međutim, manje je fleksibilan jer vam ne dopušta programsko rukovanje preuzimanjima datoteka ili dodavanje bilo kakvih uvjeta ili logike prije pokretanja preuzimanja.

Svako od ovih rješenja bavi se drugačijim slučajem upotrebe. Fetch API je preporučeno rješenje za moderne aplikacije zbog svoje jednostavnosti i performansi. XMLHttpRequest je koristan kada vam je potrebna veća kontrola nad zahtjevom i odgovorom. Na kraju, rješenje samo za HTML idealno je za statične ili jednostavne web stranice gdje JavaScript nije potreban. Implementacijom jedne od ovih metoda možete osigurati pouzdano preuzimanje datoteka s ESP32 web poslužitelja, poboljšavajući korisničko iskustvo i funkcionalnost.

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

Istraživanje razlika u metodama preuzimanja JavaScript i HTML datoteka

Kada preuzimate datoteke putem JavaScripta, važno je razumjeti kako različite metode stupaju u interakciju sa sigurnosnim pravilima preglednika. Jedan od razloga zašto poveznica izravne adresne trake radi je taj što preglednik može odmah riješiti zahtjev i rukovati preuzimanjem. Međutim, kada to pokušavaju putem JavaScripta, preglednici primjenjuju stroža pravila, kao što je zahtijevanje ispravnog CORS (Cross-Origin Resource Sharing) postavke. Bez postavljanja no-cors ili cors ispravno, preuzimanje se možda neće dogoditi.

Osim toga, moderni preglednici preferiraju korištenje fetch() API preko starijih metoda poput XMLHttpRequest, jer pruža veću kontrolu nad načinom na koji se postupa s odgovorima, posebno za mrlja ili objekti nalik datoteci. Također se elegantnije bavi pogreškama, što ga čini pouzdanijim rješenjem za dinamičko preuzimanje datoteka. Postavljanje ispravnih vrsta MIME još je jedan ključni faktor u osiguravanju da klijent ispravno rukuje datotekom.

Za aplikacije poput preuzimanja s ESP32, ključno je osigurati da poslužitelj ispravno obrađuje zahtjeve i odgovore, poslužujući ispravne MIME vrste i zaglavlja. Fetch API također omogućuje bolje rukovanje obećanjima, što je posebno korisno u asinkronim okruženjima kao što je preuzimanje datoteka, osiguravajući da korisničko iskustvo ostaje glatko i brzo.