Question

我是nodejs-expressjs-socket.io的新手。我正在尝试在一个正在运行的socket.io实例中实现多个聊天室/通道。

服务器

var express     = require('express');
var app         = express();
var server      = require('http').createServer(app);
var io          = require('socket.io')(server);


app.set('port', process.env.PORT || 3000);
app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res){
   res.sendfile(__dirname + '/public/client.html'); 
});

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

    socket.on('auth-user', function(ud){    

    });

    socket.on('join-room', function(ud){
        console.log('User ' + ud.usr + ' joins in channel ' + ud.cid);
        socket.join(ud.cid);
        io.sockets.to(ud.cid).emit('update-ui',{usr:'Server', msgtype:'notification', msg: 'You have connected to chat'});
    });

    socket.on('leave-room', function(ud){

    });  

    socket.on('send-message', function(ud){
        console.log('User ' + ud.usr + ' sends a message to the channel ' + ud.cid);
        io.sockets.to(ud.cid).emit('update-ui', {usr:ud.usr, msgtype:'message', msg:ud.msg});
        console.log(io.sockets.adapter.rooms);
    });

    socket.on('disconnect', function(){

    });

});


server.listen(app.get('port'), function(){
    console.log('Application is listening to PORT ' + app.get('port')); 
});

客户端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <script src="/javascripts/chat.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css"></link>
    <link rel="stylesheet" href="/stylesheets/chat.css"></link>
    <script type="text/javascript">
         $(function() {
            $( "#tabs" ).tabs();
            $( '#cht-1' ).initChatbox({cid:1, chl:'Channel A'},'User1');
            $( '#cht-2' ).initChatbox({cid:2, chl:'Channel B'},'User2');
            $( '#cht-3' ).initChatbox({cid:3, chl:'Channel C'},'User3');
        });
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <div id="cht-1" style="border: 1px solid red; border-radius: 7px 7px 0px 0px; height: 500px; width: 300px;">

            </div>
        </div>
        <div id="tabs-2">
            <div id="cht-2" style="border: 1px solid green; border-radius: 7px 7px 0px 0px; height: 500px; width: 300px;">

            </div>    
        </div>
        <div id="tabs-3">
            <div id="cht-3" style="border: 1px solid blue; border-radius: 7px 7px 0px 0px; height: 500px; width: 300px;">

            </div>        
        </div>
    </div>

    <script type="text/html" id="chatui">
        <div id="chid-{cid}" class="chid">{cid}</div>
        <div id="chcontainer-{cid}" class="chcontainer">
            <table id="tblchatmsgs-{cid}" class="tblchatmsgs">
            </table>
        </div>
        <div id="chatinputs-{cid}" class="chatinputs"> 
            <input type="text" id="msgs-{cid}" class="msgs">
            <button id="btn-{cid}" class="btnSend">SEND</button>
        </div>  
    </script>

    <script type="text/html" id="gchatnotify">
        <tr id="trnotify-{cid}">
            <td>
                <div class="notifier">
                    <p id="notifymsg-{cid}" class="message">{gchat-message}</p>
                </div>
            </td>
        </tr>    
    </script>

    <script type="text/html" id="chatms">
        <tr id="trms-{cid}">
            <td>
                <div id="usericon-{cid}" class="usericon">
                    <img id="uavatar-{cid}" class="uavatar" alt="userimage" height="46px" width="46px" src="{avatar}">
                </div>
                <div id="chat-message-{cid}" class="chat-message">
                    <label id="uname">{username}</label>
                    <p id="imsg" class="message">{message}</p>
                    <label id="timestamp-{cid}" class="timestamp">{timesent}</label>
                </div>           
            </td>
        </tr>
    </script>
</body>
</html>

Chat.js

$.fn.initChatbox = function(channel, user)
{
    /*  UI Templates  */
    var chatui, chatnotifier, chatmsg;
    var btnsender, msginput, msgbox;    


    chatui      = $('#chatui').html().replace(/{cid}/ig, channel.cid);
    notifier    = $('#gchatnotify').html().replace(/{cid}/ig, channel.cid);
    chatmsg     = $('#chatms').html().replace(/{cid}/ig, channel.cid);

    /* Socket.io */
    var socket;

    btnsender   = '#btn-' + channel.cid;
    msginput    = '#msgs-' + channel.cid;
    msgbox      = '#tblchatmsgs-' + channel.cid;

    socket  = io.connect('http://localhost:3000');


    this.on('click', btnsender, function(){
        socket.emit('send-message',{usr:user, cid:channel.cid, msg:$(msginput).val()});
    });

    socket.on('connect', function(){
        socket.emit('join-room',{usr: user, cid: channel.cid});
    });

    socket.on('update-ui', function(sd){
        console.log(sd);
        if(sd.msgtype == 'notification'){
            $(msgbox).append(notifier.replace(/{gchat-message}/ig,sd.msg));
        } else {
            $(msgbox).append(chatmsg.replace(/{message}/ig,sd.msg));
        }
    });

    this.append(chatui);
};

这个问题是我继续收到我从频道/房间输入到我创建的其他频道的消息。我还检查了我已加入的房间的输出。创建。请参阅附件中的房间图片。请帮忙。或者如果我错过了一些零件，请妥善解释。提前谢谢。

一个socket.io实例中的多个ChatRooms / Channels

0 个答案: