2011-07-27 41 views
21

Estoy intentando usar la nueva función de "sala" en Socket.io v.7 para crear salas de chat dinámicas, pero estoy teniendo problemas para lograr que las habitaciones estáticas funcionen en mi ejemplo . Según la URL que el usuario seleccione, deberían terminar en room1 o room2. Todo lo que el usuario ingrese en el chat debe ser transmitido a los usuarios en la misma sala. Tengo 2 navegadores (cromo & ff) cada uno con una pestaña abierta a/room1 y/room2, sin embargo, nada de lo que escribo parece transmitirse a las otras pestañas. ¿Qué estoy haciendo mal?Salas dinámicas con Socket.io y Node

código de servidor

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

sala de código de cliente 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> 

El código de cliente 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> 

Respuesta

34

No pareces a b e escuchar a estos eventos

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

en el lado del cliente que necesita:

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

También estás no enviar el mensaje a los clientes. Interior:

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

en el servidor, que tiene que hacer:

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

pensé que los clientes gustaría recibir todos los mensajes desde el servidor en el socket.on ('mensaje', ... función? En realidad, estoy enviando el mensaje a los clientes. En el ejemplo anterior recibo el mensaje del cliente remitente, busco la habitación y trato de llamar a socket.broadcast.to (room) .emit ('some texto ') – Rick

+2

Sus clientes están escuchando socket.on (' mensaje '...) pero su servidor no está emitiendo' mensaje ' Debe agregar "io.sockets.in (room) .emit ('message', data);" al código de su servidor. –

+0

Agregando el canal 'mensaje' en el servidor funcionó. Gracias. – Rick

Cuestiones relacionadas