VanillaJS로 가벼운 인터넷 감지 기능 구축
Github의 전체 코드Here .
원래 게시일: my blog .
저는 최근에 서아프리카의 특정 지역에 있는 고객이 주로 사용하는 애플리케이션 작업을 했습니다. 앱을 베타 테스트하는 동안 제대로 작동하지 않는다는 몇 가지 불만을 접수했습니다. 추가 조사 후 제기된 문제의 대부분이 인터넷 연결 실패 또는 불량으로 인한 것임을 확인했습니다. 소프트웨어의 원활한 작동은 주로 안정적인 인터넷에 달려 있습니다.
따라서 자동 저장 또는 임시 저장과 같은 보다 강력한 기능을 구축하기 전에 인터넷 연결을 확인하고 불량/복원 시 사용자에게 알리는 경량 인터넷 감지 기능을 구현하는 임무를 맡았습니다. 주요 요구 사항은 다음과 같습니다.
앱의 뷰가 실행되면 먼저 실행되는 VanillaJS를 사용하기로 결정했습니다. 원격 서버의 파일을 ping하고 응답 HTTP 상태를 확인합니다. 성공하지 못한 경우, 즉 HTTP 상태 코드 >= 200 & < 304. reference here 사용자에게 알리고 확인하는 동안 몇 가지 조언을 제공합니다. 결국 인터넷 연결이 복원되면 응용 프로그램은 이를 사용자에게 알립니다.
핵심 기능은 다음과 같습니다.
var wasInternetConnectionBad = ''; //used to show restored internet notification only once
var internetCheckActions = function() {
var xhr = new XMLHttpRequest();
var file = "/img/nKekEaz4i6jeRtvxZRnY.jpg"; // the remote file to check for. You should replace this with yours
var randomNum = Math.round(Math.random() * 10000); //initiating a random value to revv the file
xhr.open('HEAD', file + "?rand=" + randomNum, true);
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
function processRequest(e) {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 304) {
if (wasInternetConnectionBad == "1") {
// Internet connection is GOOD. Do what ever you like here
}
wasInternetConnectionBad = ''; //Clear flag
} else {
// Internet connection is BAD. Do what ever you like here
wasInternetConnectionBad = '1';
}
}
}
}
DOM 콘텐츠가 로드될 때와 이후 5초마다 함수를 호출하기로 결정했습니다. 이건 기분대로 바꿔도 돼
// Invoke when DOM content has loaded
document.addEventListener('DOMContentLoaded', function () {
internetCheckActions();
});
//& every subsequent 5 seconds
var checkInternetConnection = function() {
setInterval(function () {
internetCheckActions();
}, 5000);
}
checkInternetConnection();
위의 코드는 기본적으로 필요한 것입니다. 여기에서 끝내거나 보다 완전한 솔루션을 계속 볼 수 있습니다.
다음 단계는 사용자에게 사물의 상태를 좋은 방식으로 알리는 방법을 알아내는 것이었습니다. 이것은 내가 일반적으로 멋진 Jquery 알림 플러그인을 호출하는 곳이지만 우리는 그렇게 할 수 없습니다. 그래서 아주 가볍고 확장 가능한 알림 위젯을 만들었습니다. 멋진 점은 다른 유틸리티 기능에서 사용할 수 있다는 것입니다.
먼저 알림에 대한 HTML 마크업을 생성해 보겠습니다. 이상적으로 이것은 BODY 태그의 첫 번째 자식으로 삽입되어야 하며 결정된 호스팅 요소의 형제는 페이지 콘텐츠여야 합니다.
<img src="https://cdnjs.cloudflare.com/ajax/libs/slippry/1.4.0/images/sy-loader.gif" width="1" height="1"
style="position:absolute; z-index:-2;"> <!-- Attepmting to preload an animated loader image which will be used later. NOTE, different browser behave differently -->
<div class="rawNotificationArea" id="rawNotificationArea">
<div class="notification_message"></div>
</div>
그런 다음 이 CSS 스니펫 인라인을 head 태그에 추가하여 알림 위젯의 스타일을 지정합니다.
<style>
.rawNotificationArea {
position: fixed;
top: 2px;
left: 0;
width: 100%;
text-align: center;
padding: 10px 0;
display: none;
z-index: 99999999;
}
.rawNotificationArea .notification_message {
max-width: 50%;
border: solid thin #888888;
color: #333;
background-color: #DCDCDC;
text-align: center;
padding: 5px 15px;
border-radius: 4px;
box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.17);
display: inline-block;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
}
.rawNotificationArea .notification_message.warning {
background-color: #fcf8e3;
border-color: #faf2cc;
color: #8a6d3b;
}
.rawNotificationArea .notification_message.success {
background-color: #dff0d8;
border-color: #d0e9c6;
color: #3c763d;
}
.rawNotificationArea .notification_message.info {
background-color: #d9edf7;
border-color: #bcdff1;
color: #31708f;
}
.rawNotificationArea .notification_message.danger, .rawNotificationArea .notification_message.error {
background-color: #f2dede;
border-color: #ebcccc;
color: #a94442;
}
</style>
그리고 위젯용 JS.
// Notification Widget
var nativeNotification = {
fadeEl: function() {
return (document.getElementById('content_body'));
},
messageHolder: function() {
return (document.getElementById('rawNotificationArea'));
},
contentFade: function() {
this.fadeEl().style.opacity = "0.5";
},
contentUnfade: function() {
this.fadeEl().style.opacity = "1.0";
},
notify: function(message, tone) {
this.messageHolder().innerHTML = '<span class="notification_message ' + tone + '">' + message + '</span>';
this.messageHolder().style.display = "block";
},
unotify: function() {
while (this.messageHolder().firstChild) {
this.messageHolder().removeChild(this.messageHolder().firstChild);
}
},
timedUnotify: function(time) {
setTimeout(function() {
nativeNotification.unotify();
}, time);
}
};
그래서 우리의 핵심 기능에서 이것을 사용하면 마침내 다음과 같은 것을 갖게 될 것입니다.
//Detect internet status amd motify user
var wasInternetConnectionBad = ''; //used to show restored internet notification only once
var internetCheckActions = function() {
var xhr = new XMLHttpRequest();
var file = "/img/nKekEaz4i6jeRtvxZRnY.jpg"; // the remote file to check for. You should replace this with yours
var randomNum = Math.round(Math.random() * 10000); //initiating a random value to revv the file
xhr.open('HEAD', file + "?rand=" + randomNum, true);
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
function processRequest(e) {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 304) {
if (wasInternetConnectionBad == "1") {
nativeNotification.contentUnfade();
nativeNotification.notify("Your internet connection has been restored", 'info');
nativeNotification.timedUnotify(5000);
}
wasInternetConnectionBad = '';
} else {
nativeNotification.contentFade();
nativeNotification.notify("We've detected a problem with your internet connection.\n Some functions may not work as expected<div><strong>Retrying <img src='https://cdnjs.cloudflare.com/ajax/libs/slippry/1.4.0/images/sy-loader.gif' width='20' height='20'></strong></div>", 'warning');
wasInternetConnectionBad = '1';
}
}
}
}
라이브 데모 보기Here .
Github의 전체 코드Here .
추신
*- 사용하기 쉬운 JS 플러그인으로 빌드
*- 연결을 확인하는 데 사용되는 파일을 재생하는 다른 방법을 실험하십시오. 현재 파일은 쿼리 문자열을 사용하여 개정되고 있습니다. 이에 대해 자세히 알아보기here
Reference
이 문제에 관하여(VanillaJS로 가벼운 인터넷 감지 기능 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ojanti/build-a-lightweight-internet-detect-feature-with-vanillajs--2jep텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
