인터넷 연결이 오프라인 상태임을 감지하시겠습니까?

Question

JavaScript에서 인터넷 연결이 오프라인인지 어떻게 감지합니까?

Answer 1

당신은 실패한 XHR 요청.

표준 접근법은 다음과 같습니다 요청을 다시 시도하십시오 몇 번. 통과하지 않으면 사용자에게 경고하십시오 연결을 확인하고 우아하게 실패합니다.

사이드 노트 : 전체 애플리케이션을 "오프라인"상태에 넣으면 처리 상태의 많은 오류가 발생하기 쉬운 작업으로 이어질 수 있습니다. 무선 연결이 올 수 있습니다. 사용자에게 경고하십시오. 연결 문제가있는 경우 결국 연결 문제를 해결하고 상당한 양의 용서로 앱을 계속 사용할 수 있습니다.

사이드 노트 : Google과 같은 신뢰할 수있는 사이트를 확인할 수는 있지만 Google이 사용할 수 있지만 자신의 응용 프로그램이 없을 수도 있고 여전히해야 할 것입니다. 자신의 연결 문제를 처리하십시오. Google으로 핑을 보내려고하는 것은 인터넷 연결 자체가 다운되었음을 확인하는 좋은 방법이므로 해당 정보가 유용하면 문제가 될 수 있습니다.

사이드 노트: 핑을 보냅니다 어떤 종류의 양방향 Ajax 요청을하는 것과 같은 방식으로 달성 될 수 있지만, Google에 핑을 보내면 몇 가지 어려움이 생길 것입니다. 첫째, 우리는 Ajax 커뮤니케이션을 만드는 데 일반적으로 발생하는 동일한 크로스 도메인 문제가 있습니다. 한 가지 옵션은 서버 측 프록시를 설정하는 것입니다. ping Google (또는 어떤 사이트), 핑 결과를 앱으로 반환하십시오. 이것은 캐치 -22 인터넷 연결이 실제로 문제가되면 서버에 도달 할 수 없으며 연결 문제가 자체 도메인에만 있으면 차이를 알 수 없습니다. 예를 들어 페이지에 iframe을 포함시키는 다른 크로스 도메인 기술을 시도 할 수 있으며, 이는 Google.com을 가리키고 Iframe을 성공/실패 (내용을 검사하는 등)를 폴링합니다. 이미지를 포함 시키면 실제로 무슨 일이 일어나고 있는지에 대한 좋은 결론을 도출하기 위해 커뮤니케이션 메커니즘의 유용한 응답이 필요하기 때문에 실제로 아무 말도하지 않을 수 있습니다. 따라서 인터넷 연결 상태를 전체적으로 결정하는 것이 가치보다 더 어려울 수 있습니다. 특정 앱을 위해이 옵션을 가중시켜야합니다.

Answer 2

IE 8은 Window.navigator.online 재산.

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

그런 일이 일어나기 전까지 xhr 또는 an Image() 또는 <img> 요청은 원하는 기능에 가까운 것을 제공 할 수 있습니다.

업데이트 (2014/11/16)

주요 브라우저는 이제이 속성을 지원하지만 결과는 다릅니다.

인용 모질라 문서:

Chrome 및 Safari에서 브라우저가 LAN (Local Area Network) 또는 라우터에 연결할 수없는 경우 오프라인 상태입니다. 다른 모든 조건이 돌아옵니다 true. 따라서 브라우저가 반환 할 때 오프라인 상태라고 가정 할 수 있습니다. false 값, 진정한 값은 반드시 브라우저가 인터넷에 액세스 할 수 있음을 의미 할 수 없습니다. 컴퓨터가 항상 "연결된 가상 이더넷 어댑터가있는 가상화 소프트웨어를 실행하는 경우와 같은 잘못된 양성을 얻을 수 있습니다. 따라서 브라우저의 온라인 상태를 실제로 결정하려면 확인을위한 추가 수단을 개발해야합니다.

Firefox 및 Internet Explorer에서 브라우저를 오프라인 모드로 전환하면 false 값. 다른 모든 조건은 a true 값.

Answer 3

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

• Ajax 자신의 웹 사이트에 대한 요청. 해당 요청이 실패하면 결함이 발생할 가능성이 높습니다. 그만큼 jQuery 문서에는 섹션이 있습니다 처리 실패 Ajax 요청 처리. 조심하십시오 동일한 원산지 정책 이 작업을 수행 할 때는 도메인 외부의 사이트에 액세스하지 못하게 할 수 있습니다.

• 당신은 넣을 수 있습니다 onerror 에서 img, 처럼

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

  이 방법은 소스 이미지의 이름이 이동 / 이름이 변경되면 실패 할 수 있으며 일반적으로 Ajax 옵션에 대한 열등한 선택입니다.

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

Answer 4

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

Answer 5

거의 모든 주요 브라우저 이제 지원하세요 window.navigator.onLine 재산과 그에 상응하는 online 그리고 offline 창 이벤트:

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

시스템이나 브라우저를 오프라인/온라인 모드로 설정하고 콘솔이나 window.navigator.onLine 값 변경에 대한 속성입니다.당신은 그것을 테스트 할 수 있습니다 이 웹사이트 또한.

그러나 이 인용문을 참고하세요. 모질라 문서:

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년 업데이트가 이미 그 사람이 아니라.}

Answer 6

HTML5 애플리케이션 캐시 API는 현재 IE8 Betas, WebKit (예 : Safari) 야간에서 사용할 수있는 Navigator.online을 지정하며 이미 Firefox 3에서 지원되어 있습니다.

Answer 7

Olliej가 말했듯이 navigator.onLine 브라우저 속성은 네트워크 요청을 보내는 것보다 선호됩니다. Developer.mozilla.org/en/online_and_offline_events, 그것은 기존 버전의 Firefox와 IE에 의해 지원됩니다.

최근 Whatwg는 online 그리고 offline 반응해야 할 경우 이벤트 navigator.onLine 변화.

또한 Daniel Silveira가 게시 한 링크에주의를 기울이십시오. 서버와 동기화하기위한 신호/속성에 의존하는 것이 항상 좋은 아이디어는 아닙니다.

Answer 8

당신이 사용할 수있는 $ .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!');
       }
   }
 });

Answer 9

도메인에 대한 Ajax 호출은 오프라인 상태 인 경우 가장 쉬운 방법입니다.

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

이것은 단지 당신에게 개념을 제공하기위한 것입니다. 개선되어야합니다. 반환 HTTP 상태 코드 등을 확인하십시오.

Answer 10

나는 그것이 매우 간단한 방법이라고 생각합니다.

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;

Answer 11

나는 학교에서 많이 일하는 고객을 위해 웹 앱 (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();
        }
    });
}

Answer 12

인터넷이 다운되었거나 서버가 다운되었는지 여부를 감지 할 클라이언트 측 솔루션을 찾고있었습니다. 내가 찾은 다른 솔루션은 항상 제 3 자 스크립트 파일 또는 이미지에 의존하는 것처럼 보였습니다. 외부 호스팅 스크립트 또는 이미지가 향후 변경 될 수 있으며 감지 코드가 실패 할 수 있습니다.

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

Answer 13

내 방식.

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

Answer 14

두 개의 다른 senarios에 대한 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 요청에 실패하여 연결이 손실되는지 확인할 수 있습니다.

   표준 접근법은 요청을 몇 번 다시 시도하는 것입니다. 통과하지 않으면 사용자에게 연결을 확인하도록 경고하고 우아하게 실패하십시오.

Answer 15

요청 오류에서 헤드를 요청하십시오

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

Answer 16

다음은 내가 가진 도우미 유틸리티의 스 니펫입니다. 이것은 네임 스펙트 어 JavaScript입니다.

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

이 작업을 수행하는 '대체'방식에서 메소드 감지와 함께 사용해야합니다. 이것이 필요한 전부가 될 때 시간이 빠르게 다가오고 있습니다. 다른 방법은 해킹입니다.