ตรวจสอบว่าการเชื่อมต่ออินเทอร์เน็ตออฟไลน์หรือไม่

วิธีการตรวจสอบการเชื่อมต่ออินเทอร์เน็ตออฟไลน์ใน JavaScript?

คุณสามารถตรวจสอบว่าการเชื่อมต่อจะหายไปโดยการร้องขอ XHR ล้มเหลว

วิธีการมาตรฐานคือการลองส่งคำขออีกสองสามครั้ง ถ้ามันไม่ได้ผ่านไปเตือนผู้ใช้ในการตรวจสอบการเชื่อมต่อและล้มเหลวได้อย่างสง่างาม

Sidenote:ในการทำให้แอปพลิเคชันทั้งหมดอยู่ในสถานะ "ออฟไลน์" อาจทำให้เกิดข้อผิดพลาดในการจัดการสถานะ .. การเชื่อมต่อไร้สายอาจมาและไป ฯลฯ ดังนั้นทางออกที่ดีที่สุดของคุณคือการล้มเหลวอย่างสง่างาม ข้อมูลและแจ้งเตือนผู้ใช้ .. ทำให้พวกเขาสามารถแก้ไขปัญหาการเชื่อมต่อได้ในที่สุดหากมีอยู่และเพื่อใช้งานแอปของคุณต่อไปด้วยการให้อภัย

Sidenote:คุณสามารถตรวจสอบเว็บไซต์ที่เชื่อถือได้เช่น google สำหรับการเชื่อมต่อ แต่สิ่งนี้อาจไม่เป็นประโยชน์อย่างสมบูรณ์เพียงแค่พยายามส่งคำขอของคุณเองเพราะในขณะที่ Google อาจพร้อมให้ใช้งานแอปพลิเคชันของคุณเองอาจไม่เป็นเช่นนั้น ต้องจัดการกับปัญหาการเชื่อมต่อของคุณเอง การพยายามส่ง ping ไปยัง google จะเป็นวิธีที่ดีในการยืนยันว่าการเชื่อมต่ออินเทอร์เน็ตนั้นไม่ทำงานดังนั้นหากข้อมูลนั้นมีประโยชน์กับคุณ

Sidenote : การส่ง Pingสามารถทำได้ในลักษณะเดียวกับที่คุณทำขอ ajax สองทาง แต่การส่ง ping ไปยัง google ในกรณีนี้จะเป็นปัญหาบางอย่าง อันดับแรกเรามีปัญหาข้ามโดเมนแบบเดียวกันซึ่งโดยทั่วไปแล้วจะพบในการสื่อสาร Ajax ทางเลือกหนึ่งคือการตั้งค่าพร็อกซีฝั่งเซิร์ฟเวอร์โดยที่เราเป็นpinggoogle (หรือเว็บไซต์ใด ๆ ) และส่งคืนผลลัพธ์ของ ping ไปยังแอป นี่คือcatch-22เพราะหากการเชื่อมต่ออินเทอร์เน็ตเป็นปัญหาจริงเราจะไม่สามารถไปยังเซิร์ฟเวอร์และหากปัญหาการเชื่อมต่ออยู่ในโดเมนของเราเองเราจะไม่สามารถบอกความแตกต่างได้ สามารถลองใช้เทคนิคข้ามโดเมนอื่น ๆ ได้เช่นฝัง iframe ในหน้าเว็บของคุณซึ่งชี้ไปที่ google.com จากนั้นทำการสำรวจ iframe เพื่อความสำเร็จ / ล้มเหลว (ตรวจสอบเนื้อหา ฯลฯ ) การฝังรูปภาพอาจไม่สามารถบอกอะไรเราได้เลยเพราะเราต้องการการตอบสนองที่มีประโยชน์จากกลไกการสื่อสารเพื่อที่จะได้ข้อสรุปที่ดีเกี่ยวกับสิ่งที่เกิดขึ้น ดังนั้นการพิจารณาสถานะการเชื่อมต่ออินเทอร์เน็ตโดยรวมอาจมีปัญหามากกว่าที่ควรจะเป็น คุณจะต้องลดน้ำหนักตัวเลือกเหล่านี้สำหรับแอปเฉพาะของคุณ

IE 8 จะรองรับคุณสมบัติwindow.navigator.onLine

แต่แน่นอนว่าไม่ได้ช่วยอะไรกับเบราว์เซอร์หรือระบบปฏิบัติการอื่น ฉันคาดการณ์ว่าผู้ขายเบราว์เซอร์รายอื่นจะตัดสินใจจัดหาอสังหาริมทรัพย์นั้นและให้ความสำคัญกับการรู้สถานะออนไลน์ / ออฟไลน์ในแอปพลิเคชัน Ajax

จนถึงที่เกิดขึ้นอย่างใดอย่างหนึ่งหรือ XHR Image()หรือ<img>คำขอสามารถให้สิ่งที่ใกล้เคียงกับการทำงานที่คุณต้องการ

อัปเดต (2014/11/16)

เบราว์เซอร์ส่วนใหญ่รองรับคุณสมบัตินี้ แต่ผลลัพธ์ของคุณจะแตกต่างกันไป

อ้างจากเอกสาร Mozilla :

ใน Chrome และ Safari หากเบราว์เซอร์ไม่สามารถเชื่อมต่อกับเครือข่ายท้องถิ่น (LAN) หรือเราเตอร์แสดงว่าออฟไลน์อยู่ เงื่อนไขอื่น ๆ trueทั้งหมดกลับ ดังนั้นในขณะที่คุณสามารถสันนิษฐานได้ว่าเบราว์เซอร์ออฟไลน์เมื่อส่งคืนfalseค่าคุณไม่สามารถสันนิษฐานได้ว่ามูลค่าที่แท้จริงจำเป็นต้องหมายความว่าเบราว์เซอร์สามารถเข้าถึงอินเทอร์เน็ตได้ คุณอาจได้รับผลบวกปลอมเช่นในกรณีที่คอมพิวเตอร์ใช้งานซอฟต์แวร์การจำลองเสมือนที่มีอะแดปเตอร์อีเธอร์เน็ตเสมือนที่เชื่อมต่ออยู่เสมอ ดังนั้นหากคุณต้องการตรวจสอบสถานะออนไลน์ของเบราว์เซอร์คุณควรพัฒนาวิธีการเพิ่มเติมสำหรับการตรวจสอบ

ใน Firefox และ Internet Explorer การสลับเบราว์เซอร์ไปที่โหมดออฟไลน์จะส่งfalseค่า เงื่อนไขอื่น ๆ ทั้งหมดคืนtrueค่า

เบราว์เซอร์หลักเกือบทั้งหมดสนับสนุนwindow.navigator.onLineคุณสมบัติและคุณสมบัติดังกล่าวแล้วonlineและofflineหน้าต่าง:

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

ลองตั้งค่าระบบหรือเบราว์เซอร์ของคุณในโหมดออฟไลน์ / ออนไลน์และตรวจสอบคอนโซลหรือ window.navigator.onLineคุณสมบัติสำหรับการเปลี่ยนแปลงค่า คุณสามารถทดสอบบนเว็บไซต์นี้ได้เช่นกัน

อย่างไรก็ตามโปรดอ้างอิงข้อความนี้จาก เอกสาร Mozilla :

ใน Chrome และ Safari หากเบราว์เซอร์ไม่สามารถเชื่อมต่อกับเครือข่ายท้องถิ่น (LAN) หรือเราเตอร์แสดงว่าออฟไลน์อยู่ เงื่อนไขอื่น ๆ trueทั้งหมดกลับ ดังนั้นในขณะที่คุณสามารถคิดว่าเบราว์เซอร์ออฟไลน์เมื่อผลตอบแทนfalseคุ้มค่า ,คุณไม่สามารถคิดว่าtrueคุ้มค่าจำเป็นต้องหมายความว่าเบราว์เซอร์สามารถเข้าถึงอินเทอร์เน็ต คุณอาจได้รับผลบวกปลอมเช่นในกรณีที่คอมพิวเตอร์ใช้งานซอฟต์แวร์การจำลองเสมือนที่มีอะแดปเตอร์อีเธอร์เน็ตเสมือนที่เชื่อมต่ออยู่เสมอ ดังนั้นหากคุณต้องการตรวจสอบสถานะออนไลน์ของเบราว์เซอร์คุณควรพัฒนาวิธีการเพิ่มเติมสำหรับการตรวจสอบ

ใน Firefox และ Internet Explorer การสลับเบราว์เซอร์ไปที่โหมดออฟไลน์จะส่งfalseค่า จนกว่า Firefox 41 จะมีการคืนเงื่อนไขอื่น ๆtrueค่า ตั้งแต่ Firefox 41 บน OS X และ Windows ค่าจะเป็นไปตามการเชื่อมต่อเครือข่ายจริง

(เน้นเป็นของฉันเอง)

ซึ่งหมายความว่าถ้าwindow.navigator.onLineเป็นfalse(หรือคุณได้รับofflineเหตุการณ์) คุณจะรับประกันว่าจะไม่มีการเชื่อมต่ออินเทอร์เน็ต

ถ้ามันเป็นtrue(หรือคุณได้รับonlineเหตุการณ์) ก็หมายความว่าระบบเชื่อมต่อกับเครือข่ายบางอย่างที่ดีที่สุด ไม่ได้หมายความว่าคุณมีการเข้าถึงอินเทอร์เน็ตเช่น ในการตรวจสอบว่าคุณยังคงต้องใช้หนึ่งในวิธีแก้ไขปัญหาที่อธิบายไว้ในคำตอบอื่น ๆ

_{ผมเริ่มตั้งใจที่จะโพสต์นี้เป็นการปรับปรุงเพื่อตอบแกรนท์วากเนอร์แต่ดูเหมือนว่ามันจะมากเกินไปแก้ไขโดยเฉพาะการพิจารณาว่าการปรับปรุง 2014 อยู่แล้วไม่ได้มาจากเขา}

มีหลายวิธีในการทำสิ่งนี้:

• AJAX ขอเว็บไซต์ของคุณเอง หากคำขอนั้นล้มเหลวอาจเป็นไปได้ว่าการเชื่อมต่อนั้นผิดพลาด JQueryเอกสารมีส่วนในการจัดการแสดง AJAX ล้มเหลว ระวังนโยบายต้นกำเนิดเดียวกันเมื่อทำสิ่งนี้ซึ่งอาจทำให้คุณไม่สามารถเข้าถึงเว็บไซต์ที่อยู่นอกโดเมนของคุณ

• คุณสามารถใส่ลงonerrorในimgแบบ

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

  วิธีนี้อาจล้มเหลวหากอิมเมจต้นทางถูกย้าย / เปลี่ยนชื่อและโดยทั่วไปจะเป็นตัวเลือกที่ด้อยกว่าสำหรับตัวเลือก ajax

ดังนั้นจึงมีหลายวิธีในการลองและตรวจจับสิ่งนี้ไม่มีอะไรสมบูรณ์แบบ แต่ในกรณีที่ไม่มีความสามารถในการกระโดดออกจาก sandbox ของเบราว์เซอร์และเข้าถึงสถานะการเชื่อมต่อเน็ตของผู้ใช้โดยตรงพวกเขาดูเหมือนจะเป็นตัวเลือกที่ดีที่สุด

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

HTML5 Application Cache API ระบุ navigator.onLine ซึ่งปัจจุบันมีให้บริการใน IE8 betas, WebKit (เช่น Safari) nightlies และได้รับการสนับสนุนใน Firefox 3 แล้ว

คุณสามารถใช้การโทรกลับของ$ .ajax ()errorซึ่งจะเกิดไฟหากคำขอล้มเหลว หากtextStatusเท่ากับสตริง "หมดเวลา" อาจหมายถึงการเชื่อมต่อเสียหาย:

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

จากเอกสาร :

ข้อผิดพลาด : ฟังก์ชั่นที่จะเรียกถ้าคำขอล้มเหลว ฟังก์ชันผ่านสามอาร์กิวเมนต์: วัตถุ XMLHttpRequest สตริงที่อธิบายถึงประเภทของข้อผิดพลาดที่เกิดขึ้นและวัตถุข้อยกเว้นทางเลือกหากเกิดขึ้น ค่าที่เป็นไปได้สำหรับอาร์กิวเมนต์ที่สอง (นอกเหนือจาก null) คือ "หมดเวลา", "ข้อผิดพลาด", "notmodified" และ "parsererror" นี่คือเหตุการณ์ Ajax

ตัวอย่างเช่น:

 $.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 กล่าวว่าการใช้navigator.onLineคุณสมบัติเบราว์เซอร์ดีกว่าการส่งคำขอเครือข่ายและตามด้วยdeveloper.mozilla.org/En/Online_and_offline_eventsจะสนับสนุน Firefox และ IE เวอร์ชันเก่าด้วย

เมื่อเร็ว ๆ นี้ WHATWG ได้ระบุการเพิ่มonlineและofflineเหตุการณ์ในกรณีที่คุณต้องการตอบสนองnavigator.onLineการเปลี่ยนแปลง

โปรดสังเกตลิงก์ที่โพสต์โดย Daniel Silveira ซึ่งชี้ให้เห็นว่าการใช้สัญญาณ / คุณสมบัติสำหรับการซิงค์กับเซิร์ฟเวอร์นั้นไม่ใช่ความคิดที่ดีเสมอไป

window.navigator.onLine

คือสิ่งที่คุณกำลังมองหา แต่บางสิ่งที่นี่เพื่อเพิ่มก่อนอื่นหากเป็นบางสิ่งในแอปของคุณที่คุณต้องการตรวจสอบต่อไป (เช่นดูว่าผู้ใช้ออฟไลน์ทันทีหรือไม่ซึ่งแก้ไขในกรณีนี้เป็นส่วนใหญ่) จำเป็นต้องฟังการเปลี่ยนแปลงด้วย) เพื่อให้คุณเพิ่มตัวฟังเหตุการณ์ในหน้าต่างเพื่อตรวจจับการเปลี่ยนแปลงใด ๆ เพื่อตรวจสอบว่าผู้ใช้ออฟไลน์หรือไม่คุณสามารถทำสิ่งต่อไปนี้

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

และสำหรับการตรวจสอบว่าออนไลน์:

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

ฉันต้องสร้างเว็บแอพ (ajax based) สำหรับลูกค้าที่ทำงานกับโรงเรียนบ่อยโรงเรียนเหล่านี้มักจะมีการเชื่อมต่ออินเทอร์เน็ตที่ไม่ดีฉันใช้ฟังก์ชั่นง่าย ๆ นี้เพื่อตรวจสอบว่ามีการเชื่อมต่อใช้งานได้ดีมาก!

ฉันใช้ CodeIgniter และ 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();
        }
    });
}

การโทร ajax ไปยังโดเมนของคุณเป็นวิธีที่ง่ายที่สุดในการตรวจสอบว่าคุณออฟไลน์อยู่หรือไม่

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

นี่เป็นเพียงการนำเสนอแนวคิดที่ควรปรับปรุง

เช่นข้อผิดพลาด = 404 ควรหมายความว่าคุณออนไลน์

ฉันคิดว่ามันเป็นวิธีที่ง่ายมาก

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;

ฉันกำลังมองหาโซลูชันฝั่งไคลเอ็นต์เพื่อตรวจสอบว่าอินเทอร์เน็ตหยุดทำงานหรือเซิร์ฟเวอร์ของฉันหยุดทำงาน วิธีแก้ปัญหาอื่น ๆ ที่ฉันพบมักจะขึ้นอยู่กับไฟล์สคริปต์ของบุคคลที่สามหรือรูปภาพ สคริปต์หรือรูปภาพที่โฮสต์ภายนอกอาจเปลี่ยนแปลงได้ในอนาคตและทำให้รหัสการตรวจจับล้มเหลว

ฉันได้พบวิธีตรวจสอบโดยค้นหา xhrStatus ด้วยรหัส 404 นอกจากนี้ฉันใช้ JSONP เพื่อข้ามข้อ จำกัด CORS รหัสสถานะอื่นที่ไม่ใช่ 404 แสดงว่าการเชื่อมต่ออินเทอร์เน็ตไม่ทำงาน

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

ทางของฉัน.

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

ปัญหาของวิธีการบางอย่างเช่นnavigator.onLineพวกเขาเข้ากันไม่ได้กับบางเบราว์เซอร์และรุ่นมือถือตัวเลือกที่ช่วยฉันได้มากคือการใช้XMLHttpRequestวิธีการแบบคลาสสิกและคาดการณ์กรณีที่เป็นไปได้ว่าไฟล์ถูกเก็บไว้ในแคชด้วยการตอบสนองXMLHttpRequest.statusมากกว่า 200 และน้อยกว่า 304

นี่คือรหัสของฉัน:

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

มีคำตอบ 2 ข้อสำหรับสองรุ่นที่แตกต่างกัน: -

1. หากคุณใช้ JavaScript บนเว็บไซต์ (เช่นหรือส่วนหน้า) วิธีที่ง่ายที่สุดคือ:

   <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. แต่ถ้าคุณใช้ js ในฝั่งเซิร์ฟเวอร์ (เช่นโหนด ฯลฯ ) คุณสามารถตรวจสอบว่าการเชื่อมต่อขาดหายไปโดยการร้องขอ XHR ที่ล้มเหลว

   วิธีการมาตรฐานคือการลองส่งคำขออีกสองสามครั้ง หากไม่ผ่านให้เตือนผู้ใช้ให้ตรวจสอบการเชื่อมต่อและล้มเหลวอย่างสง่างาม

หัวคำขอในข้อผิดพลาดคำขอ

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

นี่คือตัวอย่างของยูทิลิตี้ผู้ช่วยที่ฉันมี นี่คือ javascript เนมสเปซ:

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

คุณควรใช้วิธีนี้กับการตรวจจับวิธีอื่นโดยไม่ต้องใช้วิธีอื่นในการทำเช่นนี้ เวลาใกล้เข้ามาเร็วเมื่อสิ่งนี้เป็นทุกอย่างที่ต้องการ วิธีการอื่นจะแฮ็ก