如何使用AngularJs检查用户是否有互联网连接

Question

当用户尝试在没有互联网连接的情况下登录时，我只需要检查他/她是否已连接到互联网。

我尝试了以下代码：

if (status == '404') {
    $scope.error="No internet connection";
    return false;
}

但是，即使我的Web服务连接失败，这个404状态也会出现。我需要区分两者，判断是用户的互联网连接问题还是Web服务连接问题。

- jsduniya

---

你可以使用 navigator.onLine JavaScript 函数或编写一个服务来检查连接状态，参考此链接。由于这只是一个简单的测试，你也可以模拟 AJAX 请求。 - Evandro Silva

@EvandroSilva：有时候它能工作，有时候不能……如果禁用网络，它可以工作，但如果我断开有线网络连接，它就无法工作。 - jsduniya

Answer 1

使用 navigator.onLine

您可以使用navigator.onLine并将其包装在辅助变量中，如下所示（感谢此答案的贡献者）

myApp.run(function($window, $rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline", function () {
        $rootScope.$apply(function() {
          $rootScope.online = false;
        });
      }, false);
      $window.addEventListener("online", function () {
        $rootScope.$apply(function() {
          $rootScope.online = true;
        });
      }, false);
});

然后在控制器中查看：

$scope.$watch('online', function(newStatus) { ... });

但是这只是一个简单的检查，用于判断PC是否连接到网络，而不意味着互联网正在工作。

使用伪造的AJAX请求

您可以模拟执行一个向浏览器发送伪造请求的服务（警告：以下代码未经测试）。

myApp.service('Internet', function($http){
  this.IsOk = function () {
    return $http({ method: 'HEAD', url: '/' + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000) })
    .then(function(response) {
      var status = response.status;
      return status >= 200 && status < 300 || status === 304;
    });
  }
});

然后在这个环境中使用某些东西：

myApp.controller('TestController', function(Internet){

  Internet.IsOn().then(function(isok){
    if(isok) {...} else {...}
  });

});

这是一个关于在这个链接中模拟请求的代码。

需要注意的是，它不能在localhost上使用，因为即使与互联网断开连接，服务器仍然可以工作。

- Evandro Silva

---

为什么是这些响应代码？200到300和304？我认为一些4XX代码也适用，例如404。 - SamAko

Answer 2

来自 MDN 对 NavigatorOnLine.onLine 的总结。

浏览器对此属性的实现方式不同。

在 Chrome 和 Safari 中，如果浏览器无法连接到本地区域网络（LAN）或路由器，则处于离线状态；所有其他情况都返回 true。因此，当它返回 false 值时，您可以假设浏览器处于离线状态，但您不能假设 true 值一定意味着浏览器可以访问互联网。您可能会得到误报，例如计算机运行具有始终“连接”的虚拟以太网适配器的虚拟化软件的情况。因此，如果您真的想确定浏览器的在线状态，您应该开发其他检查手段。要了解更多信息，请参见 HTML5 Rocks 文章 Working Off the Grid。

在 Firefox 和 Internet Explorer 中，将浏览器切换到离线模式会发送 false 值。所有其他条件都返回 true 值。

可以通过监听 window.onOnline 和 window.onOffline 事件来查看网络状态的变化。

您可以通过window.navigator.onLine访问该信息，但正如文档所述，跨浏览器的一致性非常不稳定。

您还可以使用以下代码来监听状态更改：window.addEventListener。

window.addEventListener("offline", function(e) {alert("offline");})

window.addEventListener("online", function(e) {alert("online");})

- Joe

---

它有时候能工作，有时候不能……如果禁用网络，它就能工作；如果我断开有线网络连接，它就不能工作。 - jsduniya

Answer 3

有一个 JavaScript 属性，navigator.onLine，它返回一个布尔值，指定浏览器是处于在线模式还是离线模式。

navigator 对象包含有关用户浏览器的信息。

它在所有主要浏览器中都受支持，所以您不应该遇到任何问题。

- Matias Cicero

---

如果你所说的“被所有主流浏览器支持”是指这种不一致的行为，那么... - Liam