5

我在客户端使用 nodejs 和 socket.io 和 angularjs。我从 Internet 上获取了 angular-socketio 示例并为其添加了disconnect方法。

套接字服务：

angular.module('app')
  .factory('socket', ['$rootScope', function ($rootScope) {

    var socket = io.connect();

    return {
      on: function (eventName, callback) {
        socket.on(eventName, function () {  
          var args = arguments;
          $rootScope.$apply(function () {
            callback.apply(socket, args);
          });
        });
      },
      emit: function (eventName, data, callback) {
        socket.emit(eventName, data, function () {
          var args = arguments;
          $rootScope.$apply(function () {
            if (callback) {
              callback.apply(socket, args);
            }
          });
        })
      },
      disconnect: function () {
        socket.disconnect();
      },
      socket: socket
    };

  }]);

控制器：

angular.module('app')
  .controller('Controller', ['$scope', 'socket', function ($scope, socket) {

    socket.emit('register')

    socket.on('connect', function () {
        console.log('Socket connected');
    });

    socket.on('disconnect', function () {
        console.log('Socket disconnected');
    });

    socket.on('register', function (reginfo) {
        console.log('Register: %s, cname=%s', reginfo.ok, reginfo.cname);
        socket.disconnect(); // <-- this line throw Error
    });

    socket.on('last', updateSnapshot);

    socket.on('state', updateSnapshot);

    function updateSnapshot(snapshot) { ... }

}]);

但是当我尝试断开使用此方法时，我会捕获错误：

Error: $apply already in progress
  at Error (<anonymous>)
  at beginPhase (http://localhost:4000/scripts/vendor/angular.js:8182:15)
  at Object.$get.Scope.$apply (http://localhost:4000/scripts/vendor/angular.js:7984:11)
  at SocketNamespace.on (http://localhost:4000/scripts/services/socket.js:10:32)
  at SocketNamespace.EventEmitter.emit [as $emit] (http://localhost:4000/socket.io/socket.io.js:633:15)
  at Socket.publish (http://localhost:4000/socket.io/socket.io.js:1593:19)
  at Socket.onDisconnect (http://localhost:4000/socket.io/socket.io.js:1970:14)
  at Socket.disconnect (http://localhost:4000/socket.io/socket.io.js:1836:12)
  at SocketNamespace.<anonymous> (http://localhost:4000/scripts/controllers/controller.js:38:34)
  at on (http://localhost:4000/scripts/services/socket.js:11:34)

而且我不知道在哪里挖……</p>

4

2 回答 2

8

[更新]

$$phase是 Angular 的一个内部私有变量，因此你不应该真正依赖它来处理这样的事情。伊戈尔在另一个答案中描述了一些处理这个问题的建议，应该使用这些建议（我听说他对 Angular 了解一两件事。;）

当模型发生变化并且事件从 Angular 框架内触发时，Angular 可以根据需要进行脏跟踪并更新任何必要的视图。当您想与Angular之外的代码进行交互时，您必须将必要的函数调用包装在$apply作用域的方法中，以便 Angular 知道正在发生的事情。这就是代码读取的原因

$rootScope.$apply(function () {
  callback.apply(socket, args);
});

等等。它告诉 Angular，“采用通常不会触发 Angular 视图更新的代码，并按应有的方式对待它。”

问题是当您$apply已经在通话时$apply打电话。例如，以下将引发$apply already in progress错误：

$rootScope.$apply(function() {
  $rootScope.$apply(function() {
    // some stuff
  });
});

根据您的堆栈跟踪，看起来某些对emit（已经使用$apply）的调用触发了对on（也使用$apply）的调用。要解决这个问题，我们只需要$apply在 an$apply尚未进行时调用。值得庆幸的是，范围上有一个名为的属性$$phase可以告诉我们是否正在进行脏检查。

我们可以轻松地构建一个函数，该函数需要一个作用域和一个函数来运行，然后$apply仅当一个函数尚未在运行时才运行该函数：

var safeApply = function(scope, fn) {
  if (scope.$$phase) {
    fn(); // digest already in progress, just run the function
  } else {
    scope.$apply(fn); // no digest in progress, run the function with $apply
  }
};

现在我们可以替换调用

$rootScope.$apply(function...);

到

safeApply($rootScope, function...);

例如，要修改上面的代码，

angular.module('app')
  .factory('socket', ['$rootScope', function ($rootScope) {

    var safeApply = function(scope, fn) {
      if (scope.$$phase) {
        fn(); // digest already in progress, just run the function
      } else {
        scope.$apply(fn); // no digest in progress, run with $apply
      }
    };

    var socket = io.connect();

    return {
      on: function (eventName, callback) {
        socket.on(eventName, function () {  
          var args = arguments;
          safeApply($rootScope, function () {
            callback.apply(socket, args);
          });
        });
      },
      emit: function (eventName, data, callback) {
        socket.emit(eventName, data, function () {
          var args = arguments;
          safeApply($rootScope, function () {
            if (callback) {
              callback.apply(socket, args);
            }
          });
        })
      },
      disconnect: function () {
        socket.disconnect();
      },
      socket: socket
    };

  }]);
于 2013-02-05T06:46:51.507 回答
4

这个问题的核心（就像在大多数其他情况下一样）是该on方法在大多数情况下被异步调用（好！）但在某些情况下也是同步调用（坏！）。

当您socket.disconnect()从您的应用程序（从位于“角度上下文”中的控制器内）调用时，它会同步触发断开连接事件，然后该事件传播到on旨在打开角度上下文边界的方法中。但是由于您已经处于角度上下文中，因此角度会抱怨您提到的错误。

由于此问题特定于断开呼叫，因此此处的最佳选择是

  • 使用 setTimeout 或 $timeout（将 invokeApply arg 设置为 false）使断开连接异步，或者
  • 保留一个内部标志，它会告诉您是否处于断开连接阶段，在这种情况下，请跳过 $apply

示例代码：

angular.module('app')
  .factory('socket', ['$rootScope', function ($rootScope, $timeout) {

    var socket = io.connect();

    return {
      on: function (eventName, callback) {
        socket.on(eventName, function () {  
          var args = arguments;
          $rootScope.$apply(function () {
            callback.apply(socket, args);
          });
        });
      },
      emit: function (eventName, data, callback) {
        socket.emit(eventName, data, function () {
          var args = arguments;
          $rootScope.$apply(function () {
            if (callback) {
              callback.apply(socket, args);
            }
          });
        })
      },
      disconnect: function () {
        $timeout(socket.disconnect, 0, false);
      },
      socket: socket
    };

  }]);

或者

angular.module('app')
  .factory('socket', ['$rootScope', function ($rootScope) {

    var socket = io.connect(),
        disconnecting = false;

    return {
      on: function (eventName, callback) {
        socket.on(eventName, function () {  
          var args = arguments;
          if (!disconnecting) {
            $rootScope.$apply(function () {
              callback.apply(socket, args);
            });
          } else {
            callback.apply(socket, args);
          }
        });
      },
      emit: function (eventName, data, callback) {
        socket.emit(eventName, data, function () {
          var args = arguments;
          $rootScope.$apply(function () {
            if (callback) {
              callback.apply(socket, args);
            }
          });
        })
      },
      disconnect: function () {
        disconnecting = true;
        socket.disconnect();
      },
      socket: socket
    };

  }]);
于 2013-06-13T16:51:39.210 回答