前言
檢查用戶是否在線已逐漸成為應用的基礎功能，因為大多數網站的用戶界面都在不斷地與網絡服務器通信以進行數據傳輸，如果用戶網絡斷開，那么應用程序的功能就會受到影響。
因此，本文將看到一些檢測用戶何時離線以及用戶何時重新在線以在網站上顯示一些消息來通知用戶的方法。
1.瀏覽器對象模型
在瀏覽器對象模型中有 JAVAScript 對象，這些對象在與瀏覽器交互方面很有用，例如 Window 對象、Navigator 對象、Screen 對象、Document 對象等。本文將使用兩個對象，即：Window對象、Navigator對象來判斷用戶是否斷網。
Navigator.onLine 屬性
Navigator 對象用于與瀏覽器進行交互， 可以使用 JavaScript 中的 Navigator 對象獲取有關瀏覽器的所有信息。Navigator 對象的 onLine 屬性可用于檢查瀏覽器是否連接到互聯網。
if (navigator.onLine) {
console.log('在線');
} else {
console.log('離線');
}
該屬性的瀏覽器支持情況如下:
看起來形式一片大好，整體支持率達到了98.79%，即基本所有的瀏覽器都已經支持了該屬性，包括IE9！
Window對象的Connection事件
Javascript為Window對象提供了兩個連接事件，分別是：
- offline：當瀏覽器斷網并且 Navigator.onLine 屬性的值變為 false 時會觸發
- online：當瀏覽器連接網絡并且 Navigator.onLine 屬性的值變為true時觸發
// 離線事件（方式1）
window.addEventListener('offline', (event) => {
console.log("The.NETwork connection has been lost.");
});
// 離線事件（方式2）
window.onoffline = (event) => {
console.log("The network connection has been lost.");
};
除了這兩個事件之外，還將使用 Window 對象的load事件，該事件在瀏覽器窗口完全加載時觸發。
2.檢查用戶是否離線/在線示例
使用 Navigator.onLine 屬性來檢查用戶是否在線，在 JavaScript 中定義事件處理函數來處理 Window 對象的離線和在線事件，以監控用戶是否斷網。
<!doctype html>
<head>
<style>
body {
padding:10px;
font-family:arial;
font-size:1.2em;
}
.error {
background-color:#ff5252;
color:white;
padding:10px;
border-radius:5px;
margin-top:10px;
}
.success {
background-color:#00e676;
color:white;
padding:10px;
border-radius:5px;
margin-top:10px;
}
</style>
<title>判斷用戶在線或者離線</title>
</head>
<body>
<h2>Welcome to Studytonight!</h2>
<p>This is a simple code example to show you how to find when a user goes offline and when the user comes back online to show some messages to the user when this hAppens.</p>
<div id="status"></div>
<script>
let status = document.getElementById("status");
// 監聽load事件
window.addEventListener('load', function(e) {
if (navigator.onLine) {
status.innerHTML = "User is online";
status.classList.add("success");
} else {
status.innerHTML = "User is offline";
status.classList.remove("success");
status.classList.add("error");
}
}, false);
// 監聽online事件
window.addEventListener('online', function(e) {
status.innerHTML = "User is back online";
status.classList.remove("error");
status.classList.add("success");
}, false);
// 監聽offline事件
window.addEventListener('offline', function(e) {
status.innerHTML = "User went offline";
status.classList.remove("success");
status.classList.add("error");
}, false);
</script>
</body>
</html>
3.部分瀏覽器hack
值得注意的是，window.navigator.onLine 屬性及其相關事件目前在某些 Web 瀏覽器（尤其是 Firefox 桌面）上不可靠，下面使用jQuery定期檢查網絡連接狀態。
// Global variable somewhere in your app to replicate the
// window.navigator.onLine variable (this last is not modifiable). It prevents
// the offline and online events to be triggered if the network
// connectivity is not changed
var IS_ONLINE = true;
function checkNetwork() {
$.ajax({
// Empty file in the root of your public vhost
url: '/networkcheck.txt',
// We don't need to fetch the content (I think this can lower
// the server's resources needed to send the HTTP response a bit)
type: 'HEAD',
cache: false,
// Needed for HEAD HTTP requests
timeout: 2000,
// 2 seconds
success: function() {
if (!IS_ONLINE) { // If we were offline
IS_ONLINE = true; // We are now online
$(window).trigger('online'); // Raise the online event
}
},
error: function(jqXHR) {
if (jqXHR.status == 0 && IS_ONLINE) {
// We were online and there is no more network connection
IS_ONLINE = false; // We are now offline
$(window).trigger('offline'); // Raise the offline event
} else if (jqXHR.status != 0 && !IS_ONLINE) {
// All other errors (404, 500, etc) means that the server responded,
// which means that there are network connectivity
IS_ONLINE = true; // We are now online
$(window).trigger('online'); // Raise the online event
}
}
});
}
可以通過如下方式進行調用:
// Hack to use the checkNetwork() function only on Firefox
// (http://stackoverflow.com/questions/5698810/detect-firefox-browser-with-jquery/9238538#9238538)
// (But it may be too restrictive regarding other browser
// who does not properly support online / offline events)
if (!(window.mozInnerScreenX == null)) {
window.setInterval(checkNetwork, 30000); // Check the network every 30 seconds
}
使用jQuery監聽連接、斷開連接事件:
$(window).bind('online offline', function(e) {
if (!IS_ONLINE || !window.navigator.onLine) {
alert('We have a situation here');
} else {
alert('Battlestation connected');
}
});
4.本文總結
本文主要和大家介紹如何使用JavaScript檢測用戶是否在線，主要是通過window.navigator.onLine屬性和window的online/offline完成。文末的參考資料提供了優秀文檔以供學習，如果有興趣可以自行閱讀。如果大家有什么疑問歡迎在評論區留言。
參考資料
https://www.studytonight.com/post/check-if-user-is-offline-online-in-javascript
https://daily-dev-tips.com/posts/detecting-if-the-user-is-online-with-javascript/
https://medium.com/@codebubb/how-to-detect-if-a-user-is-online-offline-with-javascript-b508fc595f2
https://stackoverflow.com/questions/3181080/how-to-detect-online-offline-event-cross-browser
封面圖：來自iamabhishek的文章，鏈接為：
https://www.studytonight.com/post/check-if-user-is-offline-online-in-javascript
