Deteksi koneksi internet sedang offline?

246

Bagaimana cara mendeteksi koneksi Internet offline dalam JavaScript?

Daniel Silveira
sumber
Jika Anda bisa atau sudah menggunakan websockets - websockets memiliki acara tutup yang harus dipanggil jika pengguna kehilangan koneksi ke server.
Simon

Jawaban:

135

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.

keparo
sumber
84
"Sidenote" yang berulang itu terdengar seperti Dwight Schrute yang mengatakan "Pertanyaan ..." :-)
Brian Kelly
19
Mengapa "catch-22" dicetak tebal?
codingbear
33
Sekarang di 2012 Anda dapat memeriksa variabel navigator.onLine;)
João Pinto Jerónimo
13
navigator.online/offline juga tidak dapat diandalkan, karena alasan yang sama. Lihat stackoverflow.com/questions/3181080/…
Efran Cobisi
17
Anda mungkin ingin memeriksa Offline.js , pustaka sumber terbuka yang dibangun hanya untuk tujuan ini.
Adam
51

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.

Grant Wagner
sumber
5
navigator.onLine adalah bagian dari HTML5 - browser lain sudah memiliki versi pengembangan yang menyediakannya - itu sudah tersedia di Firefox 3 hari ini.
olliej
-tapi sayangnya tidak tersedia di versi IE yang lebih lama, yang seringkali harus kami dukung.
keparo
22
navigator.onLine menunjukkan keadaan browser dan bukan koneksi yang sebenarnya. Jadi Anda dapat mengatur peramban Anda menjadi onLine tetapi sebenarnya akan gagal karena koneksi terputus. navigator.onLine hanya akan salah jika browser diatur ke penjelajahan offline.
5
jika saya mematikan WI-FI pada Nexus7 saya, halaman masih mengatakan bahwa navigator.onLine BENAR. Buruk ...
walv
42

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 .

Didier L
sumber
Jawaban Terbaik. Terima kasih.
vibs2006
1
Saya baru-baru ini memiliki kesempatan untuk bekerja sedikit pada perilaku offline. Acara ini sangat bagus untuk digunakan, TETAPI ios safari akan menciptakan masalah. Ketika Anda menghidupkan internet di ponsel Anda, acara offline / online akan tertunda hingga 2 detik dan itu bisa menjadi masalah untuk alasan rendering visual, karena Anda tidak dapat memprediksi masa depan. Itu hanya sesuatu yang ingin saya sebutkan dan mungkin membantu seseorang.
TeeJaay
38

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.

ConroyP
sumber
36
 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }
Edmhs
sumber
11
Ini mengembalikan selalu BENAR jika di browser.
Slavcho
2
Yah pertama saya mencoba untuk menonaktifkan LAN HANYA, tetapi selalu mengembalikan BENAR. Jadi ketika saya menonaktifkan semua jaringan (LAN2, Virtual Box dll.) Itu mengembalikan SALAH.
Slavcho
3
Jawaban ini menggandakan beberapa jawaban yang ada dari 3 tahun sebelumnya.
JasonMArcher
2
itu tidak memeriksa konektivitas internet, itu hanya memeriksa konektivitas LAN saja
Suganth G
Bekerja untuk saya di HTML 5, JavaScript, di buku mac (menggunakan wifi) bahkan bekerja di ponsel. tapi masalah adalah - ketika wifi di dalamnya mengembalikan TRUE setiap kali bahkan saya mematikan wifi sebaliknya.
S.Yadav
11

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

olliej
sumber
11

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!');
       }
   }
 });
karim79
sumber
9

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.


sumber
UPDATE: Pada 2015 tampaknya berfungsi di sebagian besar browser, lihat bagan dan artikel
Olga
8
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")
);
Alireza
sumber
2
Anda harus berhati-hati onLine. Browser mendefinisikan keadaan online yang sangat berbeda. Lihatlah developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine .
Andreas Baumgart
1
Jawaban Anda salah. Properti 'onLine' tidak ada hubungannya dengan konektivitas internet. Lihat referensi di atas tentang api web.
Alexandre V.
7

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

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

Harishr
sumber
4

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;
Prakash Pazhanisamy
sumber
onLine tidak berarti bahwa ada koneksi internet. Menurut developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true
Shmuel Kamensky
2

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)
        }
    }
});
cara masa depan
sumber
2
Itu tidak bekerja pada 10-5-2016 tidak yakin mengapa tidak ingin waktu orang lain terbuang sia-sia.
Bren
Saya tidak berpikir jadi itu akan berhasil untuk kesalahan permintaan terlarang dan buruk :)
Faisal Naseer
1

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>
tidak dikunci
sumber
1

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 :(');
         }
     }
}
Vladimir Salguero
sumber
0

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.

Rishabh Anand
sumber
0

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"); 
              }
         });
    }   
});
Kareem
sumber
-1

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.

Peter Mortensen
sumber