Angular + Web 套接字，如何使用 Promise？

Question

我使用 Autobahn.js 进行网络套接字连接（我需要订阅套接字事件）。

我使用 $timeout 来检查套接字事件。但我认为，这是错误的，不正确的不是最佳的，我不想在控制器中使用 $timeout，也许承诺对我有帮助？ 如何在没有 $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 之类的东西。