CODEWITHSUNDEEP
node.jssocket.io
Rick
Rick

Reputation: 927

Dynamic rooms with Socket.io and Node

I'm trying to use the new "room" feature in Socket.io v.7 to create dynamic chat rooms, but I'm having problems getting static rooms to work in my example. Based on the URL the user selects they should end up in room1 or room2. Anything the user enters in the chat should be broadcast to users in the same room. I have 2 browsers (chrome & ff) each with a tab open to /room1 and /room2, however nothing I type in seems to be broadcast to the other tabs. What am I doing wrong?

Server code

var app = require('express').createServer();
var io = require("socket.io").listen(app);

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

    // join to room and save the room name
    socket.on('join room', function (room) {
        socket.set('room', room, function() { console.log('room ' + room + ' saved'); } );
        socket.join(room);
    })

    socket.on('message', function(data) {
        console.log("Client data: " + data);

        // lookup room and broadcast to that room
        socket.get('room', function(err, room) {
            //room example - https://github.com/learnboost/socket.io
            // neither method works for me
            socket.broadcast.to(room).emit('new fan');
            io.sockets.in(room).emit('new non-fan');
        })
    })
});

app.get('/room1', function(req, res){       
    res.render('example2-client.ejs', {layout:false});
});

app.get('/room2', function(req, res){       
    res.render('example2-client-2.ejs', {layout:false});
});

app.listen(4000);

Client code room 1

<!DOCTYPE HTML>
<html><head>
<title>Code review for Snipet</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:4000/socket.io/socket.io.js"></script>
<script>
$(document).ready(function() { 
    var socket = io.connect('http://localhost:4000');

    $("#msgbox").keypress( function(event) {
         if (event.which == '13') {
            sendmsg();
            event.preventDefault();
        }
    });     

    socket.on('connect', function (data) {
        socket.emit('join room', 'room1' );
    });

    socket.on('message', function (data) {
        add_message(data);
    });

    function add_message(m) {
        $("#chatlog").append(m);
        $("#chatlog").append("<BR>");
    }

    function sendmsg()
    {
        var r = $("#msgbox").val();
        socket.emit('message', r );
        add_message(r);
        $("#msgbox").val('');
    }       

});
</script>
</head>
<body>
<div id="chat" style="height: 200px; width: 200px; border: 1px solid grey;">
<div id="chatlog" style="height: 178px; width: 200px; overflow-y: scroll;"></div>
<input type="text" id="msgbox" style="margin-left: 2px; width: 193px;">
</div>
</body>
</html>

Client code 2

<!DOCTYPE HTML>
<html><head>
<title>Code review for Snipet</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:4000/socket.io/socket.io.js"></script>
<script>
$(document).ready(function() { 
    var socket = io.connect('http://localhost:4000');

    $("#msgbox").keypress( function(event) {
         if (event.which == '13') {
            sendmsg();
            event.preventDefault();
        }
    });     

    socket.on('connect', function (data) {
        socket.emit('join room', 'room2' );
    });

    socket.on('message', function (data) {
        add_message(data);
    });

    function add_message(m) {
        $("#chatlog").append(m);
        $("#chatlog").append("<BR>");
    }

    function sendmsg()
    {
        var r = $("#msgbox").val();
        socket.emit('message', r );
        add_message(r);
        $("#msgbox").val('');
    }       

});
</script>
</head>
<body>
<div id="chat" style="height: 200px; width: 200px; border: 1px solid grey;">
<div id="chatlog" style="height: 178px; width: 200px; overflow-y: scroll;"></div>
<input type="text" id="msgbox" style="margin-left: 2px; width: 193px;">
</div>
</body>
</html>

Upvotes: 23

Views: 38473

Answers (1)

Cris-O
Cris-O

Reputation: 5007

You don't seem to be listening to these events

socket.broadcast.to(room).emit('new fan');
io.sockets.in(room).emit('new non-fan');

on the client side you need:

socket.on('new fan', function (data) {
    console.log('new fan');
});

You're also not sending the message to the clients. Inside:

socket.on('message', function(data) { })

on the server, you need to do :

io.sockets.in(room).emit('message', data);

Upvotes: 35

Related Questions