2013-10-09 5 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); 
    } 

}); 

그리고 당신의 클라이언트 코드 : 여기에 몇 가지 예제 코드입니다 서버에서 측면 후 삭제 비록 당신이 users.length에 의해 총에 연결된 사용자를 확보하려고하면

<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

안녕, 기억이 고려 배열을 필터링하기 전에 최대 인덱스 + 1을 제공하기 때문에이 경우 올바른 사용자 수 일 수도 있고 그렇지 않을 수도 있습니다. – vbrmnd

+0

어떻게 해결할 수 있습니까? 다른 방법이 있습니까? –

+0

여전히 클라이언트의 사용자를 업데이트하지 않으며 아무 것도 표시하지 않습니다. –

관련 문제