网络状态的全局侦听器

Global listener for network status

本文关键字：全局 侦听器 状态 网络状 网络      更新时间：2023-09-26

通过这种方式，我可以使用在每个应用程序视图中显示简单角度材料警报的功能，对全局监听器（或其他）检查我们是否在整个应用程序中可见互联网连接，无论我在哪个控制器中和控制器内部。

所以，如果我需要在任何控制器中调用这个，我想还有另一种方法可以实现，但我不知道如何实现。

listener我使用addEventListener的方式编写。

您可以在run部分中订阅该事件

.run(['$rootScope', '$window', function($rootScope, $window) {
  $rootScope.online = $window.navigator.onLine;
  if (!$rootScope.online) {
    //do actions here
    //for example go to special state, $state.go('offline')
    alert('Offline!');
  }
  $window.addEventListener("offline", function() {
    //do actions here
    //for example set $rootScope.online = false;
    alert('Offline!');
  }, false);
  $window.addEventListener("online", function() {
    //do actions here, 
    //for example set $rootScope.online = true;
    alert('Online!');
  }, false);
}])

1） 由于它在run块中，所以它位于层次结构的顶部；在应用程序启动时执行；我在几个项目中使用了这种方法，并且它适用于所有控制器；

2） 第一次if检查是针对首次初始应用程序启动阶段；因为你可能是

  • 使用服务人员，即使离线也可以应用UI
  • 用户在手机上保存了一个带有"添加到主屏幕"的快捷方式

您可以使用类似Offline 的东西

或者推出自己的

angular.module('plunker', [])
.factory('OnlineStatus', function($timeout) {
  var isOnlineNow = true,
    isOnline = function() {
      $timeout(function() {
        isOnlineNow = true;
      });
    },
    isOffline = function() {
      $timeout(function() {
        isOnlineNow = false;
      });
    };
  if (window.addEventListener) {
    /*
     Works well in Firefox and Opera with the 
     Work Offline option in the File menu.
     Pulling the ethernet cable doesn't seem to trigger it.
     Later Google Chrome and Safari seem to trigger it well
     */
    window.addEventListener("online", isOnline, false);
    window.addEventListener("offline", isOffline, false);
  }
  else {
    /*
     Works in IE with the Work Offline option in the 
     File menu and pulling the ethernet cable
     */
    document.body.ononline = isOnline;
    document.body.onoffline = isOffline;
  }
  return {
    isOnline:function() {
      return isOnlineNow;
    }
  };
})
.directive('online', ['OnlineStatus', function(OnlineStatus) {
  return {
    template:'<div class="online"></div>',
    replace:true,
    restrict:'E',
    link:function(scope, elem, attrs) {
      scope.$watch(function() {
        return OnlineStatus.isOnline();
      }, function(isOnline) {
        elem.html(isOnline ? 'Online' : "Offline");
      })
    }
  };
}])

请参阅http://plnkr.co/edit/DrW8UdYsediusRMu1aMo?p=preview

相关文章：