网站首页 > 基础教程正文

JavaScript检测用户是否在线! js判断用户是否登录

ccvgpt 2024-12-17 11:56:23 基础教程 2 ℃

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

前言

检查用户是否在线已逐渐成为应用的基础功能，因为大多数网站的用户界面都在不断地与网络服务器通信以进行数据传输，如果用户网络断开，那么应用程序的功能就会受到影响。

因此，本文将看到一些检测用户何时离线以及用户何时重新在线以在网站上显示一些消息来通知用户的方法。

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

上一篇：深入了解EL表达式什么是el表达式
下一篇： electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天

网站首页 > 基础教程 正文

JavaScript检测用户是否在线! js判断用户是否登录

前言

1.浏览器对象模型

Navigator.onLine 属性

Window对象的Connection事件

2.检查用户是否离线/在线示例

3.部分浏览器hack

4.本文总结

参考资料

猜你喜欢

网站首页 > 基础教程正文