与 doowb/angular-pusher 的连接状态答案

【问题标题】：Connection state with doowb/angular-pusher与 doowb/angular-pusher 的连接状态
【发布时间】：2014-08-15 08:23:15
【问题描述】：

我正在尝试使用 angular-pusher 包装器使用 Pusher 构建一个 Angular 项目。它运行良好，但我需要检测用户何时短暂失去互联网，以便他们可以从我的服务器检索丢失的数据更改。

看起来处理这个问题的方法是在Pusher.connection.state('connected'...) 上重新加载数据，但这似乎不适用于angular-pusher - 我收到“Pusher.connection”未定义。

这是我的代码：

angular.module('respondersapp', ['doowb.angular-pusher']).

    config(['PusherServiceProvider',
        function(PusherServiceProvider) {
            PusherServiceProvider
                .setToken('Foooooooo')
                .setOptions({});
        }
    ]);
var ResponderController = function($scope, $http, Pusher) {
    $scope.responders = [];

    Pusher.subscribe('responders', 'status', function (item) {
        // an item was updated. find it in our list and update it.
        var found = false;
        for (var i = 0; i < $scope.responders.length; i++) {
            if ($scope.responders[i].id === item.id) {
                found = true;
                $scope.responders[i] = item;
                break;
            }
        }
        if (!found) {
            $scope.responders.push(item);
        }
    });
    Pusher.subscribe('responders', 'unavail', function(item) {
        $scope.responders.splice($scope.responders.indexOf(item), 1);
    });
    var retrieveResponders = function () {
        // get a list of responders from the api located at '/api/responders'
        console.log('getting responders');
        $http.get('/app/dashboard/avail-responders')
            .success(function (responders) {
                $scope.responders = responders;
            });
    };

    $scope.updateItem = function (item) {
        console.log('updating item');
        $http.post('/api/responders', item);
    };

    // load the responders
    retrieveResponders();
};

在此设置下，我将如何监控连接状态？我基本上是在尝试为不稳定的连接复制 Firebase“赶上”功能，Firebase 对我来说总体上无法正常工作，尝试管理多个数据集太令人困惑（根本不打算替换后端）。

谢谢！

【问题讨论】：

标签： angularjs pusher

【解决方案1】：

看起来Pusher 依赖项只公开了subscribe 和unsubscribe。看： https://github.com/doowb/angular-pusher/blob/gh-pages/angular-pusher.js#L86

但是，如果您访问 PusherService，您可以使用 PusherService.then 访问 Pusher 实例（由 Pusher JS 库提供的实例）。看： https://github.com/doowb/angular-pusher/blob/gh-pages/angular-pusher.js#L91

我不确定为什么PusherService 提供了一定程度的抽象，以及为什么它不只返回pusher 实例。可能是因为它可以添加一些 Angular 特定的功能（$rootScope.$broadcast 和 $rootScope.$digest）。

也许您可以将PusherService 设置为依赖项并使用以下方法访问pusher 实例？

PusherService.then(function (pusher) {
  var state = pusher.connection.state;
});

【讨论】：

你能提供一个例子来说明它是如何工作的吗？我是 Angular 的新手，发现所有这些实时服务如果没有最基本的功能就很难实现。现在看看 PubNub，似乎也面临着一系列挑战。

【解决方案2】：

为了澄清@leggetters 的答案，您可以执行以下操作：

app.controller("MyController", function(PusherService) {
  PusherService.then(function(pusher) {
    pusher.connection.bind("state_change", function(states) {
      console.log("Pusher's state changed from %o to %o", states.previous, states.current);
    });
  });
});

还要注意pusher-js（angular-pusher 使用）具有activityTimeout 和pongTimeout 配置来调整连接状态检测。

根据我有限的实验，不能依赖连接状态。使用默认值，您可以离线几秒钟，然后重新在线，而不用更明智。

即使您降低配置值，如果运气不好，也可能有人会在短短一毫秒内离线并错过一条消息。

【讨论】：