वास्तविक ऑनलाइन, ऑफ़लाइन कार्यक्रम

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



संक्षेप में - ऑनलाइन, ऑफलाइन हमें संकेत देता है कि उपयोगकर्ता मैन्युअल रूप से ऑफ़लाइन स्विच करता है या उसके पास नेटवर्क का एक भी कनेक्शन नहीं है। वास्तव में, इन 2 घटनाओं को उस रूप में बेकार किया जाता है जिसमें उन्हें प्रस्तुत किया जाता है - मुझे नहीं पता कि कौन मैन्युअल रूप से टैब को ऑनलाइन / ऑफलाइन मोड में स्विच करेगा, और नेटवर्क कनेक्शन के साथ सब कुछ भी खराब है। और, ज़ाहिर है, प्रागैतिहासिक ब्राउज़र इन घटनाओं को नहीं जानता है।

कटौती के तहत, एक सुरुचिपूर्ण और 100% क्रॉस-ब्राउज़र समाधान जो आपको ऑनलाइन, ऑफ़लाइन घटनाओं को प्राप्त करने की अनुमति देता है।

हमें उन घटनाओं को प्राप्त करने की आवश्यकता है जो यह जांचती हैं कि उपयोगकर्ता के पास इंटरनेट है, या बल्कि, हमारी वेब सेवा के लिए एक कनेक्शन है।

एल्गोरिथम (मैंने इसे LIP - लॉन्ग पिंग इमेज कहा है):
1. नई छवि के माध्यम से एक चित्र बनाएँ
2. हम उस पर ओनलोड ऑनरोर लटकाते हैं
3. हम अपने पिंग सर्वर के लंबे पोलिंग संसाधन के लिए रास्ता लिखते हैं
4. ब्राउज़र सर्वर के लिए एक हैंगिंग कनेक्शन स्थापित करता है, यदि किसी भी कारण से कनेक्शन को गिरा दिया गया था - इंटरनेट गिर गया, http 50x, तो ऑनरर इवेंट में आग लग जाएगी। यहां हम एक और तस्वीर बनाते हैं, इस बार "तेज", यह सुनिश्चित करने के लिए कि सेवा ऑफ़लाइन है। यदि ऑनरोर ने इस चित्र के लिए काम किया है, तो सेवा बिल्कुल ऑफ़लाइन है। एक निश्चित अंतराल के बाद, हम पिक्चर पिंग कनेक्शन को बढ़ाने की कोशिश करते हैं।

समाधान बिल्कुल क्रॉस-ब्राउज़र और क्रॉस-डोमेन है। ऑफ़लाइन 2-4 सेकंड के लिए प्रतिक्रिया, ऑनलाइन 0-15 सेकंड के लिए प्रतिक्रिया।

जिन समस्याओं पर ध्यान दिया गया है:
1. ओपेरा, एक क्रिसमस ट्री की तरह, उपयोगकर्ता को विश्वासघाती रूप से संकेत देता है कि "लोड हो रहा है ..." एक लंबे चित्र कनेक्शन के दौरान ठीक करना असंभव है (iframe, css url, sse) और अनन्त "लोड हो रहा है ..." कष्टप्रद है। ओपेरा के लिए, एक लंबा कनेक्शन स्थापित नहीं है, लेकिन बस एक निश्चित अंतराल पर "तेज" तस्वीर को पूछताछ की जाती है - इतनी जल्दी नहीं, थोड़ा महंगा, लेकिन कुछ भी नहीं करना है।
2. एफएफ उपयोगकर्ता एक पेज लोड करते समय Esc दबाकर एक लंबे कनेक्शन को मार सकते हैं - यह रोकडिफॉल्ट द्वारा तय किया गया था।
3. जब आप इंटरनेट (कॉर्ड को बाहर निकालते हैं) को भौतिक रूप से डिस्कनेक्ट करते हैं, तो सभी ब्राउज़र हैंगिंग कनेक्शन को रीसेट नहीं करते हैं, इसलिए ऑफ़लाइन नहीं आता है।

लाभ:
1. सभी ब्राउज़रों का कवरेज, यहां तक ​​कि सबसे प्राचीन भी
2. ऑफलाइन / ऑनलाइन के लिए तेजी से प्रतिक्रिया
3. आप पिंग सर्वर के कार्य को करने के लिए नेगनेक्स को कस सकते हैं और सर्वर की तरफ से ओवरहेड प्राप्त कर सकते हैं।

नुकसान:
1. प्रति मिनट 1Kb का एक छोटा ट्रैफ़िक रिसाव (प्रति सत्र 1kb की लागत कम करने की क्षमता के साथ)
2. पिंग सर्वर को बढ़ाने की आवश्यकता
3. बड़ी संख्या में हैंगिंग कनेक्शन
4. यदि पिंग सर्वर मुख्य सर्वर के समान डोमेन पर स्थित है, तो हम 4 संभावित http कनेक्शन में से 1 पर कब्जा कर लेते हैं।

कोड

आप इस सब के माध्यम से स्क्रॉल कर सकते हैं, स्रोत कोड के साथ संग्रह और नीचे एक उदाहरण।

ping.php - हमारा पिंग सर्वर

<?php isset($_GET['long']) && sleep(55); header("Content-type: image/gif"); header("Expires: Wed, 11 Nov 1998 11:11:11 GMT"); header("Cache-Control: no-cache"); header("Cache-Control: must-revalidate"); // 1x1 gif printf("%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c" . "%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c", 71,73,70,56,57,97,1,0,1,0,128,255,0,192,192,192,0,0,0,33, 249,4,1,0,0,0,0,44,0,0,0,0,1,0,1,0,0,2,2,68,1,0,59); ?> 

Nginx HttpEmptyGifModule के माध्यम से एक और विकल्प है

 location = /_.gif { empty_gif; } 

मुझे नहीं पता कि नगनेक्स पर एक लंबे अनुरोध को कैसे लागू किया जाए, इसलिए मैंने पीएचपी पर एक विकल्प संलग्न किया।

Ping.js

 /** * @fileOveriew Long Polling Image Ping */ (function (window, Image) { /** * Long Polling Image Ping * * Way to detect user's inernet connection */ var Lpip = { BASE_URL: 'ping.php', /** * Long polling request URL. Can be crossdomain */ LONG_POLLING_IMAGE_URL: '?long', /** * Common image request. Can be crossdomain */ IMAGE_URL: '', RECONNECT_TIMEOUT: 15000, _image: null, _stage: 2, _makeImage: function (url) { var image = new Image(); image.onload = Lpip.onImageLoad; image.onerror = Lpip.onImageError; image.src = url + (url.match(/\?/) ? '&' : '?') + Math.random(); return Lpip._image = image; }, /** * @type Boolean */ online: false, /** * @type Boolean */ offline: false, /** * Long polling image request */ watch: function () { // Opera fix if (window.opera) { window.setTimeout(function () { Lpip._makeImage(Lpip.BASE_URL + Lpip.IMAGE_URL); }, Lpip.RECONNECT_TIMEOUT); return; } // For other browsers Lpip._makeImage(Lpip.BASE_URL + Lpip.LONG_POLLING_IMAGE_URL); }, /** * Quick image request */ quick: function () { Lpip._makeImage(Lpip.BASE_URL + Lpip.IMAGE_URL); }, onImageLoad: function () { if (!this.width) { // Error Lpip.onImageError.call(this); } else { // Image ok if (Lpip._stage > 1) { // Internet connection up! Lpip.onConnectionUp(); Lpip.offline = !(Lpip.online = true); } // Reset errors Lpip._stage = 0; // Continue requesting Lpip.watch(); } }, onImageError: function () { Lpip._stage += 1; if (Lpip._stage > 1) { if (Lpip._stage === 2) { // User's internet connection down... Lpip.onConnectionDown(); Lpip.offline = !(Lpip.online = false); } // Try reconnect window.setTimeout(Lpip.quick, Lpip.RECONNECT_TIMEOUT); } else { // Maybe long polling request aborts for some resons // Try to get "quick image" Lpip.quick(); } }, onConnectionUp: function () { window.console && window.console.log('onConnectionUp'); }, onConnectionDown: function () { window.console && window.console.log('onConnectionDown'); } }; // Exporting Lpip window.Ping = { /** * Inits Ping * * @param {Object} [options] * @param {Number} [options.reconnectTimeout=15000] * @param {String} [options.baseUrl='ping.php'] */ init: function (options) { Lpip.RECONNECT_TIMEOUT = options.reconnectTimeout || Lpip.RECONNECT_TIMEOUT; Lpip.BASE_URL = options.baseUrl || Lpip.BASE_URL; // User can cancel long polling request by pressing Esc button in Firefox or Opera if (window.addEventListener) { window.document.addEventListener('keypress', function (event) { if (event.keyCode === 27) { event.preventDefault(); } }, false); } Lpip.quick(); }, /** * Connection up event helper * * Supports only one listener * * @param {Function} callback */ connectionUp: function (callback) { Lpip.onConnectionUp = callback; }, /** * Connection up event helper * * Supports only one listener * * @param {Function} callback */ connectionDown: function (callback) { Lpip.onConnectionDown = callback; }, /** * @returns {Boolean} */ isOnline: function () { return Lpip.online; }, /** * @returns {Boolean} */ isOffline: function () { return Lpip.offline; } }; }(this, this.Image)); 

उदाहरण का उपयोग करें

 <body> <button onclick="checkConnectionStatus()">Connection Status</button> <pre id="log"></pre> <script type="text/javascript" src="Ping.js"></script> <script type="text/javascript"> (function (window, Ping, log) { log.innerHTML += 'Lpip is watching...<br/>'; Ping.connectionUp(function () { log.innerHTML += 'Connection Up<br/>'; }); Ping.connectionDown(function () { log.innerHTML += 'Connection Down<br/>'; }); // call on window.onload to prevent "loading... status" window.onload = function () { Ping.init({ 'baseUrl': '/lpip/ping.php', 'reconnectTimeout': 15000 }); }; window.checkConnectionStatus = function () { window.alert(Ping.isOnline() ? 'Online' : 'Offline'); } }(this, this.Ping, this.document.getElementById('log'))); </script> </body> 

लाइव उदाहरण: azproduction.ru/lpip (कृपया लंबे समय तक जांच न करें)
स्रोत: narod.ru/disk/6061703001/Ping.rar.html

आलोचना, सुझावों का स्वागत है। मुझे खुशी होगी अगर कोई व्यक्ति nginx के तहत पिंग सर्वर का एक संस्करण लिखता है।