Menyelesaikan Masalah Pengunduhan File JavaScript dari Server Web ESP32

Memahami Masalah Pengunduhan File JavaScript dengan ESP32

Mengunduh file dari server web terkadang rumit, terutama jika berhubungan dengan mikrokontroler seperti ESP32. Saat mencoba mengunduh file menggunakan JavaScript, ada kalanya unduhan berfungsi sempurna saat diakses langsung dari browser, namun gagal saat dimulai melalui skrip.

Dalam skenario ini, ESP32 menyajikan file .CSV statis menggunakan server web PsychicHTTP. Masalah muncul ketika file tidak diunduh melalui JavaScript, meskipun dapat diakses melalui tautan HTML langsung di browser. Masalah ini bisa membuat frustasi, tapi ini adalah masalah umum yang dihadapi saat bekerja dengan sistem tertanam.

Kode JavaScript menggunakan XMLHttpRequest untuk meminta file dari ESP32, namun tidak memicu pengunduhan seperti yang diharapkan. Artikel ini akan membahas mengapa tautan langsung berfungsi tetapi metode JavaScript tidak. Ini juga akan memberikan wawasan tentang cara memodifikasi JavaScript menggunakan API 'pengambilan' yang lebih modern untuk mengatasi masalah ini.

Selanjutnya, kita akan membahas apakah diperlukan perubahan pada kode ESP32 saat beralih dari XMLHttpRequest ke API pengambilan. Dengan memeriksa dua pertanyaan ini, kami akan mengungkap masalah mendasar dan memberikan solusi untuk pengunduhan file yang andal.

Menganalisis Metode dan Solusi Pengunduhan File JavaScript

Dalam contoh yang diberikan, tujuannya adalah mengunduh file CSV dari server web ESP32 yang menjalankan PsychicHTTP. Skrip pertama menggunakan skrip modern Ambil API, alat canggih untuk membuat permintaan HTTP dalam JavaScript. Metode ini menyederhanakan proses dengan menangani janji dan lebih mudah dibaca dibandingkan teknik lama seperti XMLHttpRequest. Permintaan pengambilan mengirimkan permintaan GET ke ESP32, mengambil file, dan kemudian mengubahnya menjadi gumpal format, yang penting untuk menangani data biner seperti file CSV. URL sementara kemudian dibuat untuk memungkinkan pengguna mengunduh file melalui tag jangkar.

Skrip kedua adalah alternatif menggunakan XMLHttpRequest, cara yang lebih tradisional dalam membuat permintaan HTTP. Meskipun XMLHttpRequest lebih lama, XMLHttpRequest masih digunakan di banyak aplikasi. Dalam contoh ini, tipe respons diatur ke 'gumpalan' untuk menangani file biner yang dikembalikan oleh server. Skrip mendengarkan responsnya, dan setelah berhasil kembali, skrip secara dinamis membuat elemen jangkar untuk memicu pengunduhan. Metode ini memberikan kontrol yang lebih terperinci atas permintaan, namun tidak memiliki kesederhanaan dan fleksibilitas seperti Fetch API, terutama saat menangani janji.

Solusi ketiga adalah fallback yang tidak memerlukan JavaScript sama sekali. Ini menggunakan tag jangkar HTML dengan unduh atribut, memungkinkan pengguna mengeklik tautan dan mengunduh file secara otomatis. Ini adalah solusi paling dasar dan tidak memerlukan skrip apa pun. Namun, ini kurang fleksibel, karena tidak memungkinkan Anda menangani pengunduhan file secara terprogram atau menambahkan kondisi atau logika apa pun sebelum memicu pengunduhan.

Masing-masing solusi ini menangani kasus penggunaan yang berbeda. Fetch API adalah solusi yang direkomendasikan untuk aplikasi modern karena kesederhanaan dan kinerjanya. XMLHttpRequest berguna ketika Anda memerlukan kontrol lebih besar atas permintaan dan respons. Terakhir, solusi khusus HTML sangat ideal untuk halaman web statis atau sederhana yang tidak memerlukan JavaScript. Dengan menerapkan salah satu metode ini, Anda dapat memastikan pengunduhan file yang andal dari server web ESP32, sehingga meningkatkan pengalaman dan fungsionalitas pengguna.

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

Menjelajahi Perbedaan Metode Pengunduhan File JavaScript dan HTML

Saat mengunduh file melalui JavaScript, penting untuk memahami bagaimana berbagai metode berinteraksi dengan kebijakan keamanan browser. Salah satu alasan tautan bilah alamat langsung berfungsi adalah karena browser dapat segera menyelesaikan permintaan dan menangani pengunduhan. Namun, ketika mencoba melakukan ini melalui JavaScript, browser menerapkan aturan yang lebih ketat, seperti mengharuskan yang benar KOR (Berbagi Sumber Daya Lintas Asal). Tanpa pengaturan tanpa kors atau kor mode dengan benar, pengunduhan mungkin tidak terjadi.

Selain itu, browser modern lebih memilih penggunaan fetch() API melalui metode lama seperti XMLHttpRequest, karena memberikan kontrol lebih besar terhadap cara penanganan respons, terutama untuk gumpal atau objek seperti file. Ini juga menangani kesalahan dengan lebih baik, menjadikannya solusi yang lebih andal untuk mengunduh file secara dinamis. Menetapkan jenis MIME yang tepat merupakan faktor kunci lainnya dalam memastikan bahwa file ditangani dengan benar oleh klien.

Untuk aplikasi seperti mengunduh dari an ESP32, sangat penting untuk memastikan bahwa server menangani permintaan dan respons dengan benar, menyajikan jenis MIME dan header yang benar. Fetch API juga memungkinkan penanganan janji yang lebih baik, yang sangat berguna dalam lingkungan asinkron seperti pengunduhan file, memastikan pengalaman pengguna tetap lancar dan responsif.