2013-04-26 16 views
44

में इंटरनेट कनेक्शन की जाँच कैसे यह है कि कैसे मैं वेनिला जावास्क्रिप्ट में इंटरनेट कनेक्शन की जांच होगी। मुझे उपरोक्त कोड कहां रखना चाहिए? इसे वैश्विक संदर्भ में निष्पादित किया जाना चाहिए और किसी निश्चित नियंत्रक को असाइन नहीं किया जाना चाहिए। क्या कोई वैश्विक नियंत्रक हो सकता है?AngularJS

+0

यह भी देखें http://stackoverflow.com/questions/15574580/how-can-i-detect-with-angularjs-if-the-app-is-offline – Mawg

उत्तर

133

सबसे पहले, मैं आपको online/offline events सुनने की सलाह देता हूं।

आप इसे AnguarJS में इस तरह से कर सकते हैं:

var app = module('yourApp', []); 

app.run(function($window, $rootScope) { 
     $rootScope.online = navigator.onLine; 
     $window.addEventListener("offline", function() { 
     $rootScope.$apply(function() { 
      $rootScope.online = false; 
     }); 
     }, false); 

     $window.addEventListener("online", function() { 
     $rootScope.$apply(function() { 
      $rootScope.online = true; 
     }); 
     }, false); 
}); 

नोट: मैं $apply विधि में जड़ गुंजाइश के चर की बदलती कोणीय सूचित करने के लिए है कि कुछ बदल गया था लपेटकर कर रहा हूँ।

उसके बाद आप कर सकते हैं:

controlller में:

$scope.$watch('online', function(newStatus) { ... }); 

HTML मार्कअप में: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

अन्य समाधान के लिए हो सकता है:

<div ng-show="online">You're online</div> 
<div ng-hide="online">You're offline</div> 

यहाँ एक काम Plunker है ऑनलाइन/ऑफ़लाइन घटना प्रसारित करें। लेकिन इस मामले में आपको लोड होने पर वर्तमान स्थिति शुरू करने की आवश्यकता है और फिर ईवेंट की सदस्यता लें।

+0

आपके जेएस कोड में एक टाइपो है, आप गायब हैं ')' $ को बंद करने के लिए '(बस कोशिश की गई और मुझे एक त्रुटि मिली: अनकॉटेड टाइपरर: अपरिभाषित –

+1

की विधि' addEventListener 'को कॉल नहीं कर सकता धन्यवाद। मैं अपना जवाब सही कर दूंगा और प्लंकर जोड़ूंगा। –

+3

नोट यह फ़ायरफ़ॉक्स में काम नहीं करता है। उन्होंने नेविगेटर को लागू करने के लिए चुना है। अलग-अलग ब्राउज़र से अलग करें, जो वास्तव में ऐसे डेवलपर्स को नुकसान पहुंचा रहा है जो ऑफ़लाइन ऐप्स विकसित करना चाहते हैं। –

16

यह निश्चित रूप से अच्छा नहीं है, लेकिन आप बस अपने वेब सर्वर पर AJAX अनुरोध का प्रयास कर सकते हैं; यह या तो सफल हो जाएगा या समय समाप्त हो जाएगा।

इसके अलावा, HubSpot/offline project वास्तव में अच्छा लगता है।

+1

के बजाय' emit && प्रसारण' का उपयोग करें! + लेकिन, लॉल: यही वह है जिसे मैं प्रतिस्थापित करने की कोशिश कर रहा हूं। मेरे पास एक सेवा थी जो पुनः कनेक्ट करने का प्रयास करने के लिए ज़िम्मेदार है। कोई भी जो '$ http.get' की कोशिश करता है और 404 प्राप्त करता है वह सेवा का आह्वान कर सकता है जो 1) प्रसारण करेगा कि कोई इंटरनेट नहीं था (ताकि कोई और कनेक्ट करने का प्रयास नहीं करेगा), 2) नियमित रूप से मेरे सर्वर से कनेक्ट करने का प्रयास करता है और, 3) सफल होने पर, कनेक्शन प्रयासों को रोकें और प्रसारित करें कि ऐप अब ऑनलाइन है। हालांकि, यह बहुत कर्कश लग रहा था और यह समाधान सुरुचिपूर्ण लग रहा था - एफएफ को छोड़कर :-(मैं यहां पहिया को फिर से नहीं चला सकता। अन्य लोग इसे कैसे करते हैं? – Mawg

+0

ओह, संबंधित प्रश्न पर मेरी टिप्पणी देखें http://stackoverflow.com/प्रश्न/15574580/कैसे-कर-i-detect-with-angularjs-if-the-app-is-ऑफ़लाइन है "मैंने इसे डी/एल नहीं किया है, मैंने अपने सिम्युलेटर को खोलने के बजाए अपने सिम्युलेटर को खोला है। , मैंने वास्तव में अपना ईथरनेट केबल खींचा। क्रोम और एमएस आईई में, मैं "आप ऑफलाइन हैं" अलर्ट पर जाता हूं। एफएफ ने इसे नहीं दिखाया। Stackoverflow.com/questions/16242389/.. भी देखें। जो इंगित करता है कि एफएफ गैर- मानक " – Mawg

0

आपके विकल्प: खिड़की, दस्तावेज़, या document.body पर

  • addEventListener।

  • एक जावास्क्रिप्ट समारोह वस्तु के लिए दस्तावेज़ या
    document.body पर .ononline या .onoffline गुण स्थापित।

  • ononline को निर्दिष्ट = "..." या onoffline = "..." टैग पर में HTML मार्कअप

मैं सबसे आसान प्रदर्शन करेंगे जिम्मेदार बताते हैं।

आप में नियंत्रक

document.body.onoffline = function() { 
    alert('You are offline now'); 
    $scope.connection = 'offline' 
} 

document.body.ononline = function() { 
    alert('You are online again'); 
    $scope.connection = 'online' 
} 

चेक $ scope.connection चर इससे पहले कि आप अनुरोध चारों ओर भेजने का प्रयास करें।