Node.js 和 Socket.io 创建房间

Posted

技术标签:

【中文标题】Node.js 和 Socket.io 创建房间【英文标题】：Node.js and Socket.io Creating Room 【发布时间】：2013-10-10 00:00:51 【问题描述】：

我可以寻求您的帮助吗？我的代码不适用于使用 socket.room 创建房间，首先我声明了var rooms = ['Lobby'];，我想创建房间并将创建的房间名称推送到rooms[]。我的目标是允许用户创建自己的房间并在可能的情况下将其删除。我使用了 Michael Mukhin here 的代码作为参考。

这是我的 server.js 的代码 

var redis = require('redis');
var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);
var publish = redis.createClient();
var subscribe = redis.createClient();

server.listen(8080);


app.get('/', function (req, res) 
  res.sendfile(__dirname + '/index.html');
);

var usernames = ;

var rooms = ['Lobby'];

io.sockets.on('connection', function (socket) 

    socket.on('adduser', function (username)
        socket.username = username;
        socket.room = 'Lobby';         
        usernames[username] = username;
        socket.join('Lobby');          
        subscribe.subscribe(socket.room);   
        socket.emit('updatechat', 'SERVER', 'you have connected to Lobby');
        socket.broadcast.to('Lobby').emit('updatechat', 'SERVER', username + ' has connected to this room');
        socket.emit('updaterooms', rooms, 'Lobby');
    );

    socket.on('create', function (room) 
        var room = 'test';
        rooms.push(room);
        );

    socket.on('sendchat', function (data) 

        io.sockets.in(socket.room).emit('updatechat', socket.username, data);
        if (socket.room === 'Lobby') 
            publish.publish('Lobby', data);
         else 
        publish.publish(socket.room, data);
        
    );

    socket.on('switchRoom', function(newroom)
        socket.leave(socket.room);
        socket.join(newroom);
        subscribe.subscribe(newroom);
        socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom);
        socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room');
        socket.room = newroom;
        socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room');
        socket.emit('updaterooms', rooms, newroom);
    );



    socket.on('disconnect', function()

        delete usernames[socket.username];
        io.sockets.emit('updateusers', usernames);
        socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
        socket.leave(socket.room);
    );
);

这是客户端 index.html 中的代码 我想创建一个房间并将其添加到rooms[] 的列表中。

<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    var socket = io.connect('http://localhost:8080');


    socket.on('connect', function()

        socket.emit('adduser', prompt("What's your name: "));
        test();
    );


        //this is my create room to be called when i click a button
        socket.on('createroom', function () 
            socket.emit('create', room);
        );




    socket.on('updatechat', function (username, data) 
        $('#conversation').append('<b>'+ username + ':</b> ' + data + '<br>');
    );


    socket.on('updaterooms', function (rooms, current_room) 
        $('#rooms').empty();
        $.each(rooms, function(key, value) 
            if(value == current_room)
                $('#rooms').append('<div>' + value + '</div>');
            
            else 
                $('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>');
            
        );
    );

    function switchRoom(room)
        socket.emit('switchRoom', room);
    


    $(function()
        $('#datasend').click( function() 
            var message = $('#data').val();
            $('#data').val('');
            socket.emit('sendchat', message);
        );


        $('#data').keypress(function(e) 
            if(e.which == 13) 
                $(this).blur();
                $('#datasend').focus().click();
            
        );
    );

</script>
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
    <b>ROOMS</b>
    <div id="rooms"></div>
</div>

<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
    <div id="conversation"></div>
    <input id="data" style="width:200px;" />
    <input type="button" id="datasend" value="send" />
</div>

请帮帮我，我已经阅读了 socket.io 文档。但我发现很难理解。我希望你们能帮助我。在此先感谢，很抱歉，但我仍在学习 socket.io 和 node.js。谢谢。

【问题讨论】：

您单击以创建新房间的按钮的代码在哪里？此外，socket.on('createroom', ...); 对我来说似乎很奇怪，因为服务器端你从不发出“createroom”。 我很难理解socket.io，先生，我应该修复哪一行？ 请参考我的回答:) 【参考方案1】：

这可能会有所帮助：

server.js（没有关于 redis 的代码）

var usernames = ;

var rooms = ['Lobby'];

io.sockets.on('connection', function(socket) 
    socket.on('adduser', function(username) 
        socket.username = username;
        socket.room = 'Lobby';
        usernames[username] = username;
        socket.join('Lobby');
        socket.emit('updatechat', 'SERVER', 'you have connected to Lobby');
        socket.broadcast.to('Lobby').emit('updatechat', 'SERVER', username + ' has connected to this room');
        socket.emit('updaterooms', rooms, 'Lobby');
    );

    socket.on('create', function(room) 
        rooms.push(room);
        socket.emit('updaterooms', rooms, socket.room);
    );

    socket.on('sendchat', function(data) 
        io.sockets["in"](socket.room).emit('updatechat', socket.username, data);
    );

    socket.on('switchRoom', function(newroom) 
        var oldroom;
        oldroom = socket.room;
        socket.leave(socket.room);
        socket.join(newroom);
        socket.emit('updatechat', 'SERVER', 'you have connected to ' + newroom);
        socket.broadcast.to(oldroom).emit('updatechat', 'SERVER', socket.username + ' has left this room');
        socket.room = newroom;
        socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username + ' has joined this room');
        socket.emit('updaterooms', rooms, newroom);
    );

    socket.on('disconnect', function() 
        delete usernames[socket.username];
        io.sockets.emit('updateusers', usernames);
        socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
        socket.leave(socket.room);
    );
 );

index.html

<head>
... // your other code
<script>
var socket = io.connect('http://localhost:8000');

socket.on('connect', function()
    socket.emit('adduser', prompt("What's your name: "));
);

socket.on('updatechat', function (username, data) 
    $('#conversation').append('<b>'+ username + ':</b> ' + data + '<br>');
);


socket.on('updaterooms', function (rooms, current_room) 
    $('#rooms').empty();
    $.each(rooms, function(key, value) 
        if(value == current_room)
            $('#rooms').append('<div>' + value + '</div>');
        
        else 
            $('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>');
        
    );
);

function switchRoom(room)
    socket.emit('switchRoom', room);


$(function()
    $('#datasend').click( function() 
        var message = $('#data').val();
        $('#data').val('');
        socket.emit('sendchat', message);
    );

    $('#data').keypress(function(e) 
        if(e.which == 13) 
            $(this).blur();
            $('#datasend').focus().click();
        
    );

    $('#roombutton').click(function()
        var name = $('#roomname').val();
        $('#roomname').val('');
        socket.emit('create', name)
    );
);

</script>
</head>
<body>
    <div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
        <b>ROOMS</b>
        <div id="rooms"></div>
    </div>

    <div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
        <div id="conversation"></div>
        <input id="data" style="width:200px;" />
        <input type="button" id="datasend" value="send" />
    </div>

   <div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
       <div id="room creation"></div>
       <input id="roomname" style="width:200px;" />
        <input type="button" id="roombutton" value="create room" />
   </div>
   ... // the rest of your page
</body>

【讨论】：

谢谢 sgwilly。我前一阵子忘记检查***。我试过你的代码，但创建房间没有显示>。 嗨@sgwilly你能帮我理解io.sockets.emit('updateusers', usernames);在 socket.on('disconnect', function() );因为没有任何 io.sockets.on('updateusers', function());在客户端代码中 我想您可能希望将socket.broadcast.emit 添加到socket.on('create', function(room) ... ，以便在创建新房间后通知其他客户。

以上是关于Node.js 和 Socket.io 创建房间的主要内容，如果未能解决你的问题，请参考以下文章

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

Socket.io 中的动态房间

Socket.io 广播到房间不工作

node.js socket.io 应用程序 - 如何将某人踢出聊天室？

Socket.io 不会在断开连接时向房间发送消息

socket.io 中最大同时打开的房间