如何在AngularJs中检查互联网连接

Question

这是我如何在原生 JavaScript 中检查互联网连接：

setInterval(function(){
    if(navigator.onLine){
        $("body").html("Connected.");
    }else{
        $("body").html("Not connected.");
    }
},1000);

我在我的项目中有一些Angular控制器和模块。我应该把上面的代码放在哪里？它应该在全局上下文中执行，而不是分配给某个控制器。也许有一些全局控制器吗？

- DarkLeafyGreen

---

请参见https://dev59.com/1XDXa4cB1Zd3GeqP7QLG。 - Mawg says reinstate Monica

Answer 1

首先，我建议你听一下在线/离线事件。

在AngularJS中，你可以这样做：

var app = module('yourApp', []);

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

注意：我将根作用域变量的更改封装在$apply方法中，以通知Angular发生了变化。

之后，您可以：

在控制器中：

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

在HTML标记中：

 <div ng-show="online">You're online</div>
 <div ng-hide="online">You're offline</div>

这里有一个可工作的 Plunker：http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

另一种解决方案是广播在线/离线事件。但在这种情况下，您需要在加载时初始化当前状态，然后订阅事件。

- Valentyn Shybanov

---

请注意，这在火狐浏览器中无法运行。他们选择以与其他所有浏览器不同的方式实现navigator.onLine，这对希望开发离线应用程序的开发人员造成了很大的困扰。 - Ted A.

奇怪 - 根据我参考的文章：“Firefox 3引入了两个新事件：“在线”和“离线”。”，所以应该可以工作。 - Valentyn Shybanov

在谷歌浏览器上无法工作。我打开了Plunker并显示online:true，然后关闭了Wi-Fi，但仍然显示online:true。 - vinesh

警告：此功能仅检查您的计算机是否连接到网络，而不检查您实际上是否在线。 - PLPeeters

请使用emit && broadcast代替$window.addEventListener。 - Umair Ahmed

Answer 2

虽然这样做不太好，但您可以尝试向Web服务器发送AJAX请求；它将成功或超时。

此外，HubSpot/offline项目看起来非常不错。

- Jon Onstott

---

!+ 但是，哈哈：这就是我试图替换的内容。我有一个服务负责尝试重新连接。任何尝试 $http.get 并得到 404 的人都可以调用该服务，该服务将 1) 广播没有网络（以便其他人不会尝试连接），2) 定期尝试连接到我的服务器，并且 3) 成功时停止连接尝试并广播应用程序现在已经在线了。然而，这似乎非常笨拙，而这个解决方案似乎很优雅 - 除了 FF :-( 我不能在这里重新发明轮子。别人是如何做到的？ - Mawg says reinstate Monica

糟糕，看到我在相关问题https://dev59.com/1XDXa4cB1Zd3GeqP7QLG的评论了吗？“我没有下载它，我只是打开了他们的模拟器。与使用他们的复选框假装不同，我实际上拔掉了以太网电缆。在Chrome和MS IE中，我收到了“您处于离线状态”的警报。FF没有显示它。请参见stackoverflow.com/questions/16242389/…，其中指出FF似乎是非标准的。” - Mawg says reinstate Monica

Answer 3

您的选择：

• 在窗口、文档或文档正文上添加addEventListener。

• 将.ononline或.onoffline属性设置为JavaScript函数对象，放在文档或文档正文上。

• 在HTML标记中指定ononline="..."或onoffline="..."属性。

我将演示最简单的方法。

在您的控制器中

document.body.onoffline = function() {
   alert('You are offline now');
   $scope.connection = 'offline' 
}

document.body.ononline = function() {
   alert('You are online again');
   $scope.connection = 'online' 
}

在尝试发送请求之前，请检查 $scope.connection 变量。

- Charlie

Answer 4

对于 Angular 2+，您可以使用 ng-speed-test：

1. 只需安装：

npm install ng-speed-test --save

将以下代码注入到您的模块中：

import { SpeedTestModule } from 'ng-speed-test';

@NgModule({
   ...
   imports: [
       SpeedTestModule,
       ...
   ],
   ...
})
export class AppModule {}

使用服务获取速度：

import {SpeedTestService} from 'ng-speed-test';

@Injectable()
export class TechCheckService {
  constructor(
    private speedTestService:SpeedTestService
  ) {
    this.speedTestService.getMbps().subscribe(
      (speed) => {
        console.log('Your speed is ' + speed);
      }
    );
  }
}

- Jeremy