套接字IO房间和名称列表

Question

I am trying to display a list of users and count the number of users within a chatroom in a MEAN Stack Application. Unfortunately, I've encountered a pretty serious problem. The number of users resets each time a new user enters the chat room. I would like the current members in a chatroom to persist even though a new user enters a room.

Here is the server side code:

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});
  });
});

Here is the angular controller using 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);
  })
}]);

And lastly the 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>

Answer 1

So I am pretty sure this is what is happening. Each user has its own socket connection but when a new user connects it broadcasts this message to everyone. Meaning it will reset the variables for everyone. Declare your variables that you need in the application outside the connection function.