인터넷 연결이 오프라인 상태임을 감지하시겠습니까?
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에서 인용한 내용은 다음과 같습니다.
Safari에서는 네트워크) 또는 에 접속할 수 없는 경우 모든 은 Chrome "Safari "를 반환합니다.하다
true따라서 값을 반환할 때 브라우저가 오프라인 상태라고 가정할 수 있지만 값이 반드시 브라우저가 인터넷에 액세스할 수 있음을 의미한다고 가정할 수는 없습니다.컴퓨터에서 가상 이더넷 어댑터가 항상 "연결"되어 있는 가상화 소프트웨어를 실행하고 있는 경우 등 잘못된 긍정 결과가 나타날 수 있습니다.따라서 브라우저의 온라인 상태를 확인하려면 다른 확인 방법을 개발해야 합니다.를 오프라인 하면 Firefox Internet Explorer가 됩니다.
false은 Firefox 41을 합니다.true파이어폭스 41부터 OS X 및 Windows에서는 실제 네트워크 접속에 따라 값이 달라집니다.
(그건 내꺼야)
, ,, 약의 window.navigator.onLinefalse (가)offline이벤트)는 인터넷 연결이 없음을 보증합니다.
true ( ' ' (')가 .onlineevent이 어떤되어 있다는 event).예를 들어 인터넷에 접속할 수 있는 것은 아닙니다.이를 확인하려면 다른 답변에 설명된 솔루션 중 하나를 사용해야 합니다.
당초 그랜트 바그너의 답변에 대한 업데이트로 게시할 생각이었지만, 특히 2014년 업데이트는 이미 그에게서 온 것이 아니라는 점을 고려하면 편집이 너무 심했던 것 같습니다.
실패한 XHR 요청을 만들면 연결이 끊겼는지 확인할 수 있습니다.
표준 접근법은 요청을 여러 번 재시도하는 것입니다.연결이 되지 않으면 연결을 확인하도록 사용자에게 경고하고 정상적으로 실패합니다.
사이드노트:애플리케이션 전체를 「오프라인」상태로 하면, 에러가 발생하기 쉬운 처리 상태의 작업이 많아집니다.무선 접속이 오갈 수 있습니다.따라서 가장 좋은 방법은 정상적으로 장애가 발생하여 데이터를 보존하고 사용자에게 경고하는 것입니다.접속에 문제가 있는 경우는, 최종적으로 수정해, 앱을 계속 사용할 수 있도록 하고 있습니다.
사이드노트:Google과 같은 신뢰할 수 있는 사이트에서 접속성을 확인할 수 있지만, Google은 사용할 수 있지만, 자신의 어플리케이션은 사용할 수 없고, 접속에 관한 문제도 해결해야 하기 때문에, 이 방법은 자신의 요구에 따라서는 전혀 도움이 되지 않을 수 있습니다.구글에 PING을 보내는 것은 인터넷 접속 자체가 다운되었음을 확인할 수 있는 좋은 방법이 될 것입니다.따라서 이 정보가 당신에게 도움이 된다면 수고할 가치가 있을 것입니다.
사이드노트:ping을 송신하는 것은 어떤 종류의 쌍방향 아약스 요구와 같은 방법으로 실시할 수 있지만, 이 경우 구글에 ping을 송신하는 것은 몇 가지 과제가 됩니다.첫째, Ajax 통신에서 일반적으로 발생하는 교차 도메인 문제와 동일합니다.서버측 프록시를 셋업하는 방법도 있습니다.ping구글(또는 임의의 사이트)에서 ping 결과를 앱에 반환합니다.인터넷 접속에 실제로 문제가 있는 경우 서버에 접속할 수 없고, 자신의 도메인에만 접속 문제가 있는 경우 차이를 구별할 수 없기 때문에 이것은 매우 중요합니다.예를 들어 페이지에 iframe을 삽입하여 iframe을 폴링하여 성공/실패 여부를 확인하는 등 다른 크로스 도메인 기법을 시도할 수 있습니다.이미지를 삽입하는 것은 실제로 우리에게 아무것도 말해주지 않을 수도 있다.왜냐하면 우리는 무슨 일이 일어나고 있는지에 대해 좋은 결론을 도출하기 위해 의사소통 메커니즘의 유용한 응답이 필요하기 때문이다.따라서 인터넷 연결 상태를 전체적으로 파악하는 것은 가치보다 더 큰 문제가 될 수 있습니다.특정 앱에 대해 이러한 옵션을 고려해야 합니다.
IE 8은 window.navigator.onLine 속성을 지원합니다.
하지만 다른 브라우저나 운영체제에서는 물론 도움이 되지 않습니다.Ajax 어플리케이션에서 온라인/오프라인 상태를 파악하는 것이 중요하기 때문에 다른 브라우저 벤더들도 해당 속성을 제공할 것으로 예상됩니다.
"XHR" RHR "1" 중 하나입니다.Image() ★★★★★★★★★★★★★★★★★」<img>할 수 있습니다.request.
갱신(2014/11/16)
현재 주요 브라우저는 이 속성을 지원하지만 결과는 다릅니다.
Mozilla 문서에서 인용:
Safari에서는 네트워크) 또는 에 접속할 수 없는 경우 모든 은 Chrome "Safari "를 반환합니다.하다
true할 수 는 오프라인 상태로false값은 브라우저가 인터넷에 접속할 수 있음을 의미한다고 가정할 수 없습니다.컴퓨터에서 가상 이더넷 어댑터가 항상 "연결"되어 있는 가상화 소프트웨어를 실행하고 있는 경우 등 잘못된 긍정 결과가 나타날 수 있습니다.따라서 브라우저의 온라인 상태를 확인하려면 다른 확인 방법을 개발해야 합니다.를 오프라인 하면 Firefox Internet Explorer가 됩니다.
false다른 은 a.를 반환한다.truediscloss.discloss 。
if(navigator.onLine){
alert('online');
} else {
alert('offline');
}
여기에는 여러 가지 방법이 있습니다.
- AJAX는 당신의 웹사이트에 요청한다.그 요구가 실패하면 접속 장애일 가능성이 높아집니다.JQuery 문서에는 실패한 AJAX 요청 처리에 대한 섹션이 있습니다.이 작업을 수행할 때 동일한 오리진 정책에 주의하십시오. 이로 인해 도메인 외부의 사이트에 액세스할 수 없게 될 수 있습니다.
onerroranimg,맘에 들다<img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" />.
소스 이미지를 이동하거나 이름을 바꾼 경우에도 이 방법은 실패할 수 있으며 일반적으로 ajax 옵션보다 낮은 선택입니다.
이를 검출하는 방법은 여러 가지가 있지만 완벽하지는 않지만 브라우저 샌드박스에서 점프하여 사용자의 네트워크 연결 상태에 직접 액세스할 수 없는 경우에는 최적의 옵션인 것 같습니다.
올리즈가 말했듯이navigator.onLine브라우저 속성은 네트워크 요청을 보내는 것보다 선호되므로 developer.mozilla.org/En/Online_and_offline_events,에서는 이전 버전의 Firefox 및 IE에서도 지원됩니다.
는 WHATWG의 했습니다.online ★★★★★★★★★★★★★★★★★」offline에 가 있는 )navigator.onLine★★★★★★★★★★★★★★★★★★.
또한 Daniel Silveira가 게시한 링크에 주목하여 서버와의 동기화를 위해 이러한 신호/속성에 의존하는 것이 항상 좋은 생각은 아니라는 점을 지적합니다.
$.ajax()를 사용할 수 있습니다.error콜백: 요구가 실패했을 때 기동됩니다. iftextStatus끊겼다는 수 있습니다. "접속"은 "을 의미합니다.이것은 아마 연결이 끊겼다는 것을 의미합니다.
function (XMLHttpRequest, textStatus, errorThrown) {
// typically only one of textStatus or errorThrown
// will have info
this; // the options for this ajax request
}
문서에서:
오류: 요청이 실패하면 호출되는 함수입니다.함수에는 다음 3가지 인수가 전달됩니다.XMLHttpRequest 개체. 발생한 오류 유형을 설명하는 문자열 및 발생한 경우 옵션 예외 개체입니다.두 번째 인수(null 제외)에 사용할 수 있는 값은 "timeout", "error", "not modified" 및 "parserror"입니다.이것은 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에서 이미 지원되고 있습니다.
학교에서 많이 일하는 고객을 위해 웹 앱(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는 사용자가 온라인 상태임을 의미합니다.
나는 이 질문에 이미 답한 것을 알지만 무엇이 더 좋고 무엇이 더 좋지 않은지 설명하는 나의 10센트를 추가하고 싶다.
Window.Navigator.OnLine
몇 가지 답변이 이 옵션에 대해 언급하고 있는 것을 알 수 있었습니다만, 경고에 대해서는 일절 언급하지 않았습니다.
이 옵션은 대부분의 최신 브라우저에서 사용할 수 있는 브라우저 탐색기 인터페이스의 속성인 "window.navigator.onLine"을 사용해야 합니다.이것은 인터넷 사용 가능 여부를 확인하는 실행 가능한 옵션이 아닙니다.첫 번째 이유는it is browser centric 두 번째는 '이렇게'most browsers implement this property differently.
Firefox의 경우:속성은 부울 값을 반환합니다.
true및 '온라인'을 합니다.false할 점은 '오프라인이라는 것입니다.the value is only updated when the user follows links or when a script requests a remote page.스크립트에서 js를 반환합니다.true사용자가 링크를 팔로우할 때까지.Chrome 및 Safari의 경우:브라우저가 Local Area Network(LAN; 로컬지역 네트워크) 또는 라우터에 접속할 수 없는 경우, 브라우저는 오프라인이며, 그 외의 모든 조건은 true가 반환됩니다.따라서 false 값을 반환할 때 브라우저가 오프라인 상태라고 가정할 수 있지만 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에서 사용자의 기기에 "인터넷 연결"이 있는지 여부를 판단할 수 있는 요소가 많기 때문에 서버 리소스를 요청하는 두 번째 옵션을 선택했습니다.
또, 유저는, 일부의 Web 사이트나 리소스가 차단, 금지, 및 액세스 할 수 없는 환경에 있는 경우도 있습니다.이러한 환경은 접속성 체크의 논리에 영향을 미칩니다.최선의 방법은 다음과 같습니다.
- 사용자 환경이기 때문에 자신의 서버상의 리소스에 액세스 해 주세요(응답이 매우 가볍고 자주 업데이트되지 않기 때문에 일반적으로 웹 사이트의 favicon을 사용합니다).
- 리소스에 대한 연결이 없는 경우 사용자에게 알릴 때 "연결 오류" 또는 "연결 끊김"이라고만 말하면 됩니다. 여러 요인에 따라 광범위한 "인터넷 연결 없음"을 가정하지 마십시오.
매우 간단한 방법이라고 생각합니다.
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.status200보다 .
코드는 다음과 같습니다.
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 :(');
}
}
}
불투명한 http 요청을 no-module로 google.com로 전송하면 어떨까요?
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>
인터넷이 다운되었는지 서버가 다운되었는지 여부를 검출하기 위해 클라이언트 측 솔루션을 찾고 있었습니다.제가 찾은 다른 솔루션은 항상 서드파티 스크립트 파일이나 이미지에 의존하고 있는 것 같았습니다.그것은 시간의 테스트를 견딜 수 있을 것 같지 않았습니다.나중에 외부 호스트 스크립트 또는 이미지가 변경되어 탐지 코드가 실패할 수 있습니다.
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)
}
}
});
request head in request 오류
$.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");
}
});
}
});
쓰세요.navigator.onLine이 라이라면true온라인 그렇지 않으면 상태가 됩니다.
네트워크가 연결되어 있으면 true가 반환됩니다.
function isInternetConnected(){return navigator.onLine;}
다음은 도우미 유틸리티의 일부입니다.이것은 javascript의 이름을 붙인 것입니다.
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-the-internet-connection-is-offline
'programing' 카테고리의 다른 글
| 호스트 경로 볼륨이 있는 kubernetes 포드 내에서 mariadb가 크래시함 (0) | 2022.11.02 |
|---|---|
| 두 개의 외부 키가 동시에 NULL이 되지 않도록 합니다. (0) | 2022.11.02 |
| MariaDB가 시스템 표준 시간대를 선택하도록 하려면 어떻게 해야 합니까? (0) | 2022.11.02 |
| 열 이름을 가져오기 위한 MySQL 쿼리입니까? (0) | 2022.11.02 |
| 다차원 배열에서 단일 열 반환 (0) | 2022.11.02 |