Giải quyết các vấn đề tải xuống tệp JavaScript từ máy chủ web ESP32

Hiểu các vấn đề tải xuống tệp JavaScript với ESP32

Việc tải xuống tệp từ máy chủ web đôi khi có thể khó khăn, đặc biệt là khi xử lý các bộ vi điều khiển như ESP32. Khi cố gắng tải xuống tệp bằng JavaScript, có thể có trường hợp quá trình tải xuống hoạt động hoàn hảo khi được truy cập trực tiếp từ trình duyệt nhưng không thành công khi bắt đầu thông qua tập lệnh.

Trong trường hợp này, ESP32 đang phân phát tệp .CSV tĩnh bằng máy chủ web PsychicHTTP. Sự cố phát sinh khi tệp không tải xuống thông qua JavaScript, mặc dù có thể truy cập được thông qua liên kết HTML trực tiếp trong trình duyệt. Vấn đề này có thể khiến bạn khó chịu nhưng lại là vấn đề thường gặp khi làm việc với các hệ thống nhúng.

Mã JavaScript sử dụng XMLHttpRequest để yêu cầu tệp từ ESP32, nhưng nó không kích hoạt quá trình tải xuống như mong đợi. Bài viết này sẽ khám phá lý do tại sao liên kết trực tiếp hoạt động nhưng phương pháp JavaScript thì không. Nó cũng sẽ cung cấp thông tin chi tiết về cách sửa đổi JavaScript bằng API 'tìm nạp' hiện đại hơn để giải quyết vấn đề này.

Hơn nữa, chúng ta sẽ thảo luận xem có cần thay đổi mã ESP32 khi chuyển từ XMLHttpRequest sang API tìm nạp hay không. Bằng cách kiểm tra hai câu hỏi này, chúng tôi sẽ phát hiện ra vấn đề tiềm ẩn và cung cấp giải pháp để tải xuống tệp đáng tin cậy.

Phân tích các phương pháp và giải pháp tải xuống tệp JavaScript

Trong các ví dụ được cung cấp, mục tiêu là tải xuống tệp CSV từ máy chủ web ESP32 chạy PsychicHTTP. Kịch bản đầu tiên sử dụng hiện đại Tìm nạp API, một công cụ mạnh mẽ để thực hiện các yêu cầu HTTP trong JavaScript. Phương pháp này đơn giản hóa quy trình bằng cách xử lý các lời hứa và dễ đọc hơn các kỹ thuật cũ hơn như XMLHttpRequest. Yêu cầu tìm nạp gửi yêu cầu GET tới ESP32, truy xuất tệp và sau đó chuyển đổi nó thành đốm màu định dạng cần thiết để xử lý dữ liệu nhị phân như tệp CSV. Sau đó, một URL tạm thời được tạo để cho phép người dùng tải xuống tệp thông qua thẻ liên kết.

Tập lệnh thứ hai là một tập lệnh thay thế sử dụng XMLHttpRequest, một cách tạo yêu cầu HTTP truyền thống hơn. Mặc dù XMLHttpRequest đã cũ hơn nhưng nó vẫn được sử dụng trong nhiều ứng dụng. Trong ví dụ này, loại phản hồi được đặt thành ‘blob’ để xử lý tệp nhị phân được máy chủ trả về. Tập lệnh sẽ lắng nghe phản hồi và khi quay lại thành công, nó sẽ tự động tạo một phần tử neo để kích hoạt tải xuống. Phương pháp này cung cấp khả năng kiểm soát chi tiết hơn đối với yêu cầu, nhưng nó thiếu tính đơn giản và linh hoạt của API tìm nạp, đặc biệt là khi xử lý các lời hứa.

Giải pháp thứ ba là một giải pháp dự phòng hoàn toàn không yêu cầu JavaScript. Nó sử dụng thẻ neo HTML với tải về thuộc tính, cho phép người dùng nhấp vào liên kết và tự động tải xuống tệp. Đây là giải pháp cơ bản nhất và không yêu cầu bất kỳ tập lệnh nào. Tuy nhiên, nó kém linh hoạt hơn vì nó không cho phép bạn xử lý việc tải xuống tệp theo chương trình hoặc thêm bất kỳ điều kiện hay logic nào trước khi kích hoạt tải xuống.

Mỗi giải pháp này giải quyết một trường hợp sử dụng khác nhau. API tìm nạp là giải pháp được đề xuất cho các ứng dụng hiện đại vì tính đơn giản và hiệu suất của nó. XMLHttpRequest rất hữu ích khi bạn cần kiểm soát nhiều hơn đối với yêu cầu và phản hồi. Cuối cùng, giải pháp chỉ dành cho HTML là lý tưởng cho các trang web tĩnh hoặc đơn giản không cần đến JavaScript. Bằng cách triển khai một trong những phương pháp này, bạn có thể đảm bảo tải xuống tệp đáng tin cậy từ máy chủ web ESP32, cải thiện cả trải nghiệm và chức năng của người dùng.

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

Khám phá sự khác biệt trong phương pháp tải xuống tệp JavaScript và HTML

Khi tải xuống tệp qua JavaScript, điều quan trọng là phải hiểu cách các phương pháp khác nhau tương tác với chính sách bảo mật của trình duyệt. Một lý do khiến liên kết thanh địa chỉ trực tiếp hoạt động là vì trình duyệt có thể giải quyết ngay yêu cầu và xử lý việc tải xuống. Tuy nhiên, khi thử điều này thông qua JavaScript, trình duyệt sẽ áp dụng các quy tắc chặt chẽ hơn, chẳng hạn như yêu cầu chính xác CORS Cài đặt (Chia sẻ tài nguyên nguồn gốc chéo). Không cần cài đặt không có cors hoặc cors chế độ chính xác, quá trình tải xuống có thể không xảy ra.

Ngoài ra, các trình duyệt hiện đại thích sử dụng fetch() API trên các phương thức cũ hơn như XMLHttpRequest, vì nó cung cấp nhiều quyền kiểm soát hơn về cách xử lý phản hồi, đặc biệt đối với đốm màu hoặc các đối tượng giống như tập tin. Nó cũng xử lý lỗi một cách khéo léo hơn, khiến nó trở thành một giải pháp đáng tin cậy hơn để tải tệp xuống một cách linh hoạt. Đặt loại MIME thích hợp là một yếu tố quan trọng khác để đảm bảo rằng tệp được máy khách xử lý chính xác.

Đối với các ứng dụng như tải xuống từ một ESP32, điều quan trọng là phải đảm bảo rằng máy chủ xử lý chính xác các yêu cầu và phản hồi, cung cấp đúng loại và tiêu đề MIME. API tìm nạp cũng cho phép xử lý lời hứa tốt hơn, đặc biệt hữu ích trong các môi trường không đồng bộ như tải xuống tệp, đảm bảo trải nghiệm người dùng vẫn mượt mà và phản hồi nhanh.