क्या आप JavaScript का उपयोग करके जांच सकते हैं कि आपका ऐप इंटरनेट से जुड़ा है या नहीं?
इस लेख में, मैं इस इंटरनेट कनेक्शन पहचान प्रश्न का एक अद्यतन उत्तर प्रदान करूंगा। (पहले! इसे पांच बार तेजी से कहें!)
समाधान JavaScript के 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 पेज पर "status" आईडी के साथ एक h1 एलिमेंट को सेंटर करें। यदि आप उपरोक्त JavaScript कोड को अपने पेज पर लागू करते हैं, तो आपको यह "Online" प्रदर्शित करते हुए देखना चाहिए।
लेकिन यह केवल 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 के एप्लिकेशन टैब पर जा सकते हैं और सर्विस वर्कर पर क्लिक करके ब्राउज़र को ऑफलाइन होने के रूप में प्रतिक्रिया देने के लिए सेट कर सकते हैं।
ऑफलाइन चेकबॉक्स को कुछ बार चेक और अनचेक करें। आपको स्थिति प्रदर्शन को ऑफलाइन और ऑनलाइन इवेंट पर तुरंत प्रतिक्रिया देते हुए देखना चाहिए जो फायर होते हैं।
आइए थोड़ा गहराई से देखें
पहली नज़र में, उपरोक्त एक अच्छा समाधान लगता है जो काफी सरल है। दुर्भाग्य से, जैसा कि हम नेविगेटर के ऑनलाइन गुण और ऑनलाइन और ऑफलाइन इवेंट के बारे में अधिक पढ़ते हैं, हमें एक समस्या मिलती है।
CanIUse.com पर navigator.onLine खोजने से ऑनलाइन | ऑफलाइन स्थिति के लिए व्यापक समर्थन दिखता है जो गुण प्रदान करता है। हालांकि, समर्थन तालिका के नीचे नोट्स को देखने पर, हम देखते हैं कि
"ऑनलाइन का हमेशा इंटरनेट से कनेक्शन मतलब नहीं होता। इसका मतलब केवल किसी नेटवर्क से कनेक्शन भी हो सकता है।"
हम्म, यह थोड़ा सा काम बिगाड़ देता है।
तो अगर आप वास्तव में ब्राउज़र की ऑनलाइन स्थिति निर्धारित करना चाहते हैं, तो आपको जांच के लिए अतिरिक्त साधन विकसित करने चाहिए।
आइए navigator.onLine के लिए MDN डॉक्स संदर्भ पर भी एक नज़र डालें। MDN वेब डॉक्स CanIUse.com की जानकारी का समर्थन करता है और अतिरिक्त नोट्स जोड़ता है।
"ब्राउज़र इस गुण को अलग-अलग तरीके से लागू करते हैं...आप यह नहीं मान सकते कि एक सही मान का अर्थ यह है कि ब्राउज़र इंटरनेट का उपयोग कर सकता है। आपको गलत सकारात्मक मिल सकते हैं..."
और यह इंटरनेट कनेक्शन का पता लगाने के लिए हमारे समाधान के रूप में नेविगेटर के ऑनलाइन गुण का उपयोग करने के बारे में हमारे डर की पुष्टि करता है। यह एक ऐसा समाधान है जो हमारे उन अनुप्रयोगों में कहर बरपा सकता है जो यह जानने पर निर्भर करते हैं कि बाहरी डेटा स्रोत कब उपलब्ध हैं।
ऐसा एक उदाहरण है जब हम यह निर्धारित करने की कोशिश कर रहे हैं कि प्रोग्रेसिव वेब ऐप ऑनलाइन है या नहीं। MDN यहां तक सिफारिश करता है,
"...यदि आप वास्तव में ब्राउज़र की ऑनलाइन स्थिति निर्धारित करना चाहते हैं, तो आपको जांच के लिए अतिरिक्त साधन विकसित करने चाहिए।"
"navigator online not working" के लिए एक त्वरित वेब खोज विभिन्न फोरम पोस्ट प्रकट करती है जहां इस गुण पर निर्भर लोगों को समस्याओं का सामना करना पड़ा है।
तो समाधान क्या है?
हमें यह जानने की जरूरत है कि हमारा एप्लिकेशन वास्तव में इंटरनेट से कब जुड़ा है और केवल राउटर या स्थानीय नेटवर्क से नहीं। आइए अपनी JavaScript फ़ाइल पर वापस जाएं और फिर से शुरू करें।
विचार एक अनुरोध करना और यदि यह विफल होता है तो त्रुटि पकड़ के साथ इसे उचित तरीके से संभालना है। यदि अनुरोध सफल होता है, तो हम ऑनलाइन हैं, और यदि यह विफल होता है, तो हम नहीं हैं।
हम ऑनलाइन स्थिति निर्धारित करने के लिए एक अंतराल पर एक छोटी सी छवि का अनुरोध करने जा रहे हैं। आधुनिक JavaScript Fetch API और Async & Await के साथ एसिंक्रोनस कोड प्रदान करता है। हम अपने लक्ष्य को पूरा करने के लिए इन उपकरणों का उपयोग करेंगे।
checkOnlineStatus()
आइए checkOnlineStatus नामक एक एसिंक एरो फ़ंक्शन बनाकर शुरू करें। फ़ंक्शन नेविगेटर के ऑनलाइन गुण की तरह सही या गलत लौटाएगा।
फ़ंक्शन के अंदर, हम एक ट्राई ब्लॉक सेट करेंगे जहां हम एक पिक्सेल छवि के लिए फेच अनुरोध की प्रतीक्षा करते हैं। सुनिश्चित करें कि आपका सर्विस वर्कर इस छवि को कैश नहीं कर रहा है।
200 और 299 के बीच HTTP प्रतिक्रिया कोड सफलता का संकेत देते हैं, और हम स्थिति कोड तुलना का परिणाम लौटाएंगे। यह सही होगा यदि प्रतिक्रिया स्थिति 200 से 299 तक है और अन्यथा गलत।
हमें एक कैच ब्लॉक भी प्रदान करना होगा जो त्रुटि को पकड़ता है यदि अनुरोध विफल होता है। हम कैच ब्लॉक में गलत लौटाएंगे ताकि यह इंगित किया जा सके कि अगर ऐसा होता है तो हम निश्चित रूप से ऑफलाइन हैं।
const checkOnlineStatus = async () => { try { const online = await fetch("/1pixel.png"); return online.status >= 200 && online.status < 300; // या तो सही या गलत } catch (err) { return false; // निश्चित रूप से ऑफलाइन } };अगला, हम setInterval मेथड का उपयोग करेंगे और इसे एक अनाम एसिंक फ़ंक्शन पास करेंगे। एसिंक फ़ंक्शन हमारी checkOnlineStatus फ़ंक्शन के परिणाम की प्रतीक्षा करेगा। हम परिणाम के साथ वर्तमान ऑनलाइन स्थिति प्रदर्शित करने के लिए एक टर्नरी स्टेटमेंट का उपयोग करेंगे।
इस उदाहरण का परीक्षण करने के लिए, अंतराल देरी को हर 3 सेकंड (3000 मिलीसेकंड) पर सेट करें। यह वास्तव में बहुत बार है, हालांकि। हर 30 सेकंड (30000 मिलीसेकंड) जांचना आपकी वास्तविक जरूरतों के लिए पर्याप्त हो सकता है।
setInterval(async () => { const result = await checkOnlineStatus(); const statusDisplay = document.getElementById("status"); statusDisplay.textContent = result ? "Online" : "OFFline"; }, 3000); // शायद बहुत बार, हर 30 सेकंड के लिए 30000 आज़माएंहमारे नए कोड के सेव होने के साथ, आइए Chrome Dev Tools में एप्लिकेशन टैब पर फिर से जाएं ताकि ऑफलाइन प्रतिक्रिया का परीक्षण किया जा सके।
मैं लोड इवेंट श्रोता को एसिंक कार्यक्षमता के साथ शामिल करना लगभग भूल गया! लोड इवेंट पहचान शायद केवल तभी महत्वपूर्ण है यदि आपके पास ऑफ़लाइन उपलब्धता के लिए सर्विस वर्कर का उपयोग करने वाला प्रोग्रेसिव वेब ऐप है। अन्यथा, आपका वेब पेज या ऐप कनेक्शन के बिना बस लोड नहीं होगा।
यहां नया लोड इवेंट श्रोता है:
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) { // डेटा अनुरोध करें } }निष्कर्ष
जबकि navigator.onLine व्यापक रूप से समर्थित है, यह निर्धारित करने में अविश्वसनीय परिणाम प्रदान करता है कि हमारे एप्लिकेशन वास्तव में इंटरनेट से जुड़े हैं या नहीं। Fetch API और एसिंक्रोनस JavaScript का उपयोग करके, हम जल्दी से एक अधिक विश्वसनीय समाधान कोड कर सकते हैं।
यहाँ GitHub पर कोड गिस्ट का लिंक है, और यहाँ एक वीडियो ट्यूटोरियल है जिसे मैंने एक साथ रखा है:
