„JavaScript“ failų atsisiuntimo iš ESP32 žiniatinklio serverio problemų sprendimas

„JavaScript“ failų atsisiuntimo problemų, susijusių su ESP32, supratimas

Failų atsisiuntimas iš žiniatinklio serverio kartais gali būti sudėtingas, ypač dirbant su mikrovaldikliais, tokiais kaip ESP32. Bandant atsisiųsti failą naudojant „JavaScript“, gali būti atvejų, kai atsisiuntimas veikia puikiai, kai pasiekiamas tiesiogiai iš naršyklės, bet nepavyksta, kai jis pradedamas naudojant scenarijų.

Pagal šį scenarijų ESP32 aptarnauja statinį .CSV failą naudodamas PsychicHTTP žiniatinklio serverį. Problema kyla, kai failas neatsisiunčiamas naudojant „JavaScript“, nors jį galima pasiekti naudojant tiesioginę HTML nuorodą naršyklėje. Ši problema gali būti varginanti, tačiau su ja dažnai susiduriama dirbant su įterptosiomis sistemomis.

„JavaScript“ kodas naudoja XMLHttpRequest, kad paprašytų failo iš ESP32, tačiau jis nesuaktyvina atsisiuntimo, kaip tikėtasi. Šiame straipsnyje bus nagrinėjama, kodėl veikia tiesioginė nuoroda, bet ne „JavaScript“ metodas. Taip pat bus pateikta įžvalgų, kaip pakeisti „JavaScript“ naudojant modernesnę „ftch“ API, kad būtų išspręsta ši problema.

Be to, aptarsime, ar reikia keisti ESP32 kodą, kai pereinama iš XMLHttpRequest į gavimo API. Išnagrinėję šiuos du klausimus išsiaiškinsime pagrindinę problemą ir pateiksime patikimo failų atsisiuntimo sprendimus.

„JavaScript“ failų atsisiuntimo metodų ir sprendimų analizė

Pateiktuose pavyzdžiuose tikslas buvo atsisiųsti CSV failą iš ESP32 žiniatinklio serverio, kuriame veikia PsychicHTTP. Pirmajame scenarijuje naudojamas modernus Gauti API, galingas įrankis HTTP užklausoms pateikti JavaScript. Šis metodas supaprastina procesą vykdydamas pažadus ir yra lengviau skaitomas nei senesni metodai, tokie kaip XMLHttpRequest. Gavimo užklausa siunčia GET užklausą ESP32, nuskaito failą ir konvertuoja jį į dėmė formatu, kuris yra būtinas norint tvarkyti dvejetainius duomenis, pvz., CSV failus. Tada sugeneruojamas laikinas URL, kad vartotojas galėtų atsisiųsti failą naudodamas inkaro žymą.

Antrasis scenarijus yra alternatyva naudojant XMLHttpRequest, tradicinį HTTP užklausų pateikimo būdą. Nors XMLHttpRequest yra senesnė, ji vis dar naudojama daugelyje programų. Šiame pavyzdyje atsakymo tipas nustatyta kaip „blob“, kad būtų galima apdoroti dvejetainį failą, kurį grąžina serveris. Scenarijus klauso atsakymo, o sėkmingai grįžęs dinamiškai sukuria prierašo elementą, kad suaktyvintų atsisiuntimą. Šis metodas suteikia išsamesnę užklausos kontrolę, tačiau jam trūksta „Fettch API“ paprastumo ir lankstumo, ypač vykdant pažadus.

Trečias sprendimas yra atsarginis variantas, kuriam visiškai nereikia „JavaScript“. Jis naudoja HTML inkaro žymą su parsisiųsti atributas, leidžiantis vartotojams spustelėti nuorodą ir automatiškai atsisiųsti failą. Tai pats paprasčiausias sprendimas, kuriam nereikia jokių scenarijų. Tačiau jis ne toks lankstus, nes neleidžia programiškai tvarkyti failų atsisiuntimų arba pridėti jokių sąlygų ar logikos prieš suaktyvinant atsisiuntimą.

Kiekvienas iš šių sprendimų skirtas skirtingiems naudojimo atvejams. „Fettch“ API yra rekomenduojamas sprendimas šiuolaikinėms programoms dėl savo paprastumo ir našumo. XMLHttpRequest naudinga, kai reikia labiau kontroliuoti užklausą ir atsakymą. Galiausiai, tik HTML sprendimas idealiai tinka statiniams arba paprastiems tinklalapiams, kur nereikia JavaScript. Įdiegę vieną iš šių metodų, galite užtikrinti patikimą failų atsisiuntimą iš ESP32 žiniatinklio serverio, pagerindami vartotojo patirtį ir funkcionalumą.

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

„JavaScript“ ir HTML failų atsisiuntimo metodų skirtumų tyrinėjimas

Atsisiunčiant failus per „JavaScript“, svarbu suprasti, kaip skirtingi metodai sąveikauja su naršyklės saugos politika. Viena iš priežasčių, kodėl veikia tiesioginė adreso juostos nuoroda, yra ta, kad naršyklė gali iš karto išspręsti užklausą ir apdoroti atsisiuntimą. Tačiau bandydamos tai padaryti naudodami „JavaScript“, naršyklės taiko griežtesnes taisykles, pvz., reikalauja teisingos CORS (Kryžminio šaltinio išteklių bendrinimo) nustatymus. Be nustatymo no-cors arba kors režimus, atsisiuntimas gali neįvykti.

Be to, šiuolaikinės naršyklės nori naudoti fetch() API, palyginti su senesniais metodais, pvz XMLHttpRequest, nes ji suteikia daugiau galimybių valdyti, kaip tvarkomi atsakymai, ypač dėmė arba į failą panašūs objektai. Jis taip pat grakščiau tvarko klaidas, todėl tai yra patikimesnis sprendimas dinamiškai atsisiųsti failus. Tinkamų MIME tipų nustatymas yra dar vienas svarbus veiksnys užtikrinant, kad klientas tinkamai tvarkytų failą.

Programoms, pvz., atsisiuntimui iš ESP32, labai svarbu užtikrinti, kad serveris tinkamai tvarkytų užklausas ir atsakymus, teikdamas teisingus MIME tipus ir antraštes. „Fettch“ API taip pat leidžia geriau valdyti pažadus, o tai ypač naudinga asinchroninėje aplinkoje, pvz., atsisiunčiant failus, užtikrinant, kad naudotojo patirtis būtų sklandi ir reaguojanti.