一个socket.io实例中有多个ChatRooms / Channels
我是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); };
这个问题是我继续收到我从一个频道/房间input到我创build的其他频道的信息。 还检查了我已经join的房间的输出。 请参阅附件的房间图片。 请帮忙。 或者好心解释一下，如果我错过了一些部分。 提前致谢。