Question

我需要一个全局的应用程序智能Web套接字，可供我应用程序中的所有控制器使用。

以下代码描述了我创建工厂以共享单个websocket对象的用例。提供的接口允许控制器通过套接字发送数据并为侦听器附加传入消息。

以下代码的问题是我能够按预期在套接字上发送数据，但是当它通过套接字时无法接收数据。

我已经阅读了几个角度摘要相关的解决方案，但它们对我不起作用。

angular
  .module('myApp', [])
  .factory('socket', function() {
    var socketStates = ['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED'];
    var socket = new WebSocket("ws://localhost:7070/ws");
    socket.onopen = function(event) {
      socket.send("hello");
    };

    socket.addEventListener('message', function(event) {
      // I am able to see this so, it is confirmed that server is sending the data
      console.log(event);
    });

    return {
      emit: function (data) {
        socket.send(JSON.stringify(data));
      },
      on: function(callback) {
        socket.addEventListener('message', callback);
      },
      getStatus: function() {
        var status = socket.readyState;
        return socketStates[status]
      }
    };
  })
  .controller('MyController', function(socket){
    var myctl = this;

    //This works
    socket.emit({type : "register", name: producer});

    //This doesn't work
    socket.on(function(event) {
      console.log(event);
    });
  });

$rootScope.$apply(socket.addEventListener('message', callback));

而不是

socket.addEventListener('message', callback);

抛出以下错误

vendor.js:5 Error: [$rootScope:inprog] $digest already in progress(…)(anonymous function)

Answer 1

摘要过程已在进行中，您必须检查$$phase并使用if语句包装您的代码：

if (!$scope.$$phase) {
  $rootScope.$apply(socket.addEventListener('message', callback));
} else {
  socket.addEventListener('message', callback);  
}

如需更多检查：AngularJS : Prevent error $digest already in progress when calling $scope.$apply()

Answer 2

您的socket.on()事件正在运行与当前摘要周期冲突的摘要周期。

您可以使用setTimeut()来解决此问题

setTimeout(function(){ 
       socket.on(function(event) {
          console.log(event);
      }); 
});

使用angularjs不会触发WebSocket回调

2 个答案: