Async JavaScript ব্যবহার করে কিভাবে ইন্টারনেট সংযোগের স্থিতি পরীক্ষা করবেন

আপনার অ্যাপ ইন্টারনেটের সাথে সংযুক্ত কিনা তা পরীক্ষা করতে আপনি কি JavaScript ব্যবহার করতে পারেন?

এই নিবন্ধে, আমি এই ইন্টারনেট সংযোগ সনাক্তকরণ প্রশ্নের একটি আপডেট উত্তর প্রদান করব৷ (ওহ! যে পাঁচবার দ্রুত বলুন!)

সমাধানটি জাভাস্ক্রিপ্টের ফেচ এপিআই এবং অ্যাসিঙ্ক এবং অপেক্ষার সাথে অ্যাসিঙ্ক্রোনাস কোড ব্যবহার করবে। কিন্তু প্রথমে, আসুন একটি গৃহীত সমাধান দেখি এবং আলোচনা করি কেন এটি আপনার আবেদনের জন্য সেরা পছন্দ হতে পারে না৷

navigator.onLine

নেভিগেটর ইন্টারফেসের অনলাইন সম্পত্তি, navigator.onLine , প্রায়শই ব্রাউজারের অনলাইন এবং অফলাইন স্থিতি সনাক্ত করতে ব্যবহৃত হয়।

অনলাইন এবং অফলাইন ইভেন্টের জন্য শ্রোতাদের সাথে মিলিত, এটি বিকাশকারীদের জন্য একটি সহজ সমাধান প্রদান করে যা বাস্তবায়ন করা সহজ।

আসুন দেখি কিভাবে আমরা navigator.onLine বাস্তবায়ন করব

একটি লোড ইভেন্ট লিসেনার যোগ করে শুরু করুন। লোড ইভেন্ট ফায়ার হলে, শ্রোতা নেভিগেটর ইন্টারফেসের অনলাইন সম্পত্তি পরীক্ষা করবে এবং তারপর অনলাইন স্থিতি প্রদর্শন করবে।

ন্যাভিগেটরের অনলাইন সম্পত্তি একটি বুলিয়ান (সত্য বা মিথ্যা) প্রতিক্রিয়া প্রদান করে। শ্রোতার কাজ শেষ করতে, আমরা স্ট্যাটাস ডিসপ্লে মান সেট করতে একটি ত্রিদেশীয় বিবৃতি ব্যবহার করব।

window.addEventListener("load", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline";
});

তাহলে ন্যাভিগেটর শব্দটি কেন? ঠিক আছে, এটি 90 এর দশকের নেটস্কেপ নেভিগেটর ব্রাউজারের একটি রেফারেন্স৷৷

আপনার HTML পৃষ্ঠায় একটি h1 উপাদানকে "স্থিতি" আইডি দিয়ে কেন্দ্রে রাখুন। আপনি যদি উপরের জাভাস্ক্রিপ্ট কোডটি আপনার পৃষ্ঠায় প্রয়োগ করেন, আপনি দেখতে পাবেন এটি "অনলাইন" প্রদর্শন করবে।

কিন্তু এটি শুধুমাত্র h1 উপাদান আপডেট করে যখন পৃষ্ঠা লোড হয়। যে কোনো ইভেন্ট ফায়ার হওয়ার সময় স্ট্যাটাস ডিসপ্লে আপডেট করতে অফলাইন এবং অনলাইন ইভেন্ট শ্রোতাদের যোগ করি।

window.addEventListener("offline", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "OFFline";
});

window.addEventListener("online", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "Online";
});

আমরা Chrome Dev Tools-এর Application ট্যাবে যেতে পারি এবং ServiceWorker-এ ক্লিক করে ব্রাউজারটিকে অফলাইনের মতো প্রতিক্রিয়া জানাতে সেট করতে পারি।

অফলাইন চেকবক্সটি কয়েকবার চেক এবং আনচেক করুন। আপনি অফলাইন এবং অনলাইন ইভেন্টগুলিতে অবিলম্বে স্থিতি প্রদর্শনের প্রতিক্রিয়া দেখতে পাবেন।

আসুন একটু গভীরে খনন করা যাক

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

CanIUse.com-এ navigator.onLine অনুসন্ধান করা অনলাইনের জন্য ব্যাপক সমর্থন দেখায় | অফলাইন অবস্থা সম্পত্তি প্রদান করে. যাইহোক, সমর্থন টেবিলের নীচের নোটগুলির দিকে তাকালে আমরা দেখতে পাই যে

“অনলাইন মানে সবসময় ইন্টারনেট সংযোগ নয়। এটি কিছু নেটওয়ার্কের সাথে সংযোগের অর্থও হতে পারে”।

হুম, এটি কাজের মধ্যে একটি রেঞ্চ নিক্ষেপ করে।

তাই আপনি যদি সত্যিই ব্রাউজারের অনলাইন স্থিতি নির্ধারণ করতে চান, তাহলে আপনাকে চেক করার জন্য অতিরিক্ত উপায় তৈরি করা উচিত।

চলুন navigator.onLine-এর জন্য MDN ডক্স রেফারেন্সও দেখে নেওয়া যাক। MDN ওয়েব ডক্স CanIUse.com তথ্য ব্যাক আপ করে এবং অতিরিক্ত নোট যোগ করে।

“ব্রাউজাররা এই প্রপার্টিটিকে ভিন্নভাবে প্রয়োগ করে...আপনি অনুমান করতে পারবেন না যে একটি সত্যিকারের মান অগত্যা মানে ব্রাউজার ইন্টারনেট অ্যাক্সেস করতে পারে। আপনি মিথ্যা ইতিবাচক পেতে পারেন...”

এবং এটি একটি ইন্টারনেট সংযোগ সনাক্ত করার জন্য আমাদের সমাধান হিসাবে নেভিগেটরের অনলাইন সম্পত্তি ব্যবহার করার বিষয়ে আমাদের ভয়কে নিশ্চিত করে। এটি এমন একটি সমাধান যা আমাদের অ্যাপ্লিকেশনগুলিতে বিপর্যয় সৃষ্টি করতে পারে যা বাইরের ডেটা উত্সগুলি কখন উপলব্ধ থাকে তা জানার উপর নির্ভর করে৷

এরকম একটি উদাহরণ হল যখন আমরা একটি প্রগতিশীল ওয়েব অ্যাপ অনলাইন কিনা তা নির্ধারণ করার চেষ্টা করছি। MDN এমনকি সুপারিশ করে,

“...আপনি যদি সত্যিই ব্রাউজারের অনলাইন স্থিতি নির্ধারণ করতে চান, তাহলে আপনাকে চেক করার জন্য অতিরিক্ত উপায় তৈরি করা উচিত।”

"নেভিগেটর অনলাইন কাজ করছে না" এর জন্য একটি দ্রুত ওয়েব অনুসন্ধান৷ বিভিন্ন ফোরাম পোস্ট প্রকাশ করে যেখানে এই সম্পত্তির উপর নির্ভরশীলরা সমস্যায় পড়েছেন।

তাহলে সমাধান কি?

আমাদের জানতে হবে কখন আমাদের অ্যাপ্লিকেশন সত্যিকার অর্থে ইন্টারনেটের সাথে সংযুক্ত এবং শুধুমাত্র একটি রাউটার বা স্থানীয় নেটওয়ার্ক নয়। আসুন আমাদের জাভাস্ক্রিপ্ট ফাইলে ফিরে যাই এবং আবার শুরু করি।

ধারণাটি হল একটি অনুরোধ করা এবং এটি ব্যর্থ হলে ত্রুটি ধরার সাথে সুন্দরভাবে পরিচালনা করা। অনুরোধটি সফল হলে, আমরা অনলাইনে আছি, এবং যদি এটি ব্যর্থ হয়, আমরা নই।

আমরা অনলাইন স্থিতি নির্ধারণের জন্য একটি ব্যবধানে একটি ছোট চিত্রের অনুরোধ করতে যাচ্ছি। আধুনিক জাভাস্ক্রিপ্ট ফেচ এপিআই এবং অ্যাসিঙ্ক এবং অপেক্ষার সাথে অ্যাসিঙ্ক্রোনাস কোড সরবরাহ করে। আমরা আমাদের লক্ষ্য পূরণ করতে এই সরঞ্জামগুলি ব্যবহার করব৷

চেকঅনলাইন স্ট্যাটাস()

চেকঅনলাইন স্ট্যাটাস নামে একটি অ্যাসিঙ্ক অ্যারো ফাংশন তৈরি করে শুরু করা যাক। ন্যাভিগেটরের অনলাইন সম্পত্তির মতো ফাংশনটি সত্য বা মিথ্যা ফেরত দেবে।

ফাংশনের ভিতরে, আমরা একটি ট্রাই ব্লক সেট আপ করব যেখানে আমরা একটি পিক্সেল চিত্রের জন্য একটি আনার অনুরোধের জন্য অপেক্ষা করছি। নিশ্চিত করুন যে আপনার পরিষেবা কর্মী এই ছবিটি ক্যাশে করছে না।

200 এবং 299-এর মধ্যে HTTP প্রতিক্রিয়া কোডগুলি সাফল্য নির্দেশ করে এবং আমরা স্ট্যাটাস কোড তুলনার ফলাফল ফিরিয়ে দেব। প্রতিক্রিয়া স্থিতি 200 থেকে 299 হলে এটি সত্য হবে এবং অন্যথায় মিথ্যা হবে।

আমাদের একটি ক্যাচ ব্লক প্রদান করতে হবে যা অনুরোধ ব্যর্থ হলে ত্রুটিটি ধরবে। যদি এটি ঘটে তবে আমরা অবশ্যই অফলাইনে আছি তা বোঝাতে আমরা ক্যাচ ব্লকে মিথ্যা ফেরত দেব।

const checkOnlineStatus = async () => {
  try {
    const online = await fetch("/1pixel.png");
    return online.status >= 200 && online.status < 300; // either true or false
  } catch (err) {
    return false; // definitely offline
  }
};

এর পরে, আমরা setInterval পদ্ধতি ব্যবহার করব এবং এটি একটি বেনামী অ্যাসিঙ্ক ফাংশন পাস করব। async ফাংশন আমাদের checkOnlineStatus ফাংশনের ফলাফলের জন্য অপেক্ষা করবে। তারপরে আমরা বর্তমান অনলাইন স্থিতি প্রদর্শন করতে ফলাফল সহ একটি ত্রিদেশীয় বিবৃতি ব্যবহার করব।

এই উদাহরণটি পরীক্ষা করার জন্য, ব্যবধান বিলম্ব প্রতি 3 সেকেন্ডে (3000 মিলিসেকেন্ড) সেট করুন। এই সত্যিই খুব প্রায়ই, যদিও. প্রতি 30 সেকেন্ড (30000 মিলিসেকেন্ড) পরীক্ষা করা আপনার প্রকৃত প্রয়োজনের জন্য যথেষ্ট হতে পারে৷

setInterval(async () => {
  const result = await checkOnlineStatus();
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = result ? "Online" : "OFFline";
}, 3000); // probably too often, try 30000 for every 30 seconds

আমাদের নতুন কোড সংরক্ষিত হলে, অফলাইন প্রতিক্রিয়া পরীক্ষা করতে Chrome Dev Tools-এর অ্যাপ্লিকেশান ট্যাবে আবার ঘুরে আসি৷

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

এখানে নতুন লোড ইভেন্ট লিসেনার:

window.addEventListener("load", async (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = (await checkOnlineStatus())
    ? "Online"
    : "OFFline";
});

একটি চূড়ান্ত চিন্তা

উপরের ব্যবধান কোডটি আপনার অ্যাপে একটি সংযোগ স্থিতি প্রদর্শনের জন্য ভাল। এটি বলেছে, আমি এমন একটি সংযোগ স্থিতির উপর নির্ভর করার পরামর্শ দিচ্ছি না যা আপনার আবেদনে একটি গুরুত্বপূর্ণ ডেটা অনুরোধ করার 20 বা 30 সেকেন্ড আগে চেক করা হয়েছিল।

তাই, অনুরোধের আগে আপনার চেকঅনলাইন স্ট্যাটাস ফাংশনকে কল করা উচিত এবং ডেটা অনুরোধ করার আগে প্রতিক্রিয়া মূল্যায়ন করা উচিত।

const yourDataRequestFunction = async () => {
    const online = await checkOnlineStatus();
    if (online) {
    	// make data request
    }
}

উপসংহার

যদিও navigator.onLine ব্যাপকভাবে সমর্থিত, আমাদের অ্যাপ্লিকেশনগুলি সত্যিই ইন্টারনেটের সাথে সংযুক্ত কিনা তা নির্ধারণ করার সময় এটি অবিশ্বস্ত ফলাফল প্রদান করে৷ ফেচ API এবং অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট ব্যবহার করে, আমরা দ্রুত আরও নির্ভরযোগ্য সমাধান কোড করতে পারি।

এখানে GitHub-এ কোডের সারাংশের একটি লিঙ্ক রয়েছে, এবং এখানে একটি ভিডিও টিউটোরিয়াল যা আমি একসাথে রেখেছি: