ESP32 ওয়েবসার্ভার থেকে জাভাস্ক্রিপ্ট ফাইল ডাউনলোড সমস্যা সমাধান করা

ESP32 এর সাথে জাভাস্ক্রিপ্ট ফাইল ডাউনলোডের সমস্যা বোঝা

একটি ওয়েব সার্ভার থেকে ফাইল ডাউনলোড করা কখনও কখনও চতুর হতে পারে, বিশেষ করে যখন ESP32 এর মতো মাইক্রোকন্ট্রোলারগুলির সাথে ডিল করা হয়। যখন JavaScript ব্যবহার করে একটি ফাইল ডাউনলোড করার চেষ্টা করা হয়, তখন এমন উদাহরণ হতে পারে যেখানে ব্রাউজার থেকে সরাসরি অ্যাক্সেস করা হলে ডাউনলোডটি পুরোপুরি কাজ করে কিন্তু একটি স্ক্রিপ্টের মাধ্যমে শুরু করার সময় ব্যর্থ হয়।

এই পরিস্থিতিতে, ESP32 একটি PsychicHTTP ওয়েব সার্ভার ব্যবহার করে একটি স্ট্যাটিক .CSV ফাইল পরিবেশন করছে। ব্রাউজারে সরাসরি HTML লিঙ্কের মাধ্যমে অ্যাক্সেসযোগ্য হওয়া সত্ত্বেও ফাইলটি JavaScript এর মাধ্যমে ডাউনলোড না হলে সমস্যা দেখা দেয়। এই সমস্যাটি হতাশাজনক হতে পারে, তবে এমবেডেড সিস্টেমের সাথে কাজ করার সময় এটি একটি সাধারণ সমস্যা।

জাভাস্ক্রিপ্ট কোডটি ESP32 থেকে ফাইলের অনুরোধ করার জন্য একটি XMLHttpRequest ব্যবহার করে, কিন্তু এটি প্রত্যাশা অনুযায়ী ডাউনলোডকে ট্রিগার করে না। এই নিবন্ধটি অন্বেষণ করবে কেন সরাসরি লিঙ্কটি কাজ করে কিন্তু জাভাস্ক্রিপ্ট পদ্ধতিটি করে না। এই সমস্যাটি সমাধান করার জন্য আরও আধুনিক 'আনয়ন' API ব্যবহার করে কীভাবে জাভাস্ক্রিপ্ট সংশোধন করতে হয় তার অন্তর্দৃষ্টি প্রদান করবে।

উপরন্তু, XMLHttpRequest থেকে ফেচ API-এ স্যুইচ করার সময় ESP32 কোডে পরিবর্তনের প্রয়োজন হলে আমরা আলোচনা করব। এই দুটি প্রশ্ন পরীক্ষা করে, আমরা অন্তর্নিহিত সমস্যাটি উন্মোচন করব এবং নির্ভরযোগ্য ফাইল ডাউনলোডের জন্য সমাধান প্রদান করব।

জাভাস্ক্রিপ্ট ফাইল ডাউনলোডের পদ্ধতি এবং সমাধান বিশ্লেষণ করা

প্রদত্ত উদাহরণগুলিতে, লক্ষ্য ছিল PsychicHTTP চালিত একটি ESP32 ওয়েব সার্ভার থেকে একটি CSV ফাইল ডাউনলোড করা। প্রথম স্ক্রিপ্ট আধুনিক ব্যবহার করে এপিআই আনুন, জাভাস্ক্রিপ্টে HTTP অনুরোধ করার জন্য একটি শক্তিশালী টুল। এই পদ্ধতিটি প্রতিশ্রুতিগুলি পরিচালনা করে প্রক্রিয়াটিকে সহজ করে তোলে এবং XMLHttpRequest এর মতো পুরানো কৌশলগুলির চেয়ে আরও বেশি পাঠযোগ্য। আনার অনুরোধটি ESP32 এ একটি GET অনুরোধ পাঠায়, ফাইলটি পুনরুদ্ধার করে এবং তারপরে এটি রূপান্তর করে ব্লব বিন্যাস, যা CSV ফাইলের মতো বাইনারি ডেটা পরিচালনার জন্য অপরিহার্য। ব্যবহারকারীকে অ্যাঙ্কর ট্যাগের মাধ্যমে ফাইলটি ডাউনলোড করার অনুমতি দেওয়ার জন্য একটি অস্থায়ী URL তৈরি করা হয়।

দ্বিতীয় স্ক্রিপ্টটি XMLHttpRequest ব্যবহার করে একটি বিকল্প, যা HTTP অনুরোধ করার একটি আরও ঐতিহ্যগত উপায়। যদিও XMLHttpRequest পুরানো, এটি এখনও অনেক অ্যাপ্লিকেশনে ব্যবহৃত হয়। এই উদাহরণে, প্রতিক্রিয়া প্রকার সার্ভার দ্বারা ফেরত আসা বাইনারি ফাইল পরিচালনা করতে 'ব্লব' এ সেট করা হয়েছে। স্ক্রিপ্ট প্রতিক্রিয়ার জন্য শোনে এবং একটি সফল প্রত্যাবর্তনের পরে, এটি ডাউনলোড ট্রিগার করার জন্য গতিশীলভাবে একটি অ্যাঙ্কর উপাদান তৈরি করে। এই পদ্ধতিটি অনুরোধের উপর আরও দানাদার নিয়ন্ত্রণ প্রদান করে, তবে এতে ফেচ API-এর সরলতা এবং নমনীয়তার অভাব রয়েছে, বিশেষ করে প্রতিশ্রুতিগুলি পরিচালনা করার সময়।

তৃতীয় সমাধান হল একটি ফলব্যাক যার জন্য জাভাস্ক্রিপ্টের প্রয়োজন নেই। এটির সাথে একটি HTML অ্যাঙ্কর ট্যাগ ব্যবহার করে ডাউনলোড বৈশিষ্ট্য, ব্যবহারকারীদের লিঙ্কে ক্লিক করতে এবং স্বয়ংক্রিয়ভাবে ফাইল ডাউনলোড করার অনুমতি দেয়। এটি সবচেয়ে মৌলিক সমাধান এবং কোন স্ক্রিপ্টিং প্রয়োজন হয় না। যাইহোক, এটি কম নমনীয়, কারণ এটি আপনাকে প্রোগ্রাম্যাটিকভাবে ফাইল ডাউনলোড পরিচালনা করতে বা ডাউনলোড ট্রিগার করার আগে কোনো শর্ত বা যুক্তি যোগ করার অনুমতি দেয় না।

এই সমাধানগুলির প্রতিটি একটি ভিন্ন ব্যবহারের ক্ষেত্রে সম্বোধন করে। Fetch API হল আধুনিক অ্যাপ্লিকেশনের জন্য প্রস্তাবিত সমাধান কারণ এর সরলতা এবং কর্মক্ষমতা। XMLHttpRequest দরকারী যখন আপনার অনুরোধ এবং প্রতিক্রিয়ার উপর আরও নিয়ন্ত্রণের প্রয়োজন হয়। সবশেষে, HTML-শুধু সমাধানটি স্ট্যাটিক বা সাধারণ ওয়েব পৃষ্ঠাগুলির জন্য আদর্শ যেখানে জাভাস্ক্রিপ্টের প্রয়োজন নেই৷ এই পদ্ধতিগুলির একটি বাস্তবায়ন করে, আপনি ব্যবহারকারীর অভিজ্ঞতা এবং কার্যকারিতা উভয়ের উন্নতি করে, একটি 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 এর মাধ্যমে ফাইল ডাউনলোড করার সময়, ব্রাউজারের নিরাপত্তা নীতির সাথে বিভিন্ন পদ্ধতি কিভাবে ইন্টারঅ্যাক্ট করে তা বোঝা গুরুত্বপূর্ণ। সরাসরি ঠিকানা বার লিঙ্কটি কাজ করার একটি কারণ হল ব্রাউজার অবিলম্বে অনুরোধটি সমাধান করতে এবং ডাউনলোড পরিচালনা করতে পারে। যাইহোক, জাভাস্ক্রিপ্টের মাধ্যমে এটি করার চেষ্টা করার সময়, ব্রাউজারগুলি কঠোর নিয়ম প্রয়োগ করে, যেমন সঠিক প্রয়োজন CORS (ক্রস-অরিজিন রিসোর্স শেয়ারিং) সেটিংস। সেটিং ছাড়াই no-cors বা কর্স মোড সঠিকভাবে, ডাউনলোড নাও ঘটতে পারে।

উপরন্তু, আধুনিক ব্রাউজার ব্যবহার পছন্দ fetch() পুরানো পদ্ধতির উপর API এর মত XMLHttpRequest, যেহেতু এটি প্রতিক্রিয়াগুলি কীভাবে পরিচালনা করা হয় তার উপর আরও নিয়ন্ত্রণ প্রদান করে, বিশেষত এর জন্য ব্লব বা ফাইলের মতো বস্তু। এটি আরও সুন্দরভাবে ত্রুটিগুলি পরিচালনা করে, এটি গতিশীলভাবে ফাইলগুলি ডাউনলোড করার জন্য আরও নির্ভরযোগ্য সমাধান করে তোলে। ক্লায়েন্ট দ্বারা ফাইলটি সঠিকভাবে পরিচালনা করা হয়েছে তা নিশ্চিত করার জন্য সঠিক MIME প্রকারগুলি সেট করা হল আরেকটি মূল বিষয়।

একটি থেকে ডাউনলোড করার মত অ্যাপ্লিকেশনের জন্য ESP32, সার্ভার সঠিকভাবে অনুরোধ এবং প্রতিক্রিয়া পরিচালনা করে, সঠিক MIME প্রকার এবং শিরোনামগুলি পরিবেশন করে তা নিশ্চিত করা অত্যন্ত গুরুত্বপূর্ণ৷ ফেচ এপিআই আরও ভাল প্রতিশ্রুতি পরিচালনার অনুমতি দেয়, যা বিশেষত ফাইল ডাউনলোড করার মতো অ্যাসিঙ্ক্রোনাস পরিবেশে কার্যকর, ব্যবহারকারীর অভিজ্ঞতা মসৃণ এবং প্রতিক্রিয়াশীল থাকে তা নিশ্চিত করে।