Deteksi koneksi internet sedang offline?

Bagaimana cara mendeteksi koneksi Internet offline dalam JavaScript?

Anda dapat menentukan bahwa koneksi terputus dengan membuat permintaan XHR gagal .

Pendekatan standar adalah mencoba lagi permintaan beberapa kali. Jika tidak berhasil, beri tahu pengguna untuk memeriksa koneksi, dan gagal dengan anggun .

Sidenote: Untuk menempatkan seluruh aplikasi dalam keadaan "offline" dapat menyebabkan banyak pekerjaan yang rawan kesalahan dalam penanganan negara .. koneksi nirkabel dapat datang dan pergi, dll. Jadi taruhan terbaik Anda mungkin hanya gagal dengan anggun, pertahankan data, dan beri tahu pengguna .. memungkinkan mereka untuk akhirnya memperbaiki masalah koneksi jika ada, dan untuk terus menggunakan aplikasi Anda dengan cukup pengampunan.

Sidenote: Anda dapat memeriksa situs yang dapat diandalkan seperti google untuk konektivitas, tetapi ini mungkin tidak sepenuhnya berguna hanya dengan mencoba membuat permintaan Anda sendiri, karena sementara Google mungkin tersedia, aplikasi Anda sendiri mungkin tidak, dan Anda masih akan harus menangani masalah koneksi Anda sendiri. Mencoba mengirim ping ke google akan menjadi cara yang baik untuk mengonfirmasi bahwa koneksi internet itu sendiri sedang down, jadi jika informasi itu berguna bagi Anda, maka itu mungkin sepadan dengan masalahnya.

Sidenote : Mengirimkan Ping dapat dicapai dengan cara yang sama seperti Anda membuat permintaan ajax dua arah, tetapi mengirimkan ping ke google, dalam hal ini, akan menimbulkan beberapa tantangan. Pertama, kami akan memiliki masalah lintas domain yang sama yang biasanya ditemui dalam membuat komunikasi Ajax. Salah satu opsi adalah menyiapkan proxy sisi-server, di mana kami sebenarnya pinggoogle (atau situs apa pun), dan mengembalikan hasil ping ke aplikasi. Ini adalah tangkapan ke-22karena jika koneksi internet sebenarnya adalah masalahnya, kami tidak akan bisa sampai ke server, dan jika masalah koneksi hanya pada domain kami sendiri, kami tidak akan dapat membedakannya. Teknik lintas domain lainnya dapat dicoba, misalnya, menyematkan iframe di halaman Anda yang menunjuk ke google.com, dan kemudian polling iframe untuk keberhasilan / kegagalan (memeriksa konten, dll.). Memasukkan gambar mungkin tidak benar-benar memberi tahu kita apa-apa, karena kita memerlukan respons yang berguna dari mekanisme komunikasi untuk menarik kesimpulan yang baik tentang apa yang terjadi. Jadi sekali lagi, menentukan keadaan koneksi internet secara keseluruhan mungkin lebih banyak masalah daripada nilainya. Anda harus mempertimbangkan opsi ini untuk aplikasi spesifik Anda.

IE 8 akan mendukung properti window.navigator.onLine .

Tetapi tentu saja itu tidak membantu dengan browser lain atau sistem operasi. Saya memperkirakan vendor browser lain akan memutuskan untuk menyediakan properti itu juga mengingat pentingnya mengetahui status online / offline dalam aplikasi Ajax.

Sampai itu terjadi, XHR Image()atau <img>permintaan dapat memberikan sesuatu yang dekat dengan fungsi yang Anda inginkan.

Pembaruan (2014/11/16)

Browser utama sekarang mendukung properti ini, tetapi hasil Anda akan bervariasi.

Kutipan dari Dokumentasi Mozilla :

Di Chrome dan Safari, jika browser tidak dapat terhubung ke jaringan area lokal (LAN) atau router, itu offline; semua kondisi lainnya kembali true. Jadi, sementara Anda dapat berasumsi bahwa browser sedang offline ketika mengembalikan falsenilai, Anda tidak dapat mengasumsikan bahwa nilai sebenarnya berarti bahwa browser dapat mengakses internet. Anda bisa mendapatkan positif palsu, seperti dalam kasus di mana komputer menjalankan perangkat lunak virtualisasi yang memiliki adaptor ethernet virtual yang selalu "terhubung." Karena itu, jika Anda benar-benar ingin menentukan status online browser, Anda harus mengembangkan cara tambahan untuk memeriksa.

Di Firefox dan Internet Explorer, beralih browser ke mode offline mengirim falsenilai. Semua kondisi lain mengembalikan truenilai.

Hampir semua browser utama sekarang mendukung window.navigator.onLineproperti, dan acara terkait onlinedan offlinejendela:

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

Coba atur sistem atau browser Anda dalam mode offline / online dan periksa konsol atau window.navigator.onLineproperti untuk perubahan nilainya. Anda dapat mengujinya di situs web ini juga.

Namun perhatikan kutipan dari Dokumentasi Mozilla ini :

Di Chrome dan Safari, jika browser tidak dapat terhubung ke jaringan area lokal (LAN) atau router, itu offline; semua kondisi lainnya kembali true. Jadi, sementara Anda dapat berasumsi bahwa browser sedang offline ketika mengembalikan falsenilai , Anda tidak dapat mengasumsikan bahwa suatu truenilai berarti bahwa browser dapat mengakses internet . Anda bisa mendapatkan false positive, seperti dalam kasus di mana komputer menjalankan perangkat lunak virtualisasi yang memiliki adapter ethernet virtual yang selalu "terhubung." Karena itu, jika Anda benar-benar ingin menentukan status online browser, Anda harus mengembangkan cara tambahan untuk memeriksa.

Di Firefox dan Internet Explorer, beralih browser ke mode offline mengirim falsenilai. Sampai Firefox 41, semua kondisi lainnya mengembalikan truenilai; sejak Firefox 41, pada OS X dan Windows, nilainya akan mengikuti konektivitas jaringan yang sebenarnya.

(Penekanan adalah milikku)

Ini berarti bahwa jika window.navigator.onLineadalah false(atau Anda mendapatkan offlineevent), Anda dijamin tidak memiliki koneksi internet.

Namun jika itu true(atau Anda mendapatkan suatu onlineacara), itu hanya berarti sistem terhubung ke jaringan, paling banter. Itu tidak berarti bahwa Anda memiliki akses Internet misalnya. Untuk memeriksa itu, Anda masih perlu menggunakan salah satu solusi yang dijelaskan dalam jawaban lain.

_{Saya awalnya bermaksud memposting ini sebagai pembaruan untuk jawaban Grant Wagner , tetapi sepertinya terlalu banyak edit, terutama mengingat bahwa pembaruan 2014 sudah bukan dari dia .}

Ada beberapa cara untuk melakukan ini:

• Permintaan AJAX ke situs web Anda sendiri. Jika permintaan itu gagal, ada kemungkinan koneksi itu salah. The JQuery dokumentasi memiliki bagian pada menangani permintaan AJAX gagal . Waspadai Kebijakan Asal yang Sama ketika melakukan ini, yang dapat menghentikan Anda mengakses situs di luar domain Anda.

• Anda bisa menempatkan onerrordalam img, seperti

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

  Metode ini juga bisa gagal jika gambar sumber dipindahkan / diganti namanya, dan umumnya akan menjadi pilihan yang lebih rendah daripada opsi ajax.

Jadi ada beberapa cara berbeda untuk mencoba dan mendeteksi ini, tidak ada yang sempurna, tetapi dengan tidak adanya kemampuan untuk melompat keluar dari kotak pasir browser dan mengakses status koneksi internet pengguna secara langsung, mereka tampaknya menjadi pilihan terbaik.

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

API Cache Aplikasi HTML5 menentukan navigator.onLine, yang saat ini tersedia di beta IE8, WebKit (mis. Safari) nightlies, dan sudah didukung di Firefox 3

Anda dapat menggunakan $ ajax () 's errorcallback, yang kebakaran jika permintaan gagal. Jika textStatussama dengan string "batas waktu" itu mungkin berarti koneksi terputus:

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

Dari dokumen :

Kesalahan : Suatu fungsi yang dipanggil jika permintaan gagal. Fungsi dilewatkan tiga argumen: Objek XMLHttpRequest, string yang menggambarkan jenis kesalahan yang terjadi dan objek pengecualian opsional, jika terjadi. Nilai yang mungkin untuk argumen kedua (selain nol) adalah "batas waktu", "kesalahan", "notmodified" dan "parsererror". Ini adalah Acara Ajax

Jadi misalnya:

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

Seperti yang dikatakan olliej, menggunakan navigator.onLineproperti browser lebih disukai daripada mengirim permintaan jaringan dan, sesuai dengan developer.mozilla.org/En/Online_and_offline_events , bahkan didukung oleh versi lama Firefox dan IE.

Baru-baru ini, WHATWG telah menentukan penambahan onlinedan offlineacara, jika Anda perlu bereaksi terhadap navigator.onLineperubahan.

Harap perhatikan juga tautan yang diposting oleh Daniel Silveira yang menunjukkan bahwa mengandalkan sinyal / properti untuk disinkronkan dengan server tidak selalu merupakan ide yang baik.

window.navigator.onLine

adalah apa yang Anda cari, tetapi beberapa hal di sini untuk ditambahkan, pertama, jika ada sesuatu di aplikasi Anda yang ingin Anda terus periksa (ingin melihat apakah pengguna tiba-tiba offline, yang benar dalam hal ini sebagian besar waktu, maka Anda perlu mendengarkan perubahan juga), untuk itu Anda menambahkan event listener ke jendela untuk mendeteksi perubahan, untuk memeriksa apakah pengguna offline, Anda dapat melakukan:

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

dan untuk memeriksa jika online:

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

Saya harus membuat aplikasi web (berbasis ajax) untuk pelanggan yang banyak bekerja dengan sekolah, sekolah-sekolah ini sering memiliki koneksi internet yang buruk. Saya menggunakan fungsi sederhana ini untuk mendeteksi jika ada koneksi, bekerja dengan sangat baik!

Saya menggunakan CodeIgniter dan Jquery:

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

panggilan ajax ke domain Anda adalah cara termudah untuk mendeteksi jika Anda sedang luring

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

ini hanya untuk memberi Anda konsep, itu harus diperbaiki.

Misalnya kesalahan = 404 masih berarti Anda online

Saya pikir ini cara yang sangat sederhana.

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;

Saya sedang mencari solusi sisi klien untuk mendeteksi apakah internet sedang down atau server saya sedang down. Solusi lain yang saya temukan tampaknya selalu bergantung pada file skrip pihak ketiga atau gambar, yang bagi saya sepertinya tidak akan bertahan lama. Skrip atau gambar yang di-host eksternal dapat berubah di masa mendatang dan menyebabkan kode deteksi gagal.

Saya telah menemukan cara untuk mendeteksinya dengan mencari xhrStatus dengan kode 404. Selain itu, saya menggunakan JSONP untuk mem-bypass pembatasan CORS. Kode status selain 404 menunjukkan koneksi internet tidak berfungsi.

$.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)
        }
    }
});

Jalanku.

<!-- 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>

Masalah dari beberapa metode seperti navigator.onLineadalah bahwa mereka tidak kompatibel dengan beberapa browser dan versi mobile, opsi yang banyak membantu saya adalah menggunakan XMLHttpRequestmetode klasik dan juga meramalkan kemungkinan kasus bahwa file disimpan dalam cache dengan respons XMLHttpRequest.statuslebih besar daripada 200 dan kurang dari 304.

Ini kode saya:

 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 :(');
         }
     }
}

Ada 2 jawaban untuk ini untuk dua senarios yang berbeda: -

1. Jika Anda menggunakan JavaScript di situs web (yaitu; atau bagian front-end) Cara paling sederhana untuk melakukannya adalah:

   <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. Tetapi jika Anda menggunakan js di sisi server (yaitu; node dll.), Anda dapat menentukan bahwa koneksi terputus dengan membuat permintaan XHR yang gagal.

   Pendekatan standar adalah mencoba lagi permintaan beberapa kali. Jika tidak berhasil, beri tahu pengguna untuk memeriksa koneksi, dan gagal dengan anggun.

kepala permintaan dalam kesalahan permintaan

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

Berikut ini cuplikan utilitas pembantu yang saya miliki. Ini adalah javascript namespaced:

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

Anda harus menggunakan ini dengan metode deteksi selain melepaskan cara 'alternatif' untuk melakukan ini. Waktu semakin dekat ketika ini yang dibutuhkan. Metode lainnya adalah peretasan.