Async जावास्क्रिप्ट का उपयोग करके इंटरनेट कनेक्शन की स्थिति की जाँच कैसे करें

क्या आप यह जांचने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं कि आपका ऐप इंटरनेट से जुड़ा है या नहीं?

इस लेख में, मैं इस इंटरनेट कनेक्शन का पता लगाने के प्रश्न का एक अद्यतन उत्तर प्रदान करूंगा। (वाह! वह उपवास पांच बार कहो!)

समाधान जावास्क्रिप्ट के Fetch API और Async &Await के साथ एसिंक्रोनस कोड का उपयोग करेगा। लेकिन पहले, आइए एक स्वीकृत समाधान को देखें और चर्चा करें कि यह आपके आवेदन के लिए सबसे अच्छा विकल्प क्यों नहीं हो सकता है।

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

हम क्रोम देव टूल्स के एप्लिकेशन टैब पर जा सकते हैं और ब्राउज़र को जवाब देने के लिए सेट करने के लिए सर्विसवर्कर पर क्लिक कर सकते हैं जैसे कि यह ऑफ़लाइन है।

ऑफ़लाइन चेकबॉक्स को कुछ बार चेक और अनचेक करें। आपको सक्रिय होने वाले ऑफ़लाइन और ऑनलाइन ईवेंट पर तुरंत स्थिति प्रदर्शन प्रतिक्रिया दिखाई देनी चाहिए।

आइए थोड़ा और गहरा करें

पहली नज़र में, उपरोक्त एक अच्छा समाधान लगता है जो काफी सरल है। दुर्भाग्य से, जैसा कि हम नेविगेटर की ऑनलाइन संपत्ति और ऑनलाइन और ऑफलाइन घटनाओं के बारे में अधिक पढ़ते हैं, हम पाते हैं कि एक समस्या है।

CanIUse.com पर नेविगेटर.ऑनलाइन की खोज ऑनलाइन के लिए व्यापक समर्थन दर्शाती है | ऑफ़लाइन स्थिति संपत्ति प्रदान करती है। हालाँकि, समर्थन तालिका के नीचे के नोटों को देखते हुए, हम देखते हैं कि

“ऑनलाइन का मतलब हमेशा इंटरनेट से कनेक्शन नहीं होता है। इसका मतलब सिर्फ कुछ नेटवर्क से कनेक्शन भी हो सकता है"।

हम्म, यह काम में थोड़ा सा रिंच फेंकता है।

इसलिए यदि आप वास्तव में ब्राउज़र की ऑनलाइन स्थिति निर्धारित करना चाहते हैं, तो आपको जाँच के लिए अतिरिक्त साधन विकसित करने चाहिए।

आइए नेविगेटर.ऑनलाइन के एमडीएन डॉक्स संदर्भ पर भी एक नज़र डालें। MDN वेब डॉक्स CanIUse.com जानकारी का बैकअप लेता है और अतिरिक्त नोट्स जोड़ता है।

“ब्राउज़र इस संपत्ति को अलग तरह से लागू करते हैं... आप यह नहीं मान सकते कि एक सही मूल्य का मतलब यह है कि ब्राउज़र इंटरनेट का उपयोग कर सकता है। हो सकता है कि आपको झूठी सकारात्मक जानकारी मिल रही हो..."

और यह एक इंटरनेट कनेक्शन का पता लगाने के लिए हमारे समाधान के रूप में नेविगेटर की ऑनलाइन संपत्ति का उपयोग करने के बारे में हमारे डर की पुष्टि करता है। यह एक ऐसा समाधान है जो हमारे अनुप्रयोगों में कहर बरपा सकता है जो यह जानने पर निर्भर करता है कि बाहरी डेटा स्रोत कब उपलब्ध हैं।

ऐसा ही एक उदाहरण है जब हम यह निर्धारित करने का प्रयास कर रहे हैं कि कोई प्रोग्रेसिव वेब ऐप ऑनलाइन है या नहीं। एमडीएन भी सिफारिश करता है,

“...यदि आप वास्तव में ब्राउज़र की ऑनलाइन स्थिति निर्धारित करना चाहते हैं, तो आपको जाँच के लिए अतिरिक्त साधन विकसित करने चाहिए।"

“नेविगेटर ऑनलाइन काम नहीं कर रहा है” . के लिए एक त्वरित वेब खोज विभिन्न फ़ोरम पोस्ट का खुलासा करता है जहाँ इस संपत्ति पर निर्भर लोगों को समस्याएँ हुई हैं।

तो समाधान क्या है?

हमें यह जानने की जरूरत है कि हमारा एप्लिकेशन वास्तव में इंटरनेट से कब जुड़ा है, न कि केवल एक राउटर या स्थानीय नेटवर्क से। आइए अपनी जावास्क्रिप्ट फ़ाइल पर वापस जाएँ और फिर से शुरू करें।

विचार एक अनुरोध करना है और इसे विफल होने पर त्रुटि पकड़ने के साथ शानदार ढंग से संभालना है। यदि अनुरोध सफल होता है, तो हम ऑनलाइन हैं, और यदि यह विफल हो जाता है, तो हम नहीं हैं।

हम ऑनलाइन स्थिति निर्धारित करने के लिए एक अंतराल पर एक छोटी छवि का अनुरोध करने जा रहे हैं। आधुनिक जावास्क्रिप्ट Async &Await के साथ Fetch API और एसिंक्रोनस कोड प्रदान करता है। हम अपने लक्ष्य को पूरा करने के लिए इन उपकरणों का उपयोग करेंगे।

checkOnlineStatus()

चेकऑनलाइनस्टैटस नाम का एक एसिंक एरो फंक्शन बनाकर शुरू करते हैं। नेविगेटर की ऑनलाइन संपत्ति की तरह फ़ंक्शन सही या गलत लौटाएगा।

फ़ंक्शन के अंदर, हम एक कोशिश ब्लॉक स्थापित करेंगे जहां हम एक पिक्सेल छवि के लिए एक फ़ेच अनुरोध की प्रतीक्षा कर रहे हैं। सुनिश्चित करें कि आपका सेवा कर्मी इस छवि को कैशिंग नहीं कर रहा है।

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 फ़ंक्शन पास करेंगे। 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

हमारे नए कोड के सहेजे जाने के साथ, ऑफ़लाइन प्रतिक्रिया का परीक्षण करने के लिए क्रोम देव टूल्स में एप्लिकेशन टैब पर फिर से जाएं।

मैं लोड इवेंट श्रोता को async कार्यक्षमता के साथ शामिल करना लगभग भूल गया था! लोड इवेंट डिटेक्शन शायद केवल तभी महत्वपूर्ण है जब आपके पास एक प्रगतिशील वेब ऐप है जो ऑफ़लाइन उपलब्धता के लिए सेवा कार्यकर्ता का उपयोग कर रहा है। अन्यथा, आपका वेब पेज या ऐप बिना कनेक्शन के लोड नहीं होगा।

ये है नया लोड इवेंट श्रोता:

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

एक अंतिम विचार

उपरोक्त अंतराल कोड आपके ऐप में कनेक्शन स्थिति प्रदर्शित करने के लिए अच्छा है। उस ने कहा, मैं आपके आवेदन में एक महत्वपूर्ण डेटा अनुरोध करने से 20 या 30 सेकंड पहले जांच की गई कनेक्शन स्थिति पर भरोसा करने का सुझाव नहीं देता।

इसलिए, आपको अनुरोध से पहले सीधे checkOnlineStatus फ़ंक्शन को कॉल करना चाहिए और डेटा का अनुरोध करने से पहले प्रतिक्रिया का मूल्यांकन करना चाहिए।

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

निष्कर्ष

जबकि नेविगेटर.ऑनलाइन व्यापक रूप से समर्थित है, यह निर्धारित करते समय अविश्वसनीय परिणाम प्रदान करता है कि क्या हमारे एप्लिकेशन वास्तव में इंटरनेट से जुड़े हैं। फ़ेच एपीआई और एसिंक्रोनस जावास्क्रिप्ट का उपयोग करके, हम एक अधिक विश्वसनीय समाधान को जल्दी से कोड कर सकते हैं।

यहाँ GitHub पर कोड सार का लिंक दिया गया है, और यहाँ एक वीडियो ट्यूटोरियल है जिसे मैंने एक साथ रखा है: