چک کردن وضعیت اینترنت کاربر در جاوا اسکریپت

توی این مقاله قصد دارم درباره نحوه چک کردن لحظه ای وصل بودن یا نبودن کاربر به اینترنت تو زمانی که وارد سایت ما شده با هم مرور کنیم.خیلی وقتا پیش اومده،کاربر به سایت ما اومده و اینترنتش یه دفعه قطع شده، این وسط کاربر متوجه نشده و request خودش به سایت ما تحویل داده! کاربر از همه جا بی خبر هم فکر میکنه سایت ما مشکل داره :)) این وسط وظیفه برنامه نویس هستش تا با چک کردن وضعیت اینترنت کاربرش بهش پیام بده که " اینترنت شما قطع می باشد ... ". توی این مقاله تلاش میکنم با چند تا کد ساده این قضیه تو جاوا اسکریپت حل کنم.

اول از همه سراغ کدهای جاوا اسکریپت میرم

window.addEventListener('load', () => { 
 if (navigator.onLine) { showOnlineStatus(true); } 
 window.addEventListener('online', () => { showOnlineStatus(true);  
 window.addEventListener('offline', () => { showOnlineStatus(false); });
});

همین جوری که توی کد بالا می بینید من اومدم به کمک addEventListener و همینطور دستور navigator وضعیت onLine بودن یا offline سیستم کاربر چک میکنم. بعد در صورت وصل بودن یا نبودنش یه متد که نوشته شده به نام showOnlineStatus با یه مقدار boolean صدا میزنم قرار بیاد یه پیامی به کاربر نشون بده.

به همین سادگی با چند خط کد توی جاوا اسکریپت اومدیم و قطع و وصل بدن اینترنت به کاربرمون اطلاع دادیم.

اینم نمونه کامل این کد:

<html>
<head>
 <title>hi</title>
 <style>
 #network-status-online {
 background: green;
padding: 15px;
border-radius: 5px;
color: white;
}
#network-status-offline {
background: red;
padding: 15px;
border-radius: 5px;
color: white;
}
.no-network {
font-weight: bold;
color: red;
}
.available-network {
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<div>
 <div id=&quotnetwork-status-online&quot></div>
 <div id=&quotnetwork-status-offline&quot></div> 
 <h1>Oops, the internet went out.</h1><p>How would you tell your user their internet connection is down but your site is working fine?</p>
 <p id='network-status-text'>Try switching off your wifi or mobile internet to see a <span class='no-network'>No network connection</span> message.</p>
</div>
</body>

function showOnlineStatus(isOnline, msg) {
const networkStatusOnline = document.getElementById('network-status-online');
const networkStatusOffline = document.getElementById('network-status-offline');
 const networkStatusText = document.getElementById('network-status-text');
 if (isOnline) {
 networkStatusOffline.style.display = &quotnone&quot
 networkStatusOnline.style.display = &quotinline-block&quot
 networkStatusOnline.innerText = msg;
networkStatusText = &quotTry switching off your wifi or mobile internet to see a <span class='no-network'>no network connection</span> message.&quot} 
else {
networkStatusOnline.style.display = &quotnone&quot
networkStatusOffline.style.display = &quotinline-block&quot
networkStatusOffline.innerText = msg;
networkStatusText = &quotTry switching on your wifi or mobile internet to see a <span class='available-network'>Back Online</span> message.&quot
}
}
window.addEventListener('load', () => {
if (navigator.onLine) {
showOnlineStatus(true, &quotYou're online! ?&quot);}
 else {
 showOnlineStatus(false, &quotYou might be offline, please check your internet connection! ☹️&quot);}
 window.addEventListener('online', () => {
 showOnlineStatus(true, &quotYou are back online! ?&quot);
});
window.addEventListener('offline', () => {
showOnlineStatus(false, &quotYou might be offline, please check your internet connection! ☹️&quot);
});
});

</html>



امیدوارم از این مقاله استفاده کامل برده باشید.

ممنون از توجهتون :)