Bagaimana cara mendeteksi koneksi Internet offline dalam JavaScript?
javascript
ajax
offline
connectivity
internet-connection
Daniel Silveira
sumber
sumber
Jawaban:
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
ping
google (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.sumber
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 :
sumber
Hampir semua browser utama sekarang mendukung
window.navigator.onLine
properti, dan acara terkaitonline
danoffline
jendela:Coba atur sistem atau browser Anda dalam mode offline / online dan periksa konsol atau
window.navigator.onLine
properti untuk perubahan nilainya. Anda dapat mengujinya di situs web ini juga.Namun perhatikan kutipan dari Dokumentasi Mozilla ini :
(Penekanan adalah milikku)
Ini berarti bahwa jika
window.navigator.onLine
adalahfalse
(atau Anda mendapatkanoffline
event), Anda dijamin tidak memiliki koneksi internet.Namun jika itu
true
(atau Anda mendapatkan suatuonline
acara), 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 .
sumber
Ada beberapa cara untuk melakukan ini:
Anda bisa menempatkan
onerror
dalamimg
, sepertiMetode 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.
sumber
sumber
API Cache Aplikasi HTML5 menentukan navigator.onLine, yang saat ini tersedia di beta IE8, WebKit (mis. Safari) nightlies, dan sudah didukung di Firefox 3
sumber
Anda dapat menggunakan $ ajax () 's
error
callback, yang kebakaran jika permintaan gagal. JikatextStatus
sama dengan string "batas waktu" itu mungkin berarti koneksi terputus:Dari dokumen :
Jadi misalnya:
sumber
Seperti yang dikatakan olliej, menggunakan
navigator.onLine
properti 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
online
danoffline
acara, jika Anda perlu bereaksi terhadapnavigator.onLine
perubahan.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
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:
dan untuk memeriksa jika online:
sumber
onLine
. Browser mendefinisikan keadaan online yang sangat berbeda. Lihatlah developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine .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:
sumber
panggilan ajax ke domain Anda adalah cara termudah untuk mendeteksi jika Anda sedang luring
ini hanya untuk memberi Anda konsep, itu harus diperbaiki.
Misalnya kesalahan = 404 masih berarti Anda online
sumber
Saya pikir ini cara yang sangat sederhana.
sumber
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
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.
sumber
Jalanku.
sumber
Masalah dari beberapa metode seperti
navigator.onLine
adalah bahwa mereka tidak kompatibel dengan beberapa browser dan versi mobile, opsi yang banyak membantu saya adalah menggunakanXMLHttpRequest
metode klasik dan juga meramalkan kemungkinan kasus bahwa file disimpan dalam cache dengan responsXMLHttpRequest.status
lebih besar daripada 200 dan kurang dari 304.Ini kode saya:
sumber
Ada 2 jawaban untuk ini untuk dua senarios yang berbeda: -
Jika Anda menggunakan JavaScript di situs web (yaitu; atau bagian front-end) Cara paling sederhana untuk melakukannya adalah:
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.
sumber
kepala permintaan dalam kesalahan permintaan
sumber
Berikut ini cuplikan utilitas pembantu yang saya miliki. Ini adalah javascript namespaced:
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.
sumber