많은 시나리오에서 웹 애플리케이션은 컴퓨터가 인터넷에 연결된 후에만 시작할 수 있습니다. 인터넷에 연결되어 있지 않으면 오류 메시지가 표시됩니다. ,
하지만 가끔 컴퓨터를 다시 시작해야 할 때도 있습니다. 기기를 다시 시작한 후 바로 웹 애플리케이션을 시작하면 기기의 네트워크 서비스가 아직 준비되지 않았을 수 있습니다.
특히 Windows 7에서는 네트워크 서비스를 시작하는 데 몇 초가 걸립니다. 이때 어떻게 해야 하나요?
이전에 여러 가지 방법을 시도해 보았습니다.
예를 들어 ping으로 판단하는데 ping에는 로컬이 아닌 IP 주소가 필요합니다. 이는 그다지 일반적인 것은 아닙니다
예를 들어 특정 포트가 점유되어 있는지 모니터링하지만 광 포트가 점유되어 있다고 해서 네트워크가 시작된 것은 아닙니다.
반면 웹 애플리케이션이라면 자바스크립트를 사용하는 등 프런트 엔드에서 판단하는 것이 가장 좋습니다.
인터넷에는 핑 효과를 시뮬레이션하기 위해 자바스크립트를 작성하는 사람들도 있습니다. 하지만 약간의 문제가 있습니다.
어떻게 해야 할까요? 중요한 상황이 발생하면 HTML5가 좋은 솔루션을 제공할 수 있습니다.
방법 1:
navigator.onLine
if (navigator.onLine)
{ //정상적으로 작동합니다.}
else { //오프라인 상태에서 작업 수행}
HTML5 내비게이터의 이 새로운 기능은 이를 쉽게 수행하는 데 도움이 됩니다.
HTML5는 이에 대한 navigator.onLine 속성을 정의하며, 이 속성은 true 장치가 인터넷에 액세스할 수 있음을 나타냅니다. false 값은 장치가 오프라인 상태임을 나타냅니다.
물론 브라우저마다 이에 대한 지원이 다릅니다.
IE6 및 Safari 5가 더 잘 지원합니다.
Firefox 3은 navigator.onLine 속성을 지원하지만 "파일-웹 개발자(설정)" 메뉴 항목을 수동으로 선택해야 합니다. ) - 오프라인으로 작업"을 선택하면 브라우저가 제대로 작동합니다.
Chrome에는 12 이상이 필요합니다.
방법 2: 물론, 더 많은 호환성을 지원하고 싶다면 온라인과 오프라인 두 가지 이벤트를 활용하면 됩니다. 이 두 이벤트는 네트워크가 오프라인에서 온라인으로 또는 온라인에서 오프라인으로 변경될 때 각각 트리거됩니다. 이 두 이벤트는 창 개체에서 트리거됩니다.
애플리케이션이 오프라인인지 확인하려면 페이지가 로드된 후 navigator.onLine을 통해 초기 상태를 얻는 것이 가장 좋습니다. 그런 다음 위의 두 이벤트를 사용하여 네트워크 연결 상태가 변경되는지 확인합니다. 위 이벤트가 발생하면 navigator.onLine 속성 값도 변경되지만, 네트워크 상태 변화를 감지하려면 이 속성을 수동으로 폴링해야 합니다.
var EventUtil = {
addHandler: function (element , type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false)
} else if (element.attachEvent) {
element. attachmentEvent("on" 유형, 핸들러)
} else {
element["on" 유형] = handler
}
}
EventUtil.addHandler(window) , "온라인", function () {
alert("온라인");
})
EventUtil.addHandler(window, "offline", function () {
alert("오프라인" );
})
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
