ESP32 ਵੈਬਸਰਵਰ ਤੋਂ JavaScript ਫਾਈਲ ਡਾਉਨਲੋਡ ਮੁੱਦਿਆਂ ਨੂੰ ਹੱਲ ਕਰਨਾ

ESP32 ਨਾਲ JavaScript ਫਾਈਲ ਡਾਊਨਲੋਡ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਸਮਝਣਾ

ਵੈਬਸਰਵਰ ਤੋਂ ਫਾਈਲਾਂ ਨੂੰ ਡਾਉਨਲੋਡ ਕਰਨਾ ਕਈ ਵਾਰ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਜਦੋਂ ESP32 ਵਰਗੇ ਮਾਈਕ੍ਰੋਕੰਟਰੋਲਰ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹੋ। ਜਦੋਂ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਫਾਈਲ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਅਜਿਹੀਆਂ ਉਦਾਹਰਣਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜਿੱਥੇ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਸਿੱਧੇ ਐਕਸੈਸ ਕੀਤੇ ਜਾਣ 'ਤੇ ਡਾਉਨਲੋਡ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ ਪਰ ਇੱਕ ਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਸ਼ੁਰੂ ਕੀਤੇ ਜਾਣ 'ਤੇ ਅਸਫਲ ਹੋ ਜਾਂਦਾ ਹੈ।

ਇਸ ਦ੍ਰਿਸ਼ ਵਿੱਚ, ESP32 ਇੱਕ PsychicHTTP ਵੈਬਸਰਵਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਥਿਰ .CSV ਫਾਈਲ ਦੀ ਸੇਵਾ ਕਰ ਰਿਹਾ ਹੈ। ਸਮੱਸਿਆ ਉਦੋਂ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਿੱਧੇ HTML ਲਿੰਕ ਰਾਹੀਂ ਪਹੁੰਚਯੋਗ ਹੋਣ ਦੇ ਬਾਵਜੂਦ, ਫ਼ਾਈਲ JavaScript ਰਾਹੀਂ ਡਾਊਨਲੋਡ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਇਹ ਮੁੱਦਾ ਨਿਰਾਸ਼ਾਜਨਕ ਹੋ ਸਕਦਾ ਹੈ, ਪਰ ਏਮਬੈਡਡ ਸਿਸਟਮਾਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਇਹ ਇੱਕ ਆਮ ਸਮੱਸਿਆ ਹੈ।

JavaScript ਕੋਡ ESP32 ਤੋਂ ਫਾਈਲ ਦੀ ਬੇਨਤੀ ਕਰਨ ਲਈ ਇੱਕ XMLHttpRequest ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਉਮੀਦ ਅਨੁਸਾਰ ਡਾਊਨਲੋਡ ਨੂੰ ਟਰਿੱਗਰ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਹ ਲੇਖ ਖੋਜ ਕਰੇਗਾ ਕਿ ਸਿੱਧਾ ਲਿੰਕ ਕਿਉਂ ਕੰਮ ਕਰਦਾ ਹੈ ਪਰ JavaScript ਵਿਧੀ ਨਹੀਂ ਕਰਦੀ। ਇਹ ਇਸ ਮੁੱਦੇ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਇੱਕ ਹੋਰ ਆਧੁਨਿਕ 'ਫੋਚ' API ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ JavaScript ਨੂੰ ਕਿਵੇਂ ਸੰਸ਼ੋਧਿਤ ਕਰਨਾ ਹੈ ਬਾਰੇ ਸਮਝ ਪ੍ਰਦਾਨ ਕਰੇਗਾ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਅਸੀਂ XMLHttpRequest ਤੋਂ fetch API 'ਤੇ ਸਵਿਚ ਕਰਨ ਵੇਲੇ ESP32 ਕੋਡ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦੀ ਲੋੜ ਪੈਣ 'ਤੇ ਚਰਚਾ ਕਰਾਂਗੇ। ਇਹਨਾਂ ਦੋ ਸਵਾਲਾਂ ਦੀ ਜਾਂਚ ਕਰਕੇ, ਅਸੀਂ ਅੰਤਰੀਵ ਸਮੱਸਿਆ ਦਾ ਪਤਾ ਲਗਾਵਾਂਗੇ ਅਤੇ ਭਰੋਸੇਯੋਗ ਫਾਈਲ ਡਾਊਨਲੋਡਾਂ ਲਈ ਹੱਲ ਪ੍ਰਦਾਨ ਕਰਾਂਗੇ।

JavaScript ਫਾਈਲ ਡਾਊਨਲੋਡ ਕਰਨ ਦੇ ਢੰਗਾਂ ਅਤੇ ਹੱਲਾਂ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਨਾ

ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ, ਟੀਚਾ PsychicHTTP ਚਲਾ ਰਹੇ ESP32 ਵੈੱਬ ਸਰਵਰ ਤੋਂ ਇੱਕ CSV ਫਾਈਲ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨਾ ਸੀ। ਪਹਿਲੀ ਲਿਪੀ ਆਧੁਨਿਕ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ API ਪ੍ਰਾਪਤ ਕਰੋ, JavaScript ਵਿੱਚ HTTP ਬੇਨਤੀਆਂ ਕਰਨ ਲਈ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸੰਦ ਹੈ। ਇਹ ਵਿਧੀ ਵਾਅਦਿਆਂ ਨੂੰ ਸੰਭਾਲਣ ਦੁਆਰਾ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਪੁਰਾਣੀਆਂ ਤਕਨੀਕਾਂ ਜਿਵੇਂ ਕਿ XMLHttpRequest ਨਾਲੋਂ ਵਧੇਰੇ ਪੜ੍ਹਨਯੋਗ ਹੈ। ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਬੇਨਤੀ ESP32 ਨੂੰ ਇੱਕ GET ਬੇਨਤੀ ਭੇਜਦੀ ਹੈ, ਫਾਈਲ ਨੂੰ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ, ਅਤੇ ਫਿਰ ਇਸਨੂੰ ਇੱਕ ਵਿੱਚ ਬਦਲਦੀ ਹੈ ਬਲੌਬ ਫਾਰਮੈਟ, ਜੋ ਕਿ CSV ਫਾਈਲਾਂ ਵਰਗੇ ਬਾਈਨਰੀ ਡੇਟਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। ਇੱਕ ਅਸਥਾਈ URL ਫਿਰ ਤਿਆਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਉਪਭੋਗਤਾ ਨੂੰ ਐਂਕਰ ਟੈਗ ਰਾਹੀਂ ਫਾਈਲ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਜਾ ਸਕੇ।

ਦੂਜੀ ਸਕ੍ਰਿਪਟ XMLHttpRequest ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਵਿਕਲਪ ਹੈ, HTTP ਬੇਨਤੀਆਂ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਰਵਾਇਤੀ ਤਰੀਕਾ। ਹਾਲਾਂਕਿ XMLHttpRequest ਪੁਰਾਣੀ ਹੈ, ਇਹ ਅਜੇ ਵੀ ਕਈ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਦ ਜਵਾਬ ਦੀ ਕਿਸਮ ਸਰਵਰ ਦੁਆਰਾ ਵਾਪਸ ਕੀਤੀ ਜਾ ਰਹੀ ਬਾਈਨਰੀ ਫਾਈਲ ਨੂੰ ਸੰਭਾਲਣ ਲਈ 'ਬਲੌਬ' 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ। ਸਕ੍ਰਿਪਟ ਜਵਾਬ ਲਈ ਸੁਣਦੀ ਹੈ, ਅਤੇ ਸਫਲਤਾਪੂਰਵਕ ਵਾਪਸੀ 'ਤੇ, ਇਹ ਡਾਉਨਲੋਡ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਇੱਕ ਐਂਕਰ ਤੱਤ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਬੇਨਤੀ 'ਤੇ ਵਧੇਰੇ ਦਾਣੇਦਾਰ ਨਿਯੰਤਰਣ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ, ਪਰ ਇਸ ਵਿੱਚ Fetch API ਦੀ ਸਾਦਗੀ ਅਤੇ ਲਚਕਤਾ ਦੀ ਘਾਟ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਵਾਅਦਿਆਂ ਨੂੰ ਸੰਭਾਲਣ ਵੇਲੇ।

ਤੀਜਾ ਹੱਲ ਇੱਕ ਫਾਲਬੈਕ ਹੈ ਜਿਸ ਲਈ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਬਿਲਕੁਲ ਲੋੜ ਨਹੀਂ ਹੈ। ਇਹ ਦੇ ਨਾਲ ਇੱਕ HTML ਐਂਕਰ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਡਾਊਨਲੋਡ ਕਰੋ ਵਿਸ਼ੇਸ਼ਤਾ, ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਅਤੇ ਫਾਈਲ ਨੂੰ ਆਪਣੇ ਆਪ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਇਹ ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਹੱਲ ਹੈ ਅਤੇ ਇਸ ਲਈ ਕਿਸੇ ਸਕ੍ਰਿਪਟਿੰਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਘੱਟ ਲਚਕਦਾਰ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਫਾਈਲ ਡਾਉਨਲੋਡਸ ਨੂੰ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਹੈਂਡਲ ਕਰਨ ਜਾਂ ਡਾਉਨਲੋਡ ਨੂੰ ਚਾਲੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕੋਈ ਸ਼ਰਤਾਂ ਜਾਂ ਤਰਕ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਨਹੀਂ ਦਿੰਦਾ ਹੈ।

ਇਹਨਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਹੱਲ ਇੱਕ ਵੱਖਰੇ ਵਰਤੋਂ ਦੇ ਕੇਸ ਨੂੰ ਸੰਬੋਧਿਤ ਕਰਦਾ ਹੈ। Fetch API ਇਸਦੀ ਸਾਦਗੀ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨ ਆਧੁਨਿਕ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਸਿਫਾਰਿਸ਼ ਕੀਤਾ ਹੱਲ ਹੈ। XMLHttpRequest ਉਪਯੋਗੀ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਬੇਨਤੀ ਅਤੇ ਜਵਾਬ 'ਤੇ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਅੰਤ ਵਿੱਚ, HTML-ਸਿਰਫ ਹੱਲ ਸਥਿਰ ਜਾਂ ਸਧਾਰਨ ਵੈੱਬ ਪੰਨਿਆਂ ਲਈ ਆਦਰਸ਼ ਹੈ ਜਿੱਥੇ JavaScript ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਇਹਨਾਂ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਨੂੰ ਲਾਗੂ ਕਰਕੇ, ਤੁਸੀਂ ਇੱਕ ESP32 ਵੈੱਬ ਸਰਵਰ ਤੋਂ ਭਰੋਸੇਯੋਗ ਫਾਈਲ ਡਾਊਨਲੋਡਾਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾ ਸਕਦੇ ਹੋ, ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਅਤੇ ਕਾਰਜਸ਼ੀਲਤਾ ਦੋਵਾਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰ ਸਕਦੇ ਹੋ।

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 ਅਤੇ HTML ਫਾਈਲ ਡਾਉਨਲੋਡ ਵਿਧੀਆਂ ਵਿੱਚ ਅੰਤਰਾਂ ਦੀ ਪੜਚੋਲ ਕਰਨਾ

JavaScript ਰਾਹੀਂ ਫ਼ਾਈਲਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਵੇਲੇ, ਇਹ ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਵੱਖ-ਵੱਖ ਵਿਧੀਆਂ ਬ੍ਰਾਊਜ਼ਰ ਦੀਆਂ ਸੁਰੱਖਿਆ ਨੀਤੀਆਂ ਨਾਲ ਕਿਵੇਂ ਅੰਤਰਕਿਰਿਆ ਕਰਦੀਆਂ ਹਨ। ਡਾਇਰੈਕਟ ਐਡਰੈੱਸ ਬਾਰ ਲਿੰਕ ਕੰਮ ਕਰਨ ਦਾ ਇੱਕ ਕਾਰਨ ਇਹ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਬੇਨਤੀ ਨੂੰ ਤੁਰੰਤ ਹੱਲ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਡਾਊਨਲੋਡ ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹੈ। ਹਾਲਾਂਕਿ, JavaScript ਦੁਆਰਾ ਇਸਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਸਮੇਂ, ਬ੍ਰਾਊਜ਼ਰ ਸਖਤ ਨਿਯਮ ਲਾਗੂ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਸਹੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ CORS (ਕਰਾਸ-ਓਰੀਜਨ ਰਿਸੋਰਸ ਸ਼ੇਅਰਿੰਗ) ਸੈਟਿੰਗਾਂ। ਬਿਨਾਂ ਸੈਟਿੰਗ ਦੇ no-cors ਜਾਂ cors ਮੋਡ ਸਹੀ ਢੰਗ ਨਾਲ, ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਡਾਊਨਲੋਡ ਨਾ ਹੋਵੇ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਵਰਤੋਂ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ fetch() ਪੁਰਾਣੇ ਤਰੀਕਿਆਂ ਉੱਤੇ API ਜਿਵੇਂ ਕਿ XMLHttpRequest, ਕਿਉਂਕਿ ਇਹ ਜਵਾਬਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਤਰੀਕੇ 'ਤੇ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਲਈ ਬਲੌਬ ਜਾਂ ਫਾਈਲ ਵਰਗੀਆਂ ਵਸਤੂਆਂ। ਇਹ ਤਰੁੱਟੀਆਂ ਨੂੰ ਵਧੇਰੇ ਸੁੰਦਰਤਾ ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ, ਇਸ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਫਾਈਲਾਂ ਨੂੰ ਡਾਉਨਲੋਡ ਕਰਨ ਲਈ ਵਧੇਰੇ ਭਰੋਸੇਮੰਦ ਹੱਲ ਬਣਾਉਂਦਾ ਹੈ। ਸਹੀ MIME ਕਿਸਮਾਂ ਨੂੰ ਸੈੱਟ ਕਰਨਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਇੱਕ ਹੋਰ ਮੁੱਖ ਕਾਰਕ ਹੈ ਕਿ ਫਾਈਲ ਨੂੰ ਕਲਾਇੰਟ ਦੁਆਰਾ ਸਹੀ ਢੰਗ ਨਾਲ ਸੰਭਾਲਿਆ ਗਿਆ ਹੈ।

ਤੋਂ ਡਾਊਨਲੋਡ ਕਰਨ ਵਰਗੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ESP32, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਸਰਵਰ ਸਹੀ MIME ਕਿਸਮਾਂ ਅਤੇ ਸਿਰਲੇਖਾਂ ਦੀ ਸੇਵਾ ਕਰਦੇ ਹੋਏ, ਬੇਨਤੀਆਂ ਅਤੇ ਜਵਾਬਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ। Fetch API ਬਿਹਤਰ ਵਾਅਦਾ ਸੰਭਾਲਣ ਦੀ ਵੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਜੋ ਕਿ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਅਸਿੰਕ੍ਰੋਨਸ ਵਾਤਾਵਰਨ ਜਿਵੇਂ ਕਿ ਫਾਈਲ ਡਾਊਨਲੋਡਿੰਗ ਵਿੱਚ ਉਪਯੋਗੀ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨਿਰਵਿਘਨ ਅਤੇ ਜਵਾਬਦੇਹ ਰਹੇ।