İnternet bağlantısı çevrimdışı mı tespit edildi?

JavaScript'te İnternet bağlantısı çevrimdışı olarak nasıl algılanır?

Başarısız XHR istekleri yaparak bağlantının kesildiğini belirleyebilirsiniz .

Standart yaklaşım, talebi birkaç kez yeniden denemektir . O geçmesi etmezse, kullanıcıyı uyarmak bağlantısını kontrol etmek ve incelikle başarısız .

Sidenote: Tüm uygulamayı "çevrimdışı" duruma getirmek, hatayı halletmek için hataya açık bir çok çalışmaya yol açabilir .. kablosuz bağlantılar gelip gidebilir, vb. verileri ve kullanıcıyı uyarın .. varsa sonunda bağlantı sorunu çözmek için izin ve uygulamanızı adil bir bağış ile kullanmaya devam etmek.

Sidenote: Bağlantı için google gibi güvenilir bir siteyi kontrol edebilirsiniz, ancak bu sadece kendi isteğinizi yapmaya çalışmak gibi tamamen kullanışlı olmayabilir, çünkü Google kullanılabilirken, kendi uygulamanız olmayabilir ve hala kendi bağlantı probleminizi halletmek zorundasınız. Google'a bir ping göndermeye çalışmak, internet bağlantısının kendisinin kapalı olduğunu doğrulamak için iyi bir yol olacaktır, bu nedenle bu bilgi sizin için yararlıysa, sorun yaşamaya değer olabilir.

Sidenote : Bir Ping göndermek , herhangi bir şekilde iki yönlü ajax isteğinde bulunacağınız şekilde elde edilebilir, ancak bu durumda google'a bir ping göndermek bazı zorluklar doğurabilir. İlk olarak, genellikle Ajax iletişimi yaparken karşılaşılan siteler arası sorunlarla aynı olurdu. Bir seçenek, aslında pinggoogle (veya herhangi bir site) olan ve ping sonuçlarını uygulamaya döndürdüğümüz bir sunucu tarafı proxy oluşturmaktır . Bu bir yakalama-22çünkü internet bağlantısı aslında sorunsa, sunucuya ulaşamayacağız ve bağlantı sorunu sadece kendi alanımızdaysa, farkı söyleyemeyiz. Diğer çapraz etki alanları teknikleri, örneğin, sayfanıza google.com'u işaret eden bir iframe yerleştirmek ve daha sonra iframe'i başarı / başarısızlık için sorgulamak (içerikleri inceleyin, vb.) Denenebilir. Bir görüntüyü gömmek bize hiçbir şey anlatmayabilir, çünkü neler olduğu hakkında iyi bir sonuç çıkarmak için iletişim mekanizmasından faydalı bir yanıt almamız gerekir. Bu yüzden, yine, bir bütün olarak internet bağlantısının durumunu belirlemek değerinden daha fazla sorun olabilir. Uygulamanız için bu seçenekleri ağırlıklandırmanız gerekir.

IE 8, window.navigator.onLine özelliğini destekleyecektir .

Ancak elbette bu, diğer tarayıcılarda veya işletim sistemlerinde yardımcı olmaz. Ajax uygulamalarında çevrimiçi / çevrimdışı durumunu bilmenin önemi göz önüne alındığında, diğer tarayıcı satıcılarının bu özelliği sağlamaya karar vereceğini tahmin ediyorum.

Bu gerçekleşene kadar, XHR veya bir Image()veya <img>istek istediğiniz işlevselliğe yakın bir şey sağlayabilir.

Güncelleme (2014/11/16)

Büyük tarayıcılar artık bu mülkü desteklemektedir, ancak sonuçlarınız değişiklik gösterecektir.

Mozilla Belgelerinden Alıntı :

Chrome ve Safari'de, tarayıcı bir yerel alan ağına (LAN) veya yönlendiriciye bağlanamıyorsa çevrimdışıdır; diğer tüm koşullar geri döner true. Dolayısıyla, bir falsedeğer döndürdüğünde tarayıcının çevrimdışı olduğunu varsayabilirsiniz, ancak gerçek bir değerin mutlaka tarayıcının İnternet'e erişebileceği anlamına gelemeyeceğini varsayabilirsiniz. Bilgisayarın her zaman "bağlı" sanal ethernet bağdaştırıcıları olan bir sanallaştırma yazılımı çalıştırdığı durumlar gibi yanlış pozitifler alıyor olabilirsiniz. Bu nedenle, tarayıcının çevrimiçi durumunu gerçekten belirlemek istiyorsanız, kontrol etmek için ek araçlar geliştirmelisiniz.

Firefox ve Internet Explorer'da tarayıcıyı çevrimdışı moda geçirmek bir falsedeğer gönderir . Diğer tüm koşullar bir truedeğer döndürür .

Hemen hemen tüm büyük tarayıcılarwindow.navigator.onLine özelliği, karşılık gelen onlineve offlinepencere olaylarını destekliyor :

window.addEventListener('online', () => console.log('came online'));
window.addEventListener('offline', () => console.log('came offline'));

Sisteminizi veya tarayıcınızı çevrimdışı / çevrimiçi modda ayarlamayı deneyin ve konsolda veya window.navigator.onLinemülkte değer değişiklikleri olup olmadığını kontrol edin . Bu web sitesinde de test edebilirsiniz .

Ancak Mozilla Belgeleri'nden gelen bu alıntıya dikkat edin :

Chrome ve Safari'de, tarayıcı bir yerel alan ağına (LAN) veya yönlendiriciye bağlanamıyorsa çevrimdışıdır; diğer tüm koşullar geri döner true. Süre Yani sen, tarayıcının bir döndüğünde çevrimdışı olduğunu varsayabiliriz falsedeğeri , bir kabul edemeyiz truedeğeri mutlaka aracı tarayıcı İnternet'e erişebileceği şekilde . Bilgisayarın her zaman "bağlı" sanal ethernet bağdaştırıcıları olan bir sanallaştırma yazılımı çalıştırdığı durumlar gibi yanlış pozitifler alıyor olabilirsiniz. Bu nedenle, tarayıcının çevrimiçi durumunu gerçekten belirlemek istiyorsanız, kontrol etmek için ek araçlar geliştirmelisiniz.

Firefox ve Internet Explorer'da tarayıcıyı çevrimdışı moda geçirmek bir falsedeğer gönderir . Firefox 41'e kadar, diğer tüm koşullar bir truedeğer döndürür ; Firefox 41'den beri, OS X ve Windows'ta, değer gerçek ağ bağlantısını takip edecektir.

(vurgu benimdir)

Bu araç olduğunu window.navigator.onLineise false(veya bir olsun offlineolayı), İnternet bağlantınız olması garanti edilir.

Eğer durum bu ise true(veya bir olsun ancak onlineolayı), sadece sistem en iyi, bazı ağa bağlı olduğu anlamına gelir. Örneğin, İnternet erişiminiz olduğu anlamına gelmez. Bunu kontrol etmek için, diğer cevaplarda açıklanan çözümlerden birini kullanmanız gerekecektir.

_{Başlangıçta bunu Grant Wagner'in cevabına bir güncelleme olarak göndermeyi amaçladım , ancak özellikle 2014 güncellemesinin zaten ondan olmadığını düşünerek çok fazla düzenleme yapıldı .}

Bunu yapmanın çeşitli yolları var:

• Kendi web sitenize AJAX isteği. Bu istek başarısız olursa, hatalı bağlantı olması ihtimali vardır. JQuery dokümantasyon bir bölüm vardır başarısız AJAX istekleri işlemek . Bunu yaparken Alan Adınız dışındaki sitelere erişmenizi engelleyebilecek Aynı Başlangıç ​​Politikasına dikkat edin .

• Bir koyabilirsiniz onerrorbir in imggibi

  <img src='http://www.example.com/singlepixel.gif' 
        onerror='alert("Connection dead");' />

  Kaynak görüntü taşındığında / yeniden adlandırıldığında da bu yöntem başarısız olabilir ve genellikle ajax seçeneğinden daha düşük bir seçim olacaktır.

Bu yüzden, bunu denemek ve tespit etmek için birkaç farklı yol var, hiçbiri mükemmel değil, ancak tarayıcı sanal alanından çıkma ve kullanıcının net bağlantı durumuna doğrudan erişme yeteneğinin yokluğunda, en iyi seçenek gibi görünüyorlar.

 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }

HTML5 Uygulama Önbelleği API'sı şu anda IE8 beta, WebKit (örn. Safari) gecelerinde kullanılabilen ve Firefox 3'te zaten desteklenen navigator.onLine öğesini belirtir.

$ .Ajax () 'in erroristeği başarısız olursa tetiklenen geri aramayı kullanabilirsiniz . Eğer textStatusdize "zaman aşımı" eşittir muhtemelen bağlantı bozuldu anlamı:

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

Gönderen doc :

Hata : İstek başarısız olursa çağrılacak bir işlev. İşlev üç argümandan geçirilir: XMLHttpRequest nesnesi, oluşan hata türünü açıklayan bir dize ve varsa isteğe bağlı bir istisna nesnesi. İkinci bağımsız değişken için olası değerler (null dışında) "zaman aşımı", "hata", "değiştirilmemiş" ve "ayrıştırıcı" dır. Bu bir Ajax Etkinliği

Yani mesela:

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });

Olliej'in dediği gibi, navigator.onLinetarayıcı özelliğini kullanmak ağ istekleri göndermekten daha tercih edilir ve buna göre developer.mozilla.org/En/Online_and_offline_events ile Firefox ve IE'nin eski sürümleri tarafından bile desteklenir.

Son zamanlarda, WHATWG, değişikliklere tepki vermeniz gerektiğinde onlineve offlineolaylarının eklenmesini belirtmiştir navigator.onLine.

Ayrıca, sunucu ile senkronizasyon için bu sinyale / özelliğe güvenmenin her zaman iyi bir fikir olmadığını belirten Daniel Silveira tarafından yayınlanan bağlantıya da dikkat edin.

window.navigator.onLine

aradığınız şeydir, ancak önce uygulamanızda kontrol etmeye devam etmek istediğiniz bir şey varsa eklemek için birkaç şey var (kullanıcının aniden çevrimdışı olup olmadığını görmek gibi, bu durumda çoğu zaman Değişikliği dinlemeniz gerekir), herhangi bir değişikliği algılamak için pencereye olay dinleyicisi eklediğinizde, kullanıcının çevrimdışı olup olmadığını kontrol etmek için şunları yapabilirsiniz:

window.addEventListener("offline", 
  ()=> console.log("No Internet")
);

ve çevrimiçi olup olmadığını kontrol etmek için:

window.addEventListener("online", 
  ()=> console.log("Connected Internet")
);

Okullarla çok çalışan bir müşteri için bir web uygulaması (ajax tabanlı) yapmak zorunda kaldım, bu okulların çoğu zaman kötü bir internet bağlantısı var Bir bağlantı olup olmadığını tespit etmek için bu basit işlevi kullanıyorum, çok iyi çalışıyor!

CodeIgniter ve Jquery kullanıyorum:

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.ajax({
        url : submitURL,
        type : "post",
        dataType : "msg",
        timeout : 5000,
        success : function(msg) {
            if(msg==1) {
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            } else {
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        },
        error : function() {
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}

alan adınıza yapılan bir ajax çağrısı, çevrimdışı olup olmadığınızı belirlemenin en kolay yoludur

$.ajax({
      type: "HEAD",
      url: document.location.pathname + "?param=" + new Date(),
      error: function() { return false; },
      success: function() { return true; }
   });

bu size sadece kavramı vermek için geliştirilmelidir.

Örneğin error = 404 hala çevrimiçi olduğunuz anlamına gelmelidir

Bence bu çok basit bir yol.

var x = confirm("Are you sure you want to submit?");
if (x) {
  if (navigator.onLine == true) {
    return true;
  }
  alert('Internet connection is lost');
  return false;
}
return false;

Ben internet kapalı veya sunucum kapalı olup olmadığını tespit etmek için bir istemci tarafı çözüm arıyordu. Bulduğum diğer çözümler her zaman 3. taraf komut dosyası veya görüntüsüne bağımlı görünüyordu, ki bu bana zamanın testine dayanacak gibi görünmüyordu. Harici bir barındırılan komut dosyası veya resim gelecekte değişebilir ve algılama kodunun başarısız olmasına neden olabilir.

Ben bir 404 kodu ile bir xhrStatus arayarak tespit etmek için bir yol buldum. Ayrıca, CORS kısıtlamasını atlamak için JSONP kullanıyorum. 404 dışında bir durum kodu, İnternet bağlantısının çalışmadığını gösterir.

$.ajax({
    url:      'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html',
    dataType: 'jsonp',
    timeout:  5000,

    error: function(xhr) {
        if (xhr.status == 404) {
            //internet connection working
        }
        else {
            //internet is down (xhr.status == 0)
        }
    }
});

Benim yolum.

<!-- the file named "tt.jpg" should exist in the same directory -->

<script>
function testConnection(callBack)
{
    document.getElementsByTagName('body')[0].innerHTML +=
        '<img id="testImage" style="display: none;" ' +
        'src="tt.jpg?' + Math.random() + '" ' +
        'onerror="testConnectionCallback(false);" ' +
        'onload="testConnectionCallback(true);">';

    testConnectionCallback = function(result){
        callBack(result);

        var element = document.getElementById('testImage');
        element.parentNode.removeChild(element);
    }    
}
</script>

<!-- usage example -->

<script>
function myCallBack(result)
{
    alert(result);
}
</script>

<a href=# onclick=testConnection(myCallBack);>Am I online?</a>

Gibi bazı yöntemlerin problemi, bazı navigator.onLinetarayıcılar ve mobil sürümlerle uyumlu olmamalarıdır, bana çok yardımcı olan bir seçenek, klasik XMLHttpRequestyöntemi kullanmaktı ve ayrıca dosyanın yanıtla önbellekte saklanması XMLHttpRequest.statusolasılığını daha büyük 200 ve 304'den az.

İşte benim kod:

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}

İki farklı senarios için 2 cevap var: -

1. Bir web sitesinde JavaScript kullanıyorsanız (örneğin; veya herhangi bir ön uç parçası) Bunu yapmanın en basit yolu:

   <h2>The Navigator Object</h2>
   
   <p>The onLine property returns true if the browser is online:</p>
   
   <p id="demo"></p>
   
   <script>
     document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine;
   </script>

2. Ancak sunucu tarafında js kullanıyorsanız (örn. Düğüm vb.), Başarısız XHR istekleri yaparak bağlantının kesildiğini belirleyebilirsiniz.

   Standart yaklaşım, talebi birkaç kez yeniden denemektir. Geçmezse, bağlantıyı kontrol etmesi için kullanıcıyı uyarın ve zarif bir şekilde başarısız olun.

istekte istek başlığı hatası

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

İşte bir yardımcı programın parçacığı. Bu ad boşluklu javascript:

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

Bunu yöntem algılama ile kullanmalısınız, aksi takdirde bunu yapmanın 'alternatif' bir yolunu ateşleyin. İhtiyaç duyulan her şeyin ne zaman olacağı zaman hızla yaklaşıyor. Diğer yöntemler hack'lerdir.