web-dev-qa-db-fra.com

Salles dynamiques avec Socket.io et Node

J'essaie d'utiliser la nouvelle fonctionnalité "room" de Socket.io v.7 pour créer des salles de chat dynamiques, mais j'ai des problèmes pour que les salles statiques fonctionnent dans mon exemple. En fonction de l'URL que l'utilisateur sélectionne, il doit se retrouver dans la salle 1 ou la salle 2. Tout ce que l'utilisateur entre dans le chat doit être diffusé aux utilisateurs dans la même pièce. J'ai 2 navigateurs (chrome et ff) chacun avec un onglet ouvert sur/room1 et/room2, mais rien que je tape ne semble être diffusé aux autres onglets. Qu'est-ce que je fais mal?

Code serveur

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

Code client salle 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>

Code client 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>
node.jssocket.io
23
Rick

Vous ne semblez pas écouter ces événements

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

du côté client, vous avez besoin de:

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

Vous n'envoyez pas non plus le message aux clients. À l'intérieur:

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

sur le serveur, vous devez faire:

io.sockets.in(room).emit('message', data);
35
Cris-O