2011-07-27 16 views
21

Socket.io v.7の新しい「ルーム」機能を使用して動的チャットルームを作成しようとしていますが、私の例では静的ルームを動作させるのに問題があります。ユーザーが選択したURLに基​​づいて、それらはroom1またはroom2に終わるはずです。ユーザーがチャットに入力したものは、同じ部屋のユーザーにブロードキャストする必要があります。私は2つのブラウザ(chrome & ff)を持っていますが、それぞれtabは/ room1と/ room2に開いていますが、私が入力したものは何も他のタブには放送されていないようです。私は間違って何をしていますか?Socket.ioとNodeを持つダイナミックルーム

Serverコード

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

クライアントコード室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> 

クライアントコード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> 

答えて

34

あなたはbにいないようですクライアント側での電子これらのイベントを聴い

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

次のものが必要です。

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

ます。また、クライアントにメッセージを送信していません。 内側:サーバー上の

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

、あなたがする必要があります。

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

しかし私は、クライアントがsocket.on(「メッセージ」内のサーバーからのすべてのメッセージを受け取ることになるという、...関数? 実際に私はメッセージをクライアントに送信しています。上のサンプルでは、​​送信側のクライアントからメッセージを受け取り、部屋を探してsocket.broadcast.to(room).emit( 'someテキスト ') – Rick

+2

あなたのクライアントはsocket.on(' message '...)を聞いていますが、あなたのサーバは' message 'を出していません "io.sockets.in(room).emit( 'message'、data);"をサーバーコードに追加する必要があります。 –

+0

サーバにチャネル 'メッセージ'を追加することで作業しました。ありがとう。 – Rick

関連する問題