Socket IO 房间和名称列表答案

【问题标题】：Socket IO rooms and names listSocket IO 房间和名称列表
【发布时间】：2016-08-13 21:29:16
【问题描述】：

我正在尝试在 MEAN Stack 应用程序中显示用户列表并计算聊天室中的用户数量。不幸的是，我遇到了一个非常严重的问题。每次有新用户进入聊天室时，用户数都会重置。即使新用户进入房间，我希望聊天室中的当前成员仍然存在。

这是服务器端代码：

io.on('connection', function(socket){


  var users = [];
  var username = '';
  var room = '';
  console.log('a user has connected');


  socket.on('join-room', function(data){
    socket.join(data.room);
    room = data.room;
  });


  socket.on('request-users', function(){
    socket.to(room).emit('users', {users: users});
    console.log(users);
  });

  socket.on('add-user', function(data){

      io.to(room).emit('add-user', {
        username: data.username
      });
      username = data.username;
      users.push(data.username);
  });


  socket.on('disconnect', function(data){
    console.log(username + ' has disconnected');
    users.splice(users.indexOf(username), 1);
    io.to(room).emit('remove-user', {username: username});
  });
});

这是使用 btford-socket.io 的角度控制器：

angular.module('chatApp').controller('chatController', ['$scope', 'Socket','$cookies', '$rootScope', '$stateParams', function($scope, Socket, $cookies, $rootScope, $stateParams){
  Socket.connect();

  $scope.room = $stateParams.room;



  Socket.emit('join-room', {room:$stateParams.room}); 
  console.log($stateParams.room);

  $scope.users = [];


  if($cookies.get('token') && $cookies.get('currentUser')){
    console.log($cookies.get('currentUser'));
    Socket.emit('add-user', {username: $rootScope.currentUser});
  } else {
    bootbox.alert('You need to sign in to chat');
  }



  Socket.emit('request-users', {});


  Socket.on('users', function(data){
    $scope.users = data.users;
  });


  Socket.on('add-user', function(data) {
    $scope.users.push(data.username);
    $scope.messages.push({username: data.username, message: 'has arrived'});
  });

  Socket.on('remove-user', function(data){
    $scope.users.splice($scope.users.indexOf(data.username),1);
    $scope.messages.push({username: data.username, message: 'has left the building'});
  });


  $scope.$on('$locationChangeStart', function(event){
    Socket.disconnect(true);
  })
}]);

最后是 HTML：

<div class="col-md-2" id="user-list">
  <p>Number of connected users: {{users.length}}</p>
  <ul>
    <li ng-repeat="user in users track by $index">{{user}}</li>
  </ul>
  <div class="fixed"></div>
</div>

【问题讨论】：

您在哪里统计用户数？
当用户连接到聊天室时，用户名被推送到用户数组中，所以我只是试图从数组中获取计数，但似乎数组只是在新的用户进入聊天室。重置后，用户数组中只有新用户名。
您的应用中有多个页面吗？
是的，该应用目前有一个主页、一个登录/注册页面、一个房间聚合页面和实际聊天室。
您的数据是否会在您的页面中持续存在？例如，如果您登录，该用户名是否也会显示在聊天室中

标签： javascript angularjs node.js socket.io

【解决方案1】：

所以我很确定这就是正在发生的事情。每个用户都有自己的套接字连接，但是当新用户连接时，它会将此消息广播给每个人。这意味着它将为每个人重置变量。在连接函数之外的应用程序中声明您需要的变量。

【讨论】：