2013-10-09 127 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

這仍然不會更新客戶端中的用戶並且什麼都不顯示。 –