Angular和socket可以更新各种范围

时间:2014-06-03 13:31:29

标签: angularjs sockets

我有一个多方面的应用程序,允许用户通过socket.io实时通信。到现在为止还挺好。我为socket.io编写了一个非常简单的工厂,这也很好用。

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

例如,我的功能:

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

目前处于ChatCtrl范围内。因此,如果用户在“SettingsCtrl”中说,则套接字不会接收消息。

另外,我希望在联系人列表上实现标记未读消息数量的内容。

所以我真正需要做的是拥有一个侦听“全局”的套接字,然后更新各种控制器的范围。

只是指出我应该研究的东西会很棒。

2 个答案:

答案 0 :(得分:4)

因为你需要你的套接字到处听,这是$rootScope的完美用例。所有非隔离范围都从$ rootScope继承属性。我把这个plunker放在一起,希望有助于演示使用$ rootScope将套接字保存在各种视图和控制器中。

如果查看app.js,您将看到使套接字全局化的主要部分。在配置函数之后,有一个运行函数注入$ rootScope和socket:

// 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中,您可以在各种视图之间切换。即使新的控制器和html partial正在初始化,套接字和随之而来的所有数据仍然存在。

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

答案 1 :(得分:1)

我会使用factory ...

app.factory('mysocket', function() {
    var mydata; //closure
    socket.on('message', function(data) {
        mydata = data;
    });
    return {
        data: function() {
            return mydata;
        }
    };
});

...你可以注入各种控制器。

function MyCtrl ($scope, mysocket) {
    $scope.data = mysocket.data();
}