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

我需要一些关于如何使用Javascript或jQuery或任何库（如果可用）检查internet连接的帮助。因为我正在开发一个脱机应用程序，如果用户处于脱机状态，我想显示一个版本，如果用户处于联机状态，则显示另一个版本

目前我正在使用以下代码：

if（navigator.onLine）{
警报（“在线”）；
}否则{
警报（“脱机”）；
}

看一看基本情况，对您知道可能出现问题的东西（比如google.com）发出ajax请求，如果失败，就没有互联网连接。

我刚刚从一个：

---

他们甚至有一个新的目标。我在IE、Firefox和Chrome上试用过。Chrome看起来速度最慢，但只有半秒左右。

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

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

阅读有关信号器以及如何使用它来确定连接状态。。。 我想你应该试试。。它看起来很容易使用，试一下就可以了

它甚至提供了选项

checkOnLoad

，可在页面加载时立即检查连接

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

Offline.state：连接的当前状态为“向上”或“向下”

还没有试过，如果能知道它是否能按预期工作，那就太好了

---

EDIT在代码中使用了一个小峰值，它使用了问题中建议的失败的XHR请求的方法

navigator.onLine是一个维护真/假值的属性（在线为真，离线为假）。每当用户切换到“脱机模式”时，此属性都会更新

见答案：

• Rob W建议
• 伯吉建议通过
• 杰拉德·塞克斯顿建议

---

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

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

举个例子，尝试通过HTTPS加载纯文本文件，以避免CORS要求（链接是随机选取的，您应该设置一个服务器，使用一个小文本文件进行测试-目前在Chrome中测试）：

---

另一个选项是设置一个，并在那里使用fetch。这样，当请求的页面不可用时，可以为可选/自定义脱机页面或缓存页面提供服务。这也是一个非常新的API。

尝试利用

WebRTC

，请参阅；部分地

此外，这些眩晕请求是在正常情况下发出的 XMLHttpRequest过程，因此它们在开发人员中不可见 控制台或可被诸如AdBlockPlus或 鬼魂。这使得这些类型的请求可用于联机 跟踪广告客户是否使用通配符设置了STUN服务器 域名

---

最低限度地修改为在

控制台上记录“在线”或“离线”

//https://github.com/diafygi/webrtc-ips
函数联机（回调）{
//firefox和chrome的兼容性
var RTCPeerConnection=window.RTCPeerConnection
||window.mozRTPeerConnection
||window.webkirtpeerconnection；
var useWebKit=！！window.webkittrpeerconnection；
//使用iframe绕过原始webrtc阻塞
如果（！RTPeerConnection）{
//注意：页面中需要有一个iframe
//就在脚本标记的正上方
//
//
//…getIPs打电话来这里。。。
//
var win=iframe.contentWindow；
rtpeerconnection=win.rtpeerconnection
||win.MozRTPeerConnection
||win.webkirtpeerconnection；
useWebKit=！！win.webkirtpeerconnection；
}
//数据连接的最低要求
变量mediaConstraints={
可选：[{RtpDataChannels:true}]
};
//firefox在about:config中已经有一个默认的stun服务器
//media.peerconnection.default\u iceservers=
//[{“url”：“stun:stun.services.mozilla.com”}]
var服务器=未定义；
//为chrome添加相同的stun服务器
如果（使用WebKit）
servers={iceServers:[{url:stun:stun.services.mozilla.com}]}；
//构造新的RTPeerConnection
var pc=新的RTPeerConnection（服务器、媒体约束）；
//创建虚假数据通道
pc.createDataChannel（“”）；
var fn=函数（）{}；
//创建报价sdp
pc.createOffer（函数（结果）{
//触发stun服务器请求
pc.setLocalDescription（结果，fn，fn）；
}，fn）；
//等一会儿，让一切都完成
setTimeout（函数（）{
//从本地描述中读取候选人信息
var line=pc.localDescription.sdp.split（“\n”）；
//返回'true'：“联机”，或'false'：“脱机”
var res=行。一些（函数（行）{
返回行。indexOf（“a=候选”）==0
});
回收（res）；
}, 500);
}
//测试：在控制台中打印“在线”或“离线”
在线（功能（连接）{
如果（连接）{
控制台日志（“在线”）
}
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);

window.addEventListener('load', function() {

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

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)
    });

// 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://www.yoursite.com/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;
    }
}

<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$( document ).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>
<body>

console.log(navigator.onLine ? 'online' : 'offline');