angularjs - 可以更新各种范围的 Angular 和套接字

Question

我有一个多方面的应用程序，它允许用户通过 socket.io 进行实时通信。到现在为止还挺好。我已经为 socket.io 编写了一个非常简单的工厂，而且效果也很好。

我需要拥有“ Eureka ”时刻的是如何让我的套接字监听每个 Controller 并更新应用程序的各个部分。

例如，我的功能:

socket.on('message', function(data) {});

当前在 ChatCtrl 范围内。因此，如果用户在“SettingsCtrl”中说，则套接字不会收到消息。

另外，我想实现诸如在联系人列表中标记未读消息数量之类的功能。

所以我真正需要做的是有一个“全局”监听的套接字，然后更新各种 Controller 的范围。

只是我应该研究的内容的指针会很棒。

Answer 1

因为您需要您的套接字在任何地方进行监听，这是 $rootScope 的完美用例.所有非隔离作用域都从 $rootScope 继承属性。我已经把这个 plunker我希望有助于演示如何使用 $rootScope 在各种 View 和 Controller 中持久保存您的套接字。

如果您查看 app.js，您将看到使套接字成为全局的主要部分。在config函数之后，有一个注入(inject)$rootScope和socket的run函数:

// add the global socket handler
app.run(['socket', '$rootScope', function(socket, $rootScope) {

  // add an object to rootscope that will expose variables and functions
  $rootScope.io = {
    chat: '',
    say: '',
    emit: function() {
      socket.emit('new message', this.say);
      this.chat += 'me: ' + this.say + '\n';
      this.say = '';
    }
  };

  // add additional socket functions to listen for replies, etc.
  socket.on('reply', function(data) {
    $rootScope.io.chat += data + '\n';
  })

  socket.on('clear', function() {
    $rootScope.io.chat = '';
  });

}]);

现在这个 io 对象可用于所有范围。在 plunker 中，您可以在各种 View 之间切换。即使一个新的 Controller 和 html 部分正在初始化，套接字和与之相关的所有数据仍然存在。

但是，这并不意味着您必须使所有逻辑都可以全局访问。例如，view2 的 Controller 仍然可以为该特定 Controller 注入(inject)套接字、监听和发出事件。 view2 跟踪未读消息，并允许执行其他命令，例如清除聊天或发送 ping