Javascript 插座IO房间和名称列表

Javascript 插座IO房间和名称列表,javascript,angularjs,node.js,socket.io,Javascript,Angularjs,Node.js,Socket.io,我试图在一个平均堆栈应用程序中显示一个用户列表并计算聊天室中的用户数。不幸的是,我遇到了一个相当严重的问题。每次新用户进入聊天室时,用户数都会重置。我希望聊天室中的当前成员能够持续存在,即使新用户进入聊天室 以下是服务器端代码: io.on('connection', function(socket){ var users = []; var username = ''; var room = ''; console.log('a user has connected');

我试图在一个平均堆栈应用程序中显示一个用户列表并计算聊天室中的用户数。不幸的是,我遇到了一个相当严重的问题。每次新用户进入聊天室时,用户数都会重置。我希望聊天室中的当前成员能够持续存在,即使新用户进入聊天室

以下是服务器端代码:

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>

连接的用户数:{users.length}

  • {{user}

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

用户的计数保存在哪里?当用户连接到聊天室时,用户名被推送到用户数组中,因此我只是尝试从数组中获取计数,但当新用户进入聊天室时,阵列似乎会简单地重置。重置后,用户数组中只有新用户名。你的应用程序中有多个页面吗?是的,该应用程序当前有主页、登录/注册页面、聊天室聚合页面和实际聊天室。你的数据是否在你的页面中保留?例如,如果您登录,该用户名是否也显示在聊天室中