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

【问题标题】：How to check internet connection in AngularJs如何在 AngularJs 中检查互联网连接
【发布时间】：2013-04-26 17:51:44
【问题描述】：

这就是我在 vanilla javascript 中检查互联网连接的方式：

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

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

【问题讨论】：

另见stackoverflow.com/questions/15574580/…

标签： angularjs

【解决方案1】：

首先，我建议你听online/offline events。

你可以在 AnguarJS 中这样做：

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

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

【讨论】：

你的 js 代码有错别字，你缺少一个 ')' 来关闭 $apply(。刚试了一下，我得到一个错误：Uncaught TypeError: Cannot call method 'addEventListener' of undefined跨度>
请注意，这在 FireFox 中不起作用。他们选择以与其他浏览器不同的方式实现 navigator.onLine，这确实伤害了想要开发离线应用程序的开发人员。
不能在 chrome 上工作。我打开 plunker 并显示 online:true 然后我关闭了我的 wifi 仍然显示 online:true。
警告：这只会检查您的计算机是否已连接到网络，而不是检查您是否真的在线。
使用emit && broadcast 而不是$window.addEventListener

【解决方案2】：

这绝对不是那么好，但您可以尝试向您的 Web 服务器发出 AJAX 请求；它要么成功，要么超时。

另外，HubSpot/offline project 看起来真的很不错。

【讨论】：

!+ 但是，大声笑：这就是我要替换的内容。我有一个负责尝试重新连接的服务。任何尝试$http.get 并获得 404 的人都可以调用该服务，该服务将 1）广播没有互联网（这样其他人就不会尝试连接），2）定期尝试连接到我的服务器，3）当成功，停止连接尝试并广播应用程序现在再次在线。然而，这似乎很笨拙，而且这个解决方案似乎很优雅——除了 FF :-( 我不能在这里重新发明轮子。其他人是怎么做到的？
糟糕，请参阅我对相关问题stackoverflow.com/questions/15574580/… 的评论“我没有删除它，我只是打开了他们的模拟器。而不是使用他们的复选框来假装，我实际上拉了我的以太网电缆。在 Chrome 和 MS IE 中，我出现“你离线”警报。FF 没有显示它。另请参阅 stackoverflow.com/questions/16242389/... 这表明 FF 似乎是非标准的“

【解决方案3】：

您的选择：

在窗口、文档或 document.body 上添加事件监听器。
在文档上设置 .ononline 或 .onoffline 属性或
document.body 到一个 JavaScript 函数对象。
在标签中指定 ononline="..." 或 onoffline="..." 属性 HTML 标记

我会演示最简单的。

在你的控制器中

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 变量。

【讨论】：

【解决方案4】：

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

只需安装：

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

【讨论】：