Rozwiązywanie problemów z pobieraniem plików JavaScript z serwera internetowego ESP32

Zrozumienie problemów z pobieraniem plików JavaScript w ESP32

Pobieranie plików z serwera internetowego może czasami być trudne, szczególnie w przypadku mikrokontrolerów takich jak ESP32. Podczas próby pobrania pliku przy użyciu JavaScript mogą się zdarzyć sytuacje, w których pobieranie będzie działać doskonale, jeśli uzyskasz dostęp bezpośrednio z przeglądarki, ale zakończy się niepowodzeniem, jeśli zostanie zainicjowane za pomocą skryptu.

W tym scenariuszu ESP32 udostępnia statyczny plik .CSV przy użyciu serwera WWW PsychicHTTP. Problem pojawia się, gdy pliku nie można pobrać za pomocą JavaScript, mimo że jest on dostępny poprzez bezpośrednie łącze HTML w przeglądarce. Ten problem może być frustrujący, ale jest częstym problemem podczas pracy z systemami wbudowanymi.

Kod JavaScript używa XMLHttpRequest do żądania pliku z ESP32, ale nie uruchamia to pobierania zgodnie z oczekiwaniami. W tym artykule dowiesz się, dlaczego bezpośredni link działa, ale metoda JavaScript nie. Zapewni także informacje na temat modyfikowania kodu JavaScript przy użyciu nowocześniejszego interfejsu API „fetch”, aby rozwiązać ten problem.

Ponadto omówimy, czy potrzebne są zmiany w kodzie ESP32 podczas przełączania z XMLHttpRequest na API pobierania. Badając te dwa pytania, odkryjemy podstawowy problem i zapewnimy rozwiązania zapewniające niezawodne pobieranie plików.

Analiza metod i rozwiązań pobierania plików JavaScript

W podanych przykładach celem było pobranie pliku CSV z serwera WWW ESP32 z uruchomionym PsychicHTTP. Pierwszy skrypt wykorzystuje nowoczesny Pobierz API, potężne narzędzie do tworzenia żądań HTTP w JavaScript. Ta metoda upraszcza proces poprzez obsługę obietnic i jest bardziej czytelna niż starsze techniki, takie jak XMLHttpRequest. Żądanie pobrania wysyła żądanie GET do ESP32, pobiera plik, a następnie konwertuje go na kropelka format, który jest niezbędny do obsługi danych binarnych, takich jak pliki CSV. Następnie generowany jest tymczasowy adres URL umożliwiający użytkownikowi pobranie pliku za pomocą znacznika zakotwiczenia.

Drugi skrypt jest alternatywą wykorzystującą XMLHttpRequest, bardziej tradycyjny sposób tworzenia żądań HTTP. Chociaż XMLHttpRequest jest starszy, nadal jest używany w wielu aplikacjach. W tym przykładzie Typ odpowiedzi jest ustawiony na „blob”, aby obsłużyć plik binarny zwracany przez serwer. Skrypt nasłuchuje odpowiedzi i po pomyślnym powrocie dynamicznie tworzy element kotwiczący, który uruchamia pobieranie. Ta metoda zapewnia bardziej szczegółową kontrolę nad żądaniem, ale brakuje jej prostoty i elastyczności interfejsu Fetch API, szczególnie w przypadku obsługi obietnic.

Trzecie rozwiązanie to rozwiązanie awaryjne, które w ogóle nie wymaga JavaScript. Używa znacznika zakotwiczenia HTML z rozszerzeniem pobierać atrybut, umożliwiający użytkownikom kliknięcie łącza i automatyczne pobranie pliku. Jest to najbardziej podstawowe rozwiązanie i nie wymaga żadnego skryptu. Jest jednak mniej elastyczny, ponieważ nie pozwala programowo obsługiwać pobierania plików ani dodawać żadnych warunków ani logiki przed uruchomieniem pobierania.

Każde z tych rozwiązań dotyczy innego przypadku użycia. Fetch API jest rozwiązaniem zalecanym dla nowoczesnych aplikacji ze względu na swoją prostotę i wydajność. XMLHttpRequest jest przydatny, gdy potrzebujesz większej kontroli nad żądaniem i odpowiedzią. Wreszcie rozwiązanie oparte wyłącznie na formacie HTML jest idealne w przypadku statycznych lub prostych stron internetowych, gdzie JavaScript nie jest potrzebny. Wdrażając jedną z tych metod, możesz zapewnić niezawodne pobieranie plików z serwera internetowego ESP32, poprawiając zarówno wygodę użytkownika, jak i funkcjonalność.

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

Odkrywanie różnic w metodach pobierania plików JavaScript i HTML

Podczas pobierania plików za pomocą JavaScript ważne jest, aby zrozumieć, w jaki sposób różne metody wpływają na zasady bezpieczeństwa przeglądarki. Jednym z powodów, dla których bezpośredni link do paska adresu działa, jest to, że przeglądarka może natychmiast rozpatrzyć żądanie i obsłużyć pobieranie. Jednak próbując tego dokonać za pomocą JavaScript, przeglądarki stosują bardziej rygorystyczne zasady, takie jak wymaganie poprawności CORS (Udostępnianie zasobów między źródłami). Bez ustawiania nie-kors Lub kor działa prawidłowo, pobieranie może nie nastąpić.

Ponadto nowoczesne przeglądarki preferują korzystanie z fetch() API w porównaniu ze starszymi metodami, takimi jak XMLHttpRequest, ponieważ zapewnia większą kontrolę nad sposobem obsługi odpowiedzi, szczególnie w przypadku kropelka lub obiekty przypominające pliki. Radzi sobie również z błędami, co czyni go bardziej niezawodnym rozwiązaniem do dynamicznego pobierania plików. Ustawienie właściwych typów MIME jest kolejnym kluczowym czynnikiem zapewniającym poprawną obsługę pliku przez klienta.

W przypadku aplikacji takich jak pobieranie z pliku ESP32ważne jest, aby serwer poprawnie obsługiwał żądania i odpowiedzi, obsługując prawidłowe typy MIME i nagłówki. Fetch API umożliwia także lepszą obsługę obietnic, co jest szczególnie przydatne w środowiskach asynchronicznych, takich jak pobieranie plików, zapewniając płynność i responsywność użytkownika.