带有 Socket.io 和 Node 的动态房间 [英] Dynamic rooms with Socket.io and Node

查看：20
本文介绍了带有 Socket.io 和 Node 的动态房间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 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) {//加入房间并保存房间名称socket.on('加入房间'，功能(房间){socket.set('room', room, function() { console.log('room' + room + 'saved'); } );socket.join(房间);})socket.on('message', function(data) {console.log("客户端数据:" + data);//查找房间并广播到那个房间socket.get('room', function(err, room) {//房间示例 - https://github.com/learnboost/socket.io//两种方法都不适合我socket.broadcast.to(room).emit('新粉丝');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

<html><head><title>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><脚本>$(document).ready(function() {var socket = io.connect('http://localhost:4000');$("#msgbox").keypress(函数(事件){if (event.which == '13') {发送消息()；event.preventDefault();}});socket.on('connect', 函数(数据){socket.emit('加入房间', 'room1');});socket.on('message', function (data) {添加消息(数据)；});函数 add_message(m) {$("#chatlog").append(m);$("#chatlog").append("
");}函数 sendmsg(){var r = $("#msgbox").val();socket.emit('message', r);add_message(r);$("#msgbox").val('');}});<身体><div id="chat" style="height: 200px; width: 200px; border: 1px solid gray;"><div id="chatlog" style="height: 178px; width: 200px; overflow-y: scroll;"></div><input type="text" id="msgbox" style="margin-left: 2px; width: 193px;">

客户端代码 2

<html><head><title>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><脚本>$(document).ready(function() {var socket = io.connect('http://localhost:4000');$("#msgbox").keypress(函数(事件){if (event.which == '13') {发送消息()；event.preventDefault();}});socket.on('connect', 函数(数据){socket.emit('加入房间', 'room2');});socket.on('message', function (data) {添加消息(数据)；});函数 add_message(m) {$("#chatlog").append(m);$("#chatlog").append("
");}函数 sendmsg(){var r = $("#msgbox").val();socket.emit('message', r);add_message(r);$("#msgbox").val('');}});<身体><div id="chat" style="height: 200px; width: 200px; border: 1px solid gray;"><div id="chatlog" style="height: 178px; width: 200px; overflow-y: scroll;"></div><input type="text" id="msgbox" style="margin-left: 2px; width: 193px;">

解决方案

你似乎没有在听这些事件

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

在客户端，您需要:

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

您也没有向客户发送消息.内部:

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

在服务器上，你需要做:

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

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>

解决方案

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

这篇关于带有 Socket.io 和 Node 的动态房间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆