如何使用javascript或任何库检查用户是否在线？

我需要一些帮助，如何使用Javascript或jQuery或任何库（如果可用）检查互联网连接。 因为我正在开发一个离线应用程序，我希望在用户离线时显示一个版本，如果用户在线则显示另一个版本。

目前我正在使用此代码：

if (navigator.onLine) { alert('online'); } else { alert('offline'); } 

但这种方法检测起来很慢。 有时它只是连接到没有互联网的网络，需要5到10秒才能提醒false （没有互联网）。

我看了一下Offline.js库，但我不确定这个库在我的情况下是否有用。 我不知道如何使用它

Answer 1

我认为你应该尝试OFFLINE.js ..它看起来很容易使用，只是尝试一下。

它甚至提供了checkOnLoad选项，它在页面加载时立即检查连接。

Offline.check（）：检查连接的当前状态。

Offline.state：连接“up”或“down”的当前状态

没有尝试过，很高兴知道它是否按预期工作。

EDIT在代码中占了一席之地 ，它使用的方法是在这个问题中提出的FAILED XHR REQUEST

Answer 2

我刚从Mozilla站点获得了一些代码function：

 window.addEventListener('load', function(e) { if (navigator.onLine) { console.log('We\'re online!'); } else { console.log('We\'re offline...'); } }, false); window.addEventListener('online', function(e) { console.log('And we\'re back :).'); }, false); window.addEventListener('offline', function(e) { console.log('Connection is down.'); }, false); 

他们甚至有一个链接，看它工作 。 我在IE，Firefox和Chrome中尝试过它。 Chrome看起来最慢，但只有半秒左右。

Answer 3

看看检测到Internet连接是否脱机？ 基本上，对你知道的东西（比如google.com）提出ajax请求，如果失败，就没有互联网连接。

Answer 4

navigator.onLine是一个维护true / false值的属性（对于在线为true，对于离线为false）。 只要用户切换到“离线模式”，此属性就会更新。

 window.addEventListener('load', function() { function updateOnlineStatus(event) { document.body.setAttribute("data-online", navigator.onLine); } updateOnlineStatus(); window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); }); 

Answer 5

尝试使用WebRTC ，请参阅diafygi / webrtc-ips ; 部分

此外，这些STUN请求是在正常的XMLHttpRequest过程之外进行的，因此它们在开发人员控制台中不可见，或者能够被AdBlockPlus或Ghostery等插件阻止。 如果广告商设置具有通配符域的STUN服务器，则这使得这些类型的请求可用于在线跟踪。

---

最低限度修改以在console上记录“在线”或“离线”

 // https://github.com/diafygi/webrtc-ips function online(callback){ //compatibility for firefox and chrome var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var useWebKit = !!window.webkitRTCPeerConnection; //bypass naive webrtc blocking using an iframe if(!RTCPeerConnection) { //NOTE: you need to have an iframe in the page // right above the script tag // // // 

Answer 6

我的解决方案是获取一个非常小的图像 （1×1）， 而不是缓存并始终在线上 。

---

笔记：

• 使用jQuery的本地副本 ，否则它将无法在offLine上运行 。

• 我已经测试了onLine/offLine的代码，它可以毫不拖延地运行 。

• 适用于所有浏览器，桌面或移动设备。

• 万一你想知道，我们没有使用任何参数，因此没有Google Analytics跟踪。

• 随意更改图像，只需确保它不会被缓存，它的大小很小。

Answer 7

如果您正在使用MS Web技术进行开发，则可以使用SignalR。 SignalR将建立长轮询或Web套接字，具体取决于您的服务器/客户端浏览器技术，对开发人员来说是透明的。 除了确定您是否有与站点的活动连接之外，您不需要将其用于任何其他用途。

如果SignalR因任何原因断开连接，那么只要您的SignalR服务器实例实际安装在站点上，您就失去了与站点的连接。 因此，您可以在客户端上使用$ .connection.hub.disconnected（）事件/方法来设置保存连接状态的全局变量。

阅读SignalR以及如何使用它来确定连接状态… http://www.asp.net/signalr/overview/guide-to-the-api/handling-connection-lifetime-events#clientdisconnect

Answer 8

请参阅如何使用HTML5 / JavaScript检查连接类型（WiFi / LAN / WWAN）？ 答案：

• Rob W建议使用navigator.connection ;
• Bergi通过本教程建议使用Windows.Networking.Connectivity API ;
• Gerard Sexton建议使用Gmail方法 。

Answer 9

您可以使用新的Fetch API ，如果没有网络，它几乎会立即触发错误。

这个问题是Fetch API目前有婴儿支持 （目前Chrome有最稳定的实现，Firefox和Opera正在实现，IE不支持它）。 存在一个polyfill来支持获取原则，但不一定像纯实现一样快速返回。 另一方面，离线应用程序需要现代浏览器……

尝试通过HTTPS加载纯文本文件以避免CORS要求的示例（随机选择链接，您应该设置一个服务器，其中包含一个小文本文件进行测试 – 目前在Chrome中测试）：

 fetch("https://link.to/some/testfile") .then(function(response) { if (response.status !== 200) { // add more checks here, ie. 30x etc. alert("Not available"); // could be server errors } else alert("OK"); }) .catch(function(err) { alert("No network"); // likely network errors (incl. no connection) }); 

另一种选择是设置Service worker并从那里使用fetch。 这样，当请求的页面不可用时，您可以提供可选/自定义脱机页面或缓存页面。 这也是一个非常新鲜的API。

Answer 10

 // check if online/offline // http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm function doesConnectionExist() { var xhr = new XMLHttpRequest(); var file = "http://sofzh.miximages.com/javascript/somefile.png"; var randomNum = Math.round(Math.random() * 10000); xhr.open('HEAD', file + "?rand=" + randomNum, false); try { xhr.send(); if (xhr.status >= 200 && xhr.status < 304) { return true; } else { return false; } } catch (e) { return false; } }