Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

[Socket.io/Node.js]Retrieving list of connected users to the client

i'm having a problem in socket.io client, because i can't show the list of all the users username in my client. I'm just new in socket.io and i know how to code in the server side. I'm having difficulty in the client side programming. All i just want to do is to show the connected users username in my client.html <div id="users"></div>.

Here is some of my code in 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);
    });
});
});

Here is my simple client.html to insert the username to the array 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>

Thanks in advance. :)

like image 742
Joenel de Asis Avatar asked Oct 09 '13 08:10

Joenel de Asis


1 Answers

Your best bet is to emit back to the clients the user list when player connects or disconnects. Here is some example code:

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

});

And in your Client code:

<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>
like image 154
theflamingskunk Avatar answered Sep 18 '22 00:09

theflamingskunk