Node.js Socket.io - How to emit messages to socket rooms within another listener?

Question

I'm trying to emit messsage to specific rooms, once the "joinedRoom' listener is triggered by the client, the code works fine if I place my code outside the joinedRoom listeners, otherwise it does nothing.

Code:

app.get('/room/:room/user/:user', function(req, res){
    var room = {
        username: req.params.user,
        roomname: req.params.room
    };
    res.render('room', room);
});

var users  = {};

io.sockets.on('connection', function (socket) {
    socket.on('joinedRoom', function(roomData){
        socket.username = roomData.username;
        socket.room = roomData.roomname;

        console.log("Roomname: " + socket.room);
        console.log("Username: " + socket.username);

        socket.join(socket.room);
        socket.broadcast.to(socket.room).emit('newUser', socket.username);

        socket.on('disconnect', function(){
            socket.broadcast.emit('userLeft', socket.username);
            socket.leave(socket.room);

            console.log('Connection id: ' + socket.id);
        });
    });
});

Client code:

var socket, roomname, ioRoom;
var socket = io.connect('http://localhost:3000');

socket.on('enterRoom', function(roomname){
    console.log("ENTERED ROOM: " + roomname);
});

socket.on('newUser', function(username){
    pushUserName(username);
    pushUserStatus(username, ' has joined the room <br/>')
});

socket.on('newRoom', function(data){
    alert(data)
});

socket.on('userLeft', function(username){
    pushUserStatus(username, ' has left the room <br/>')
})

function pushUserName(username){
    var el = document.getElementById("username");
    el.innerHTML += username + '<br/>';
}

function pushUserStatus(username, message){
    var el = document.getElementById("joined");
    el.innerHTML += username + message;
}

Code the emits "joinedRoom" event:

doctype html
head
    title Sala #{roomname}

    script(src="https://cdn.socket.io/socket.io-1.4.5.js")
    script(type="text/javascript").
        var socket = io.connect('http://localhost:3000');
        var roomData = {
            roomname: '#{roomname}',
            username: '#{username}'
        }
        socket.emit('joinedRoom', roomData);

    script(src="../../../js/room.js")

  body
      p#joined
      h1 Room's name: #{roomname}

      h2 Your nickname: #{username}

      h2 Players:

      p#username.player-row

I saw the docs and some sample code and everything seems to be correct (when it comes simply to syntax) am I missing something simple here?

Thanks!

Answer 1

I think you need to register your disconnect event listener outside of your connection event listener.

Code:

app.get('/room/:room/user/:user', function(req, res){
    var room = {
        username: req.params.user,
        roomname: req.params.room
    };
    res.render('room', room);
});

var users  = {};

io.sockets.on('connection', function (socket) {
    socket.on('joinedRoom', function(roomData){
        socket.username = roomData.username;
        socket.room = roomData.roomname;

        console.log("Roomname: " + socket.room);
        console.log("Username: " + socket.username);

        socket.join(socket.room);
        socket.broadcast.to(socket.room).emit('newUser', socket.username);
    });
    socket.on('disconnect', function(){
        // need more logic here
    });
});

Answer 2

For those who might have a similar problem the code is mostly correct but I was missing this:

Instead of:

socket.emit('joinedRoom', roomData);

Should be:

socket.on('connect', function(){
    socket.emit('joinedRoom', roomData);
})

:)