带有 Socket.io 和 Node 的动态房间

Posted

技术标签:

【中文标题】带有 Socket.io 和 Node 的动态房间【英文标题】:Dynamic rooms with Socket.io and Node 【发布时间】:2011-10-14 08:11:35 【问题描述】:

我正在尝试使用 Socket.io v.7 中的新“房间”功能来创建动态聊天室,但在我的示例中让静态房间工作时遇到了问题。根据用户选择的 URL,他们最终应该在 room1 或 room2 中。用户在聊天中输入的任何内容都应广播给同一房间的用户。我有 2 个浏览器(chrome 和 ff),每个浏览器都有一个打开到 /room1 和 /room2 的选项卡,但是我输入的任何内容似乎都没有广播到其他选项卡。我做错了什么?

服务器代码

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> 

【问题讨论】:

【参考方案1】:

你似乎没有在听这些事件

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

【讨论】:

我认为客户端会在 socket.on('message',... 函数中接收来自服务器的所有消息?实际上我正在向客户端发送消息。在上面的示例中,我'正在从发送客户端获取消息,查找房间并尝试调用 socket.broadcast.to(room).emit('some text') 您的客户端正在监听 socket.on('message'...) 但您的服务器没有发出 'message' 您需要添加“io.sockets.in(room).emit( '消息',数据);"到你的服务器代码。

以上是关于带有 Socket.io 和 Node 的动态房间的主要内容,如果未能解决你的问题,请参考以下文章

带有 Node.js 的 Socket.io

Node.js 和 Socket.io 创建房间

socket.io 与私人房间聊天

Node.js 库“Socket.IO”中“房间”的安全性

我可以在 socket.io 的命名空间中使用房间吗

socket.io 手动将用户添加到房间(node.js)