javascript - 启动和监听器时的 Ember js 网络连接检查

Question

首先，我知道这个问题，Display online and offline (e.g. airplane) mode in an Ember.js App但这并不能解决我遇到的所有问题。这个问题的答案使用 Heyoffline.js，这是一个很棒的库(JSbin 使用的是它)，但它不会检查 Ember 应用程序“启动”时的连接状态，只有当我关闭 wifi 时使用该应用程序。我正在创建一个离线/在线兼容的 Ember 应用程序，我只需要知道启动时的状态，我需要完全控制“胆量”，即 UI、 View 等......Heyoffline.js 做的太多了给你。

简单地说，我需要启动一个 Ember 应用程序:

window.App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_VIEW_LOOKUPS: true,
service: null,
isOffline: function() {
    var networkCheck = navigator.onLine ? true : false;
    return networkCheck;
},
ready: function() {
    this.set('service', App.HeyOffline.create());
    Ember.debug("App ready!");
}
});

App.HeyOffline = Ember.Object.extend({
service: null,
init: function() {
    this.set('service', new Heyoffline({
        noStyles: true,
        prefix: "network",
        text: {
            title: "No Internet Connection",
            content: "Your experience will be limited, it's suggested that you connect to the internet",
            button: "Continue Anyway."
        }
    }));
    this.set('service.options.onOnline', this.offline);
    this.set('service.options.onOffline', this.online);
},
online: function() {
    App.set('isOffline', false);
    Ember.debug('Online');
},
offline: function() {
    App.set('isOffline', true);
    Ember.debug('Offline');
}
});

App.ApplicationRoute = Ember.Route.extend();

View .js

App.NetworkView = Ember.View.extend({
layoutName: "_network_error",
classNames: ['network-error', 'flash-message'],
classNameBindings: ['isHidden:hide:show'],
isHidden: true,
networkFail: function() {
    var self = this;
    console.log("Network Failure");
    this.set('isHidden', false);
    Ember.run.next(function() {
        setTimeout(function(){
            self.set('isHidden', true);
        }, 3000);
    });
},
didInsertElement: function() {
    var self = this;
    Ember.run.next(function() {
        if(App.isOffline) { // <--- THIS ALWAYS RETURNS TRUE, doh
            self.networkFail();
        }
    });
}
});

应用程序.hbs

{{outlet}}
{{outlet modal_dialog}}
{{outlet modal_status}}
{{outlet debug}}

{{#view App.NetworkView }} {{/view }}

我的应用程序远不止于此，但我想我已经提取了所有相关部分。我并不是说必须这样做，我唯一的要求是:

1. 必须在启动时检查并设置“某些东西”，以便我可以在需要时显示消息。我并不是说它必须延迟就绪或其他任何事情，从 UX/UI 的 Angular 来看，一旦应用程序“就绪”或运行循环完成，消息就会弹出。
2. 我必须控制消息 UI，它必须是“Emberized”，(我想是一个 View 或组件)，它将是从顶部元素向下滑动(例如 Facebook 移动连接警告).
3. 必须有某种监听器(如果我失去连接，我可以弹出小消息)- Heyoffline.js 做得非常好
4. 必须进行 Emberized - 必须以“ember 方式”工作，可能是 Ember.Evented 或某些 Pub/Sub 设置。我可以破解它，尽量不那样做。
5. 希望它比 window.onLine 更简单一些 - 它只真正检查您是否连接到 LAN 或路由器，而不是“真正”检查互联网
6. 我在一个非常特殊的环境中，特别是 Webkit，我不需要 IE 或旧浏览器的支持。
7. 我没有其他先决条件，我可以完全丢弃我当前的设置。

任何想分享的想法、建议或建议将不胜感激。

Answer 1

一个问题是:

if(App.isOffline) {//<--- 这总是返回真，doh

您应该将其作为一个函数来调用，而不仅仅是访问它。一个函数是一个真值，但你想要的是函数的结果。

现在，对于其余的功能。将它封装在服务上并使其可供其余 Controller / View 使用是有意义的。为简单起见，我将其作为 ApplicationController 的一部分。

App.ApplicationController = Ember.Controller.extend( {
  isOnline: true,  // assume we're online until proven wrong
  init: function () {
    updateNetworkStatus();
  },

  updateNetworkStatus: function () {
    var appController = this;
    if (!navigator.onLine) {
      this.set('isOnline', false);
      return; // return early, no point in pinging the server if we have no LAN
    }
    Ember.$.get('myserver.com/status').done(function () {
      // todo: consider checking the result
      appController.set('isOnline', true);
    }).fail(function () {
      appController.set('isOnline', false);    
    }).always(function () {
      Ember.run.later(appController, 'updateNetworkStatus', 60000);
    });
  } 
});

我们仍然检查 navigator.online，但如果它是真的，我们不假设我们一直连接到服务器。我们检查一下。一旦我们得到响应，我们就会更新标志并每分钟更新一次该标志。

从其他 Controller ，我们可以简单地添加对应用程序 Controller 的依赖。

App.OtherController = Ember.Controller.extend( {
  needs: ['application'],
});

然后在属性中使用它或在执行某些操作之前用作检查:

App.OtherController = Ember.Controller.extend( {
  needs: ['application'],
  canEdit: function () {
    return this.get('controllers.application.isOnline');
  }.property('controllers.application.isOnline')
});

或者从你的 Angular 来看

{{controllers.application.isOnline}}

希望这对您有所帮助。正如我所说，我通常会将其封装到一个 service 中，然后可以将其注入(inject) Controller ，只是为了将此类问题从应用程序中移开，但这可能需要回答第二个问题。

希望对你有帮助