인터넷 연결이 오프라인입니까?

인터넷 연결이 JavaScript에서 오프라인인지 감지하는 방법은 무엇입니까?

XHR 요청에 실패 하면 연결이 끊어 졌는지 확인할 수 있습니다 .

표준 접근 방식은 요청 을 몇 번 다시 시도하는 것 입니다. 연결되지 않으면 사용자 에게 연결을 확인하도록 알리고 정상적으로 실패하십시오 .

참고 : 전체 응용 프로그램을 "오프라인"상태로두면 오류가 발생하기 쉬운 상태 처리 작업이 많이 발생할 수 있습니다. 무선 연결이왔다 갔다 할 수 있습니다. 따라서 가장 좋은 방법은 정상적으로 실패하는 것입니다. 연결 문제가있는 경우 결국 해결하고 상당한 양의 용서로 앱을 계속 사용할 수 있도록합니다.

참고 : Google과 같은 안정적인 사이트에서 연결을 확인할 수는 있지만 Google은 사용할 수는 있지만 자신의 응용 프로그램을 사용할 수없고 계속 사용할 수 있기 때문에 직접 요청하는 것만으로는 유용하지 않을 수 있습니다. 자신의 연결 문제를 처리해야합니다. Google에 핑을 보내려고 시도하면 인터넷 연결 자체가 다운되었음을 확인할 수있는 좋은 방법이므로 해당 정보가 유용한 경우 문제가 될 수 있습니다.

참고 : Ping 전송은 양방향 아약스 요청과 같은 방식으로 수행 할 수 있지만이 경우 Google에 핑을 전송하면 몇 가지 문제가 발생합니다. 먼저 Ajax 통신에서 일반적으로 발생하는 동일한 도메인 간 문제가 있습니다. 하나의 옵션은 서버 측 프록시를 설정하는 것입니다. 서버 측 프록시는 실제로 pingGoogle (또는 모든 사이트)이며 핑 결과를 앱에 반환합니다. 이것은 catch-22입니다인터넷 연결이 실제로 문제이면 서버에 접속할 수없고 연결 문제가 자체 도메인에만있는 경우 차이를 알 수 없기 때문입니다. 예를 들어 google.com을 가리키는 iframe을 페이지에 삽입 한 다음 성공 / 실패를 위해 iframe을 폴링 (콘텐츠 검사 등)하는 다른 도메인 간 기술을 시도해 볼 수 있습니다. 무슨 일이 일어나고 있는지에 대한 좋은 결론을 내리기 위해서는 의사 소통 메커니즘으로부터 유용한 응답이 필요하기 때문에 이미지를 포함시키는 것이 실제로 우리에게 아무 것도 말해주지 못할 수도 있습니다. 다시 말하지만, 인터넷 연결 상태를 전체적으로 결정하는 것은 가치보다 더 어려울 수 있습니다. 특정 앱에 대해 이러한 옵션에 가중치를 부여해야합니다.

IE 8은 window.navigator.onLine 속성 을 지원합니다 .

물론 다른 브라우저 나 운영 체제에는 도움이되지 않습니다. 다른 브라우저 공급 업체가 Ajax 애플리케이션에서 온라인 / 오프라인 상태를 알아야하는 중요성을 고려하여 해당 속성을 제공하기로 결정할 것으로 예상합니다.

그렇게 될 때까지 XHR 또는 Image()또는 <img>요청은 원하는 기능에 가까운 것을 제공 할 수 있습니다.

업데이트 (2014/11/16)

주요 브라우저는 이제이 속성을 지원하지만 결과는 달라질 수 있습니다.

에서 인용 Mozilla 문서 :

Chrome 및 Safari에서 브라우저가 LAN (Local Area Network) 또는 라우터에 연결할 수없는 경우 브라우저가 오프라인 상태입니다. 다른 모든 조건은 반환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 Documentation의 인용문은 다음과 같습니다.

Chrome 및 Safari에서 브라우저가 LAN (Local Area Network) 또는 라우터에 연결할 수없는 경우 브라우저가 오프라인 상태입니다. 다른 모든 조건은을 반환 true합니다. 반면 그래서 당신이이 반환 할 때 브라우저가 오프라인 상태임을 가정 할 수 false값을 , 당신은 가정 수없는 true값이 반드시 수단이 브라우저가 인터넷에 액세스 할 수 있는지 . 컴퓨터가 항상 "연결된"가상 이더넷 어댑터가있는 가상화 소프트웨어를 실행하는 경우와 같이 오 탐지가 발생할 수 있습니다. 따라서 브라우저의 온라인 상태를 실제로 확인하려면 추가 검사 방법을 개발해야합니다.

Firefox 및 Internet Explorer에서 브라우저를 오프라인 모드로 전환하면 false값이 전송 됩니다. Firefox 41까지는 다른 모든 조건이 true값을 반환 합니다. Firefox 41부터 OS X 및 Windows에서이 값은 실제 네트워크 연결을 따릅니다.

(강조는 내 자신이다)

경우 수단이 있다는 window.navigator.onLine것입니다 false(또는 당신이 얻을 offline이벤트), 당신은 인터넷에 연결되지 않은 보장됩니다.

이 경우 true(또는 당신이 얻을 그러나 online이벤트), 그것은 단지 시스템이 최상의 일부 네트워크에 연결되어있는 것을 의미한다. 예를 들어 인터넷에 액세스 할 수있는 것은 아닙니다. 이를 확인하려면 다른 답변에 설명 된 솔루션 중 하나를 사용해야합니다.

_{처음에는 이것을 Grant Wagner의 답변에 대한 업데이트로 게시하려고 했지만 특히 2014 업데이트가 이미 업데이트 되지 않았다는 점을 고려하면 너무 많은 편집으로 보였습니다 .}

이를 수행하는 방법에는 여러 가지가 있습니다.

• 자신의 웹 사이트에 대한 AJAX 요청. 해당 요청이 실패하면 연결이 잘못되었을 가능성이 큽니다. JQuery와 문서에 대한 섹션이 실패 AJAX 요청을 처리를 . 이 작업을 수행 할 때 동일한 출처 정책에 주의하십시오 . 도메인 외부 사이트에 액세스하지 못할 수 있습니다.

• 당신은 넣을 수 onerror에서 img처럼,

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

  소스 이미지를 이동하거나 이름을 바꾸면이 방법이 실패 할 수 있으며 일반적으로 ajax 옵션보다 열등한 선택입니다.

따라서 이것을 시도하고 감지하는 몇 가지 방법이 있지만 완벽하지는 않지만 브라우저 샌드 박스에서 뛰어 나와 사용자의 순 연결 상태에 직접 액세스 할 수없는 경우 최상의 옵션 인 것 같습니다.

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

HTML5 응용 프로그램 캐시 API는 현재 IE8 베타, WebKit (예 : Safari)에서 사용할 수 있으며 Firefox 3에서 이미 지원되는 navigator.onLine을 지정합니다.

당신이 사용할 수있는 $ 아약스를 () 의 error콜백 요청이 실패 할 경우 어떤 화재. 경우 textStatus문자열 "시간 제한"에 해당 아마 연결이 끊어 의미 :

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

로부터 문서 :

오류 : 요청이 실패하면 호출 할 함수입니다. 이 함수에는 세 가지 인수가 전달됩니다. XMLHttpRequest 객체, 발생한 오류 유형을 설명하는 문자열 및 발생한 예외 객체 (선택적). 두 번째 인수 (널 제외)의 가능한 값은 "timeout", "error", "not modified"및 "parsererror"입니다. 아약스 이벤트입니다

예를 들어 :

 $.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 기반)을 만들어야했습니다.이 학교는 종종 인터넷 연결이 좋지 않습니다.이 간단한 기능을 사용하여 연결이 있는지 감지하고 잘 작동합니다!

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

이것은 단지 개념을 제공하기위한 것이며 개선되어야합니다.

예를 들어 error = 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;

인터넷이 다운되었거나 서버가 다운되었는지 감지하는 클라이언트 측 솔루션을 찾고있었습니다. 내가 찾은 다른 솔루션은 항상 타사 스크립트 파일 또는 이미지에 의존하는 것처럼 보였습니다. 시간이 지남에 따라 보이지 않습니다. 외부 호스트 스크립트 또는 이미지는 나중에 변경되어 검색 코드가 실패 할 수 있습니다.

404 코드로 xhrStatus를 찾아서 감지하는 방법을 찾았습니다. 또한 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 :(');
         }
     }
}

두 가지 다른 시나리오에 대한 두 가지 답변이 있습니다.

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

다음은 내가 가지고있는 도우미 유틸리티의 스 니펫입니다. 이것은 네임 스페이스가있는 자바 스크립트입니다.

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

메소드 감지와 함께 사용해야하며, 그렇지 않으면이를 대체하는 '대체'방식으로 시작해야합니다. 이것이 필요한 모든 시간이 다가오고 있습니다. 다른 방법은 해킹입니다.