인터넷 연결이 오프라인 상태인지 탐지하시겠습니까?
JavaScript에서 인터넷 연결이 오프라인인지 탐지하려면 어떻게 해야 합니까?
이제 거의 모든 주요 브라우저가 이 속성을 지원하며, 이에 상응하는online
그리고.offline
창구행사 다음 코드 조각을 실행하여 테스트합니다.
console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');
window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));
document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));
<button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br />
Check the console below for results:
하거나 "" "/" " " " " " 를 .window.navigator.onLine
값 변경에 대한 속성입니다.
그러나 Mozilla Documentation의 다음 인용문을 참고하십시오.
가 LAN Network)할 수 이며, 은 Chrome 에 Safari 서 LAN(Local Area Network) 또는에우수인오상라없프및며경다니반됩환조이건모다이른든태우는할결연터라가라저우는브▁▁in(▁isitions▁return다▁safari니▁cond▁if▁other반됩환▁safari이조;및▁all건▁browser모,▁chrome른다든▁the▁and▁it,,)▁(▁area▁offline▁network▁network며local상▁is인이에오▁area▁a서▁local
true
따라서 값을 반환할 때 브라우저가 오프라인 상태라고 가정할 수 있지만 값이 반드시 브라우저가 인터넷에 액세스할 수 있음을 의미한다고 가정할 수는 없습니다.컴퓨터에서 가상 이더넷 어댑터가 항상 "연결"되어 있는 가상화 소프트웨어를 실행하는 경우와 같이 잘못된 긍정이 나타날 수 있습니다.따라서 브라우저의 온라인 상태를 확인하려면 추가 확인 방법을 개발해야 합니다.및 하면 Firefox "Internet Explorer"가 됩니다.
false
value.은 모두 ". ". " 41", " " " " " " 을 합니다.true
41 X 및연결을 . Firefox 41 이후 OS X 및 Windows에서는 값이 실제 네트워크 연결을 따릅니다.
(내 것은 내 것입니다)
이것은 만약에window.navigator.onLine
이라false
(으)ㄹ 수 있습니다.offline
이 없음을 보장합니다.
그것이 면다그라면.true
은 하만혹 (당은신은지혹))을 받습니다.online
이벤트), 이는 시스템이 기껏해야 일부 네트워크에 연결되어 있음을 의미합니다.예를 들어 인터넷에 액세스할 수 있다는 의미는 아닙니다.이를 확인하려면 다른 답변에 설명된 솔루션 중 하나를 사용해야 합니다.
처음에는 그랜트 바그너의 답변에 대한 업데이트로 이 글을 올릴 생각이었지만, 특히 2014년 업데이트가 이미 그의 것이 아니라는 점을 고려하면 너무 편집한 것처럼 보였습니다.
실패한 XHR 요청을 수행하여 연결이 끊어졌는지 확인할 수 있습니다.
일반적인 접근 방식은 요청을 몇 번 재시도하는 것입니다.연결되지 않으면 연결을 확인하도록 사용자에게 경고하고 정상적으로 실패합니다.
참고 사항:전체 애플리케이션을 "오프라인" 상태로 전환하면 많은 오류가 발생할 수 있습니다.무선 연결이 왔다 갔다 하는 등의 문제가 발생할 수 있습니다.따라서 정상적으로 실패하고 데이터를 보존한 후 사용자에게 경고하는 것이 최선의 방법일 수 있습니다.연결 문제가 발생할 경우 최종적으로 문제를 해결하고 상당한 용서를 받으며 앱을 계속 사용할 수 있도록 합니다.
참고 사항:Google과 같은 신뢰할 수 있는 사이트에서 연결을 확인할 수 있지만, Google은 사용할 수 있지만 사용자의 응용 프로그램은 사용할 수 없고 사용자 자신의 연결 문제를 처리해야 하기 때문에 사용자 자신의 요청을 작성하는 것만으로는 완전히 유용하지 않을 수 있습니다.구글에 핑을 보내려고 하는 것은 인터넷 연결 자체가 중단되었음을 확인하는 좋은 방법이 될 것이므로, 만약 그 정보가 당신에게 유용하다면, 그것은 수고할 가치가 있을 것입니다.
참고 사항:Ping을 보내는 것은 양방향 Ajax 요청을 하는 것과 동일한 방식으로 수행될 수 있지만, 이 경우 Google에 Ping을 보내는 것은 몇 가지 문제가 될 수 있습니다.첫째, Ajax 통신에서 일반적으로 발생하는 것과 동일한 도메인 간 문제가 있습니다.한 가지 옵션은 서버 측 프록시를 설정하는 것입니다. 여기서 우리는 실제로ping
Google(또는 모든 사이트)을 검색하고 ping 결과를 앱에 반환합니다.인터넷 연결이 실제로 문제라면 서버에 접근할 수 없고, 연결 문제가 자신의 도메인에만 있는 경우에는 차이를 구별할 수 없기 때문에 이것은 22번째 문제입니다.예를 들어, 페이지에 google.com 을 가리키는 iframe을 내장한 다음 iframe을 폴링하여 성공/성공 여부를 확인하는 등의 다른 도메인 간 기술을 시도할 수 있습니다(내용 검토 등)이미지를 포함하는 것은 우리에게 아무 것도 알려주지 않을 수도 있습니다. 왜냐하면 우리는 무슨 일이 일어나고 있는지에 대한 좋은 결론을 도출하기 위해 의사소통 메커니즘으로부터 유용한 응답이 필요하기 때문입니다.다시 말하지만, 전체적으로 인터넷 연결 상태를 결정하는 것은 가치보다 더 어려울 수 있습니다.특정 앱에 대해 이러한 옵션을 고려해야 합니다.
IE 8은 window.navigator.onLine 속성을 지원합니다.
하지만 물론 다른 브라우저나 운영 체제에서는 도움이 되지 않습니다.Ajax 애플리케이션에서 온라인/오프라인 상태를 아는 것의 중요성을 고려할 때 다른 브라우저 공급업체들도 해당 속성을 제공하기로 결정할 것으로 예상합니다.
XHR 중 입니다.Image()
또는<img>
요청은 사용자가 원하는 기능과 유사한 기능을 제공할 수 있습니다.
업데이트(2014/11/16)
이제 주요 브라우저에서 이 속성을 지원하지만 결과는 달라집니다.
Mozilla 설명서의 인용문:
가 LAN Network)할 수 이며, 은 Chrome 에 Safari 서 LAN(Local Area Network) 또는에우수인오상라없프및며경다니반됩환조이건모다이른든태우는할결연터라가라저우는브▁▁in(▁isitions▁return다▁safari니▁cond▁if▁other반됩환▁safari이조;및▁all건▁browser모,▁chrome른다든▁the▁and▁it,,)▁(▁area▁offline▁network▁network며local상▁is인이에오▁area▁a서▁local
true
, 가 오프라인 상태일 는.false
참 수할 수 . 참 값이 브라우저가 인터넷에 액세스할 수 있음을 의미한다고 가정할 수 없습니다.컴퓨터에서 가상 이더넷 어댑터가 항상 "연결"되어 있는 가상화 소프트웨어를 실행하는 경우와 같이 잘못된 긍정이 나타날 수 있습니다.따라서 브라우저의 온라인 상태를 확인하려면 추가 확인 방법을 개발해야 합니다.및 하면 Firefox "Internet Explorer"가 됩니다.
false
값. 다른 모든 조건은 a를 반환합니다.true
value.value.value.
if (navigator.onLine) {
alert('online');
} else {
alert('offline');
}
기본 사용 참조
이 작업에는 여러 가지 방법이 있습니다.
- AJAX 요청을 사용자의 웹 사이트로 보냅니다.해당 요청이 실패하면 연결에 문제가 있을 가능성이 높습니다.JQuery 설명서에는 실패한 AJAX 요청 처리에 대한 섹션이 있습니다.이 작업을 수행할 때 동일한 오리진 정책을 주의하십시오. 이 정책은 도메인 외부의 사이트에 액세스하는 것을 방해가 될 수 있습니다.
- 당신은 그것을 넣을 수 있습니다.
onerror
순식간에img
,맘에 들다<img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" />
.
이 방법은 원본 이미지를 이동하거나 이름을 바꾼 경우에도 실패할 수 있으며, 일반적으로 Ajax 옵션보다 낮은 선택사항이 될 수 있습니다.
따라서 이를 탐지하는 데에는 여러 가지 다른 방법이 있지만 완벽한 방법은 없지만 브라우저 샌드박스에서 벗어나 사용자의 네트워크 연결 상태에 직접 액세스할 수 있는 기능이 없는 경우에는 이러한 방법이 가장 적합한 것으로 보입니다.
는 Asolliej를 navigator.onLine
브라우저 속성은 네트워크 요청을 보내는 것보다 선호되며, 따라서 developer.mozilla.org/En/Online_and_offline_events, 에서는 이전 버전의 Firefox 및 IE에서도 지원됩니다.
는 "WHATWG"의 추가를 했습니다.online
그리고.offline
이벤트, 대응이 필요한 경우navigator.onLine
변화들.
Daniel Silveira가 게시한 링크에도 주목하십시오. 이 링크는 서버와 동기화하기 위해 이러한 신호/속성에 의존하는 것이 항상 좋은 생각은 아니라는 점을 지적합니다.
$.ajax()'s를 사용할 수 있습니다.error
요청이 실패할 경우 실행되는 콜백입니다.한다면textStatus
연결이 끊어진 것을 의미하는 문자열 "https"와 같습니다.
function (XMLHttpRequest, textStatus, errorThrown) {
// typically only one of textStatus or errorThrown
// will have info
this; // the options for this ajax request
}
문서에서:
오류: 요청이 실패할 경우 호출할 함수입니다.함수는 세 가지 인수를 전달합니다.XMLHttpRequest 개체, 발생한 오류 유형을 설명하는 문자열 및 발생한 경우 선택적 예외 개체입니다.두 번째 인수(null 이외)에 사용할 수 있는 값은 "시간 초과", "오류", "수정되지 않음" 및 "파서 오류"입니다.이것은 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!');
}
}
});
window.navigator.onLine
당신이 찾는 것이지만, 여기서 몇 가지 추가할 것이 있습니다. 첫째, 앱에서 계속 확인하고 싶은 것이 있다면(예를 들어 사용자가 갑자기 오프라인으로 전환되는지 확인하는 것, 이 경우 대부분 수정 사항, 변경 사항도 확인해야 합니다), 변경 사항을 감지하기 위해 창에 이벤트 청취자를 추가합니다.사용자가 오프라인 상태가 되는지 확인하기 위해 다음 작업을 수행할 수 있습니다.
window.addEventListener("offline",
()=> console.log("No Internet")
);
온라인 상태인지 확인하는 경우:
window.addEventListener("online",
()=> console.log("Connected Internet")
);
HTML5 Application Cache API는 navigator.onLine을 지정하며, 현재 IE8 베타인 WebKit(예:Safari) 야상(Firefox 3에서 이미 지원됨)
저는 학교와 많이 일하는 고객을 위해 웹 앱(잭스 기반)을 만들어야 했습니다. 이 학교들은 종종 인터넷 연결이 좋지 않습니다. 저는 이 간단한 기능을 사용하여 연결이 있는지 여부를 감지하고, 매우 잘 작동합니다!
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는 여전히 온라인 상태임을 의미합니다.
저는 이 질문에 이미 답했다는 것을 알고 있지만 무엇이 더 좋고 무엇이 아닌지를 설명하는 저의 10센트를 추가하고 싶습니다.
Window.Navigator.Online
나는 이 옵션에 대한 일부 답변이 언급되었지만 그들은 주의 사항에 대해 전혀 언급하지 않았습니다.
이 옵션은 대부분의 최신 브라우저에서 사용할 수 있는 브라우저 네비게이터 인터페이스의 속성인 "window.navigator.onLine"을 사용합니다.인터넷 사용 가능 여부를 확인하기 위한 실행 가능한 옵션이 아닙니다. 첫 번째 이유는it is browser centric
두 번째로 그고두번로째리▁and로번.most browsers implement this property differently
.
Firefox의 경우:속성이 다음 값을 사용하여 부울 값을 반환합니다.
true
이라는 의미와 미온인및라의및▁meaning.false
은 "프라인을의여주오점의은할기서미"입니다.the value is only updated when the user follows links or when a script requests a remote page.
따서사가오인상태가되라다고라프반니스됩환항상속속성면이쿼하리성을용서크에트자립함수나▁will▁hence▁always다▁property▁return▁the반니됩▁from환따▁the를 반환합니다.true
사용자가 링크를 추적할 때까지.Chrome 및 Safari의 경우:브라우저가 LAN(Local Area Network) 또는 라우터에 연결할 수 없는 경우 브라우저는 오프라인 상태이며, 다른 모든 조건은 true로 반환됩니다.따라서 잘못된 값을 반환할 때 브라우저가 오프라인 상태라고 가정할 수 있지만, 실제 값이 반드시 브라우저가 인터넷에 액세스할 수 있음을 의미한다고 가정할 수는 없습니다.컴퓨터에서 가상 이더넷 어댑터가 항상 "연결"되어 있는 가상화 소프트웨어를 실행하는 경우와 같이 잘못된 긍정이 나타날 수 있습니다.
위의 설명은 브라우저만으로는 알 수 없다는 것을 알려주기 위한 것입니다.따라서 기본적으로 이 옵션은 신뢰할 수 없습니다.
소유한 서버 리소스로 요청 보내기
This involves making HTTP request to your own server resource and if reachable assume internet availability else the user is offline. There are some few caveats to this option.- 서버 가용성이 100% 신뢰할 수 있는 것은 아니므로 서버에 연결할 수 없는 경우 사용자가 인터넷에 연결되어 있는 동안 오프라인 상태인 것으로 잘못 간주됩니다.
- 동일한 리소스에 대한 여러 요청이 캐시된 응답을 반환하여 http 응답 결과를 신뢰할 수 없게 할 수 있습니다.
서버가 항상 온라인 상태인 경우 이 옵션을 사용할 수 있습니다.
다음은 자체 리소스를 가져오는 간단한 코드 조각입니다.
// This fetches your website's favicon, so replace path with favicon url
// Notice the appended date param which helps prevent browser caching.
fetch('/favicon.ico?d='+Date.now())
.then(response => {
if (!response.ok)
throw new Error('Network response was not ok');
// At this point we can safely assume the user has connection to the internet
console.log("Internet connection available");
})
.catch(error => {
// The resource could not be reached
console.log("No Internet connection", error);
});
타사 서버 리소스로 요청 보내기
We all know CORS is a thing.이 선택사항은 외부 서버 리소스에 HTTP 요청을 수행하고, 연결 가능한 경우 인터넷 가용성을 가정하며, 그렇지 않은 경우 사용자는 오프라인 상태입니다.이에 대한 주요 경고는 제한으로 작용하는 교차 오리진 리소스 공유입니다.대부분의 평판이 좋은 웹사이트는 CORS 요청을 차단하지만 일부 웹사이트는 원하는 대로 할 수 있습니다.
외부 리소스 URL을 사용하여 외부 리소스를 가져오는 간단한 스니펫 아래:
// Firstly you trigger a resource available from a reputable site
// For demo purpose you can use the favicon from MSN website
// Also notice the appended date param which helps skip browser caching.
fetch('https://static-global-s-msn-com.akamaized.net/hp-neu/sc/2b/a5ea21.ico?d='+Date.now())
.then(response => {
// Check if the response is successful
if (!response.ok)
throw new Error('Network response was not ok');
// At this point we can safely say the user has connection to the internet
console.log("Internet available");
})
.catch(error => {
// The resource could not be reached
console.log("No Internet connection", error);
});
마지막으로 개인 프로젝트를 위해 두 번째 옵션을 선택했는데, 이는 자체 서버 리소스를 요청하는 것과 관련이 있습니다. 기본적으로 웹 사이트 컨테이너나 제한된 브라우저 API뿐만 아니라 사용자의 장치에 "인터넷 연결"이 있는지 여부를 알려주는 많은 요소가 있기 때문입니다.
사용자는 일부 웹 사이트나 리소스가 차단되고 금지되며 액세스할 수 없는 환경에 있을 수 있으며, 이는 연결 검사 논리에 영향을 미칠 수 있습니다.최선의 선택은 다음과 같습니다.
- 사용자 환경이므로 사용자 서버의 리소스에 액세스해 보십시오(응답이 매우 가볍고 자주 업데이트되지 않기 때문에 일반적으로 웹 사이트의 즐겨찾기 아이콘을 사용합니다).
- 리소스에 대한 연결이 없는 경우, 많은 요인에 따라 달라지는 광범위한 "인터넷 연결 없음"을 가정하기보다는 사용자에게 알려야 할 때 "연결 오류" 또는 "연결 끊김"이라고만 말하면 됩니다.
저는 그것이 매우 간단한 방법이라고 생각합니다.
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;
몇 가지 방법의 문제는 다음과 같습니다.navigator.onLine
일부 브라우저 및 모바일 버전과 호환되지 않는다는 것입니다. 제게 많은 도움이 된 옵션은 클래식을 사용하는 것이었습니다.XMLHttpRequest
를 예측합니다.XMLHttpRequest.status
304200보다 .
내 코드는 다음과 같습니다.
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 :(');
}
}
}
저는 인터넷이 다운되었는지 서버가 다운되었는지 감지할 수 있는 클라이언트 측 솔루션을 찾고 있었습니다.제가 찾은 다른 솔루션들은 항상 타사 스크립트 파일이나 이미지에 의존하는 것처럼 보였는데, 제가 보기에는 그것이 시간의 테스트를 견뎌낼 수 있을 것 같지 않았습니다.외부 호스트 스크립트 또는 이미지가 나중에 변경되어 탐지 코드가 실패할 수 있습니다.
저는 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)
}
}
});
불투명한 http 요청을 google.com 에 no-packet으로 보내는 것은 어떻습니까?
fetch('https://google.com', {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'no-cors',
}).then((result) => {
console.log(result)
}).catch(e => {
console.error(e)
})
No-cors를 설정한 이유는 PC에서 네트워크 연결을 해제할 때도 Cors 오류가 발생했기 때문입니다.그래서 저는 인터넷 연결 여부와 상관없이 코르스를 차단하고 있었습니다.no-cors를 추가하면 요청이 불투명해져 cors를 우회하는 것처럼 보이고 Google에 연결할 수 있는지 간단히 확인할 수 있습니다.
참고: 저는 http 요청을 하기 위해 여기로 가져오기를 사용합니다.https://www.npmjs.com/package/fetch
나의 방법이다.
<!-- 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
이것이 다면그라면true
되면 가 됩니다.
요청 헤드인 요청 오류
$.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");
}
});
}
});
네트워크가 연결된 경우 true가 반환됩니다.
function isInternetConnected(){return navigator.onLine;}
다음은 제가 가지고 있는 도우미 유틸리티의 일부입니다.다음은 네임스페이스 자바스크립트입니다.
network: function() {
var state = navigator.onLine ? "online" : "offline";
return state;
}
방법 탐지와 함께 사용해야 합니다. 그렇지 않으면 '대체' 방법을 실행해야 합니다.이것이 필요한 모든 것이 될 때가 빠르게 다가오고 있습니다.다른 방법은 해킹입니다.
두 개의 다른 시나리오에 대한 두 가지 답이 있습니다.
웹 사이트에서 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>
그러나 서버 측(예: 노드 등)에서 js를 사용하는 경우, 실패한 XHR 요청을 수행하여 연결이 끊어졌는지 확인할 수 있습니다.
일반적인 접근 방식은 요청을 몇 번 재시도하는 것입니다.연결되지 않으면 연결을 확인하도록 사용자에게 경고하고 정상적으로 실패합니다.
언급URL : https://stackoverflow.com/questions/189430/detect-if-the-internet-connection-is-offline
'programing' 카테고리의 다른 글
Visual Studio에서 NuGet 패키지 복원을 사용하려면 어떻게 해야 합니까? (0) | 2023.06.04 |
---|---|
공용 키를 찾는 방법특정 dll에 대한 토큰? (0) | 2023.05.25 |
MongoDB: 지난 24시간 동안 작성된 문서만 가져오시겠습니까? (0) | 2023.05.25 |
"이 작업을 수행하는 동안 오류가 발생했습니다." (0) | 2023.05.25 |
EC2 서버의 MongoDB 또는 AWS SimpleDB? (0) | 2023.05.25 |