Angular + web socket，如何使用promises？

Question

我使用Autobahn.js进行web套接字连接(我需要订阅套接字事件)。

对于检查套接字事件，我使用$timeout。但我认为，这是错误的，不正确的，不是最优的，我不想在控制器中使用$timeout，也许promises对我有帮助？如何在没有$timeout的情况下在控制器中捕获套接字消息？

​

app.factory('socket',['$rootScope',
function($rootScope) {
    var pubsub = new ab.Session(
      'wss://site.com/',
      function(session) {
        return session;
      },
      function(code, reason) {
      }
    );
    return {
      pubsub: pubsub
    };

  }]);




app.controller('mainCtrl', ['$timeout', 'socket', function($timeout, socket) {

 $timeout(function() {
  
  $scope.data = socket.pubsub.subscribe('3434424234324', function(topic, data) { 
    
    
    // do something if data. 
    // data contains socket message.

  });
}, 300);
  
}]);

//3434424234324 - subscriber id

​

Answer 1

WebSockets的一个基本思想是它们是异步的。你不需要跟踪他们什么时候会做事情！如果最终使用$timeout检查套接字是否收到消息，那么可能出了很大的问题！可以完全删除那些可以转到$timeout的代码。

所有套接字接口都将公开处理程序回调函数，这些函数将负责处理套接字可以触发的不同事件。您需要做的是找到Autobahn的message事件处理程序，并在那里手动触发$scope摘要。

Autobahn使用发布者/订阅者模型，这意味着您需要获得subscribe事件处理程序：

socket.pubsub.subscribe('3434424234324', function(topic, data) { 
  // do something if data. 
  // data contains socket message.

  // let angular know something async has happened
  $scope.$apply();
});

然而，我建议你把Autobahn打包成一个Angular工厂，它会为你处理这种行为，而不是试图改变你所有的代码。更好的是，使用像angular-wamp这样的库，它已经可以做到这一点。

Answer 2

我想出了一些快速的东西，如下所示：

app.factory('socket',['$rootScope', function($rootScope) {
    var connection = new autobahn.Connection({
        url: 'url',
        realm: 'realm'
    });

    var collection = {
       'topic1': [],
       'topic2': []
    };

    connection.onopen = function(session) {
        session.subscribe('topic1').then(function(res){
            collection.topic1.push(res);
        });
    };

    connection.open();

    return {
       collection: collection
    }
}]);
app.controller('mainCtrl', ['socket', function(socket) {
     $scope.socket = socket;
}]);

然后在您的mainCtrl中，您可以访问主题数据，因为它们存储在集合中。如果你想在模板中显示它，你可以简单地使用类似{{ socket.collection.topic1 }}，或者ng-repeat之类的东西。