在Socket.io中获取已连接的用户/客户端列表

She*_*ito 2 node.js express socket.io

我需要从socket.io获取连接的用户或客户端的列表以进行实时聊天。

连接的用户图像列表

我设法显示了连接到我的路由/ API(localhost:3003 / chat)的客户端列表。如图所示,将显示访问此路由的人(是否经过授权)。我的问题在于初始访问权限,或者如果您尝试刷新浏览器,客户端将看不到当前连接的用户或客户端连接的历史记录。

这是服务器端socket.io的示例代码,

 module.exports.initializeSocketIO = (io) => {
 io.on('connection', (socket) => { 
    socket.on('connectedUser', (users) =>{
        socket.name = users;
        io.emit('connectedUser', users);
        console.log(users + ' has joined the chat.');
    });

    socket.on('disconnect', (user) => {
        io.emit('disconnect', user);
        console.log(socket.name + ' has left the chat.');
    });

    socket.on('chatMessage', (from, msg) => {
        io.emit('chatMessage', from, msg);
        console.log('Message From: ' + from + '\n -' + msg);
    });

    socket.on('showTypingUser', (user) => {
        io.emit('showTypingUser', user);
    });
});
};
Run Code Online (Sandbox Code Playgroud)

这是我的客户端socket.io示例代码

var socket = io(); 

socket.on('connectedUser', function(users){
   var name = $('#currentUser').val();
   var me = $('#user').val(name);
   socket.name = users;
   if(users != me){
      $('#connectedUser').append('<tr><td>' + '<b>' + users + '</b>' + ' has 
      joined the discussion. </td></tr>' );
   }
});


socket.on('chatMessage', function(from, msg){
   var me = $('#user').val();
   var color = (from == me) ? 'green' : '#009afd';
   var from = (from == me) ? 'Me' : from;
   var date = new Date();
   if(from == "Me"){
      $('#messages').append('<div class="speech-bubble">'  + '<b style="color:' + color + '">' + from + ':</b> ' + msg + ' <span class="pull-right" style="color:gray">' + date.toLocaleString() + '</span>' +'</div>');
  } else {
     $('#messages').append('<div class="speech-bubble-reply">' +  '<b 
 style="color:' + color + '">' + from + ':</b> ' + msg + ' <span class="pull-right" style="color:gray">' + date.toLocaleString() + '</span>' +'</div>');
  }
});


socket.on('showTypingUser', function(user){
   var name = $('#currentUser').val();
   var me = $('#user').val(name);
   if(user != me) {
      $('#notifyUser').text(user + ' is typing ...');
   } 
   setTimeout(function(){ $('#notifyUser').text(''); }, 10000);;
});


socket.on('disconnect', function(user){
   var name = $('#currentUser').val(); 
   var me = $('#user').val(name);
   if(socket.name != name){
      $('#connectedUser').append('<tr><td>' + '<b>' + socket.name  + '</b>' + ' has left the discussion. </td></tr>' );
  }
 });


$(document).ready(function(){
   var name = $('#currentUser').val();
  $('#welcomeMessage').append('<div class="welcome-chat">Welcome to Entrenami Chat</div>')
  socket.emit('connectedUser', name);
});
Run Code Online (Sandbox Code Playgroud)

注意:我将Express用于我的路线和控制器,并将EJS用于我的视图。我有点卡在这里,因为我不知道在哪里可以找到解决问题的方法。

小智 5

io.engine.clientsCount 返回已连接用户的总数,您可以在用户连接时将其发送给客户端,如下所示:

io.on('connection', (socket) => {
   var total=io.engine.clientsCount;
   socket.emit('getCount',total)
});
Run Code Online (Sandbox Code Playgroud)