javascript 인터넷 연결상태 확인

구글에서 인터넷 연결 관련 문서를 찾아보면 제일 우선 navigator.isOnline 이 나온다. 

근데 와이파이를 끊어봐도, 인터넷 연결을 끊어도

프로젝트에서 인터넷 연결은 항상 true를 반환한다. 

브라우저의 인터넷 연결 속성이라는데 

재대로 작동하지 않는다. 

 

node에서 사용한 dns 방법을 이용해 javascript에도 유사한 방법으로 접근해 

인터넷 연결을 확인하고자 한다. 

        async isNetworkConnection() {
            console.log('check network connection')
            if (!window.navigator.onLine) return false

            const url = new URL("https://www.google.com")

            try {
                const response = await fetch(
                    url.toString(),
                    { 
                    	method: 'HEAD',
                        mode: 'no-cors'
                    },
                )

                return response.ok
            } catch {
                return false
            }
        }

 

근데 원래는 저 url 대신에 $axios를 통해서 내부 서버로 전송해 확인했는데 

이걸 interval로 1분마다 체크 하면 나중에 트래픽 비용도 많이 발생하고 이것저것 사이드 이팩트가 생길거 같으니 

구글님의 힘을 빌려 검사해 인터넷을 확인했다.

 

p.s.) 실제 배포 프로젝트에서는 cors 가 걸려서 안될수도 있다. 그런경우에는 직접 사용하는 서버 주소로 사용하는게 옳다.