2013-10-09 82 views
3

我在socket.io客户端遇到了问题,因为我无法在客户端显示所有用户的用户名列表。我只是在socket.io新,我知道如何在服务器端的代码。我在客户端编程中遇到困难。我只想做的是在我的client.html <div id="users"></div>中显示连接用户的用户名。[Socket.io/Node.js]获取连接用户到客户端的列表

下面是我的一些代码server.js

var users = []; 

app.get('/', function (req, res) { 
    res.sendfile(__dirname + '/index.html'); 
}); 

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

    socket.on('adduser', function (user) { 
     socket.user = user; 
     users[user] = user; 
     console.log(users); 
    }); 

    socket.on('disconnect', function() { 
     console.log('User: ' + users[socket.user] + ' has disconnected'); 
     delete users[socket.user]; 
     console.log(users) 
    }); 

    socket.on('update', function() { 
     users[user] = user; 
     console.log('Current users: ', users); 
    }); 
}); 
}); 

这里是我的简单client.html的用户名接入到阵列提前users[]

<html> 
<script src="/socket.io/socket.io.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
    var socket = io.connect('http://localhost:8080'); 

socket.on('connect', function(){ 
     socket.emit('adduser', prompt("What's your name?")); 

</script> 
<div style="float:left;width:150px;border-right:2px solid black;height:510px;padding:10px;overflow:scroll-y;text-align:center;"> 
    <b>Users</b> 
    <div id="users"></div> 
</div> 
</html> 

谢谢。 :)

回答

5

最好的办法是在播放器连接或断开连接时向客户端发回用户列表。下面是一些示例代码:

var users = []; 

app.get('/', function (req, res) { 

res.sendfile(__dirname + '/test.html'); 
    }); 

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

    socket.on('adduser', function (user) { 
     socket.user = user; 
     users.push(user); 
     updateClients(); 
    }); 

    socket.on('disconnect', function() { 
     for(var i=0; i<users.length; i++) { 
      if(users[i] == socket.user) { 
       delete users[users[i]]; 
      } 
     } 
     updateClients(); 
    }); 

    function updateClients() { 
     io.sockets.emit('update', users); 
    } 

}); 

而在你的客户端代码:

<script src="/socket.io/socket.io.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
    var socket = io.connect('http://localhost:8080'); 

    socket.on('connect', function(){ 
     socket.emit('adduser', prompt("What's your name?")); 
    }); 

    var userList = []; 

    socket.on('update', function (users){ 
     userList = users; 
     $('#user').empty(); 
     for(var i=0; i<userList.length; i++) { 
      $('#user').append("<h1>" + userList[i] + "</h1>"); 
     } 
    }); 
</script> 
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;"> 
    <b>Users</b> 
    <div id="users"> 
     <p id="user"></p> 
    </div> 
</div> 
+0

嗨,还记得虽然,在服务器端删除后,如果您尝试通过users.length获得总连接的用户,可以考虑过滤数组之前,因为它会给出最大索引+ 1,在这种情况下可能是也可能不是正确的用户数。 – vbrmnd

+0

我们该如何解决它?有没有其他方法? –

+0

这仍然不会更新客户端中的用户并且什么都不显示。 –

相关问题