JSP+Nodejs+Socket.IO 聊天室

前端：JSP+tomcat

聊天服务器：Nodejs自带服务器

通信组件：Socket.io

这个聊天室，实现群组聊天和私聊。

效果图：

nodejs代码

/** * Created by lkt on 15-4-17. */var room = require("../modules/entity/Room.js")function chatSocket(){    return this;}module.exports = chatSocket;chatSocket.Start = function Start(io){    var rooms = new Array();    var userList = new Array();    var userSocketMap = {};    io.sockets.on('connection',function(socket){        //socket.emit('conn',{'value':'hello,welcome!','user':'System'});        //接收用户修改姓名        socket.on('setName',function(data){            var index = userList.indexOf(data.name);            if(index==-1){                userList.push(data.name);                userSocketMap[data.name] = socket;                socket.emit('setName',{'value':'欢迎您! '+data.name,'user':'System','type':'new'});            }else{                socket.emit('setName',{'value':'昵称 '+data.name+' 已经存在！','user':'System','type':'rep'});            }        });        //私聊        socket.on('pchat',function(data){            var v = data.value;            var tname = v.substring(v.indexOf('@')+1,v.indexOf(']'));            console.log(tname);            var s = userSocketMap[tname];            s.emit('pchat',{value:data.value,fname:data.fname});        });        //给用户发送房间信息        socket.emit('rooms',{rooms:rooms});        //接收用户创建房间的指令        socket.on('cRoom',function(data){            var repCreate=false;            //判断房间是否存在            rooms.forEach(function(r){                if(r.name==data.name){                    repCreate = true;                }            });            if(!repCreate){                leaveMyInRoom(data,socket,rooms);                var r = new room(data.name,data.ho);                rooms.push(r);                socket.join(data.name);                socket.emit('rooms',{rooms:rooms,room:data.name,value:'房间 ['+data.name+'] 创建成功!','user':'System'});                //给除了自己以外的客户端广播消息                socket.broadcast.emit('refRooms',{rooms:rooms});            }else{                socket.emit('rooms',{rooms:rooms,room:data.name,value:'房间 ['+data.name+'] 已经存在!','user':'System'});            }            //        });        socket.on('say',function(data){            var rname = data.room;            var ruser = data.user;            var rsay = data.value;            io.in(rname).emit('say',{value:rsay,'user':ruser});            //socket.emit('say',{value:rsay,'user':ruser});        });        socket.on('leaveRoom',function(data){            console.log(data);            leaveMyInRoom(data,socket,rooms);            var index = userList.indexOf(data.user);            if(index!=-1){                userList.splice(index,1);            }            socket.broadcast.emit('say',{value:' ['+data.user+']离开了房间!','user':'System'});            io.emit('refRooms',{rooms:rooms});        });        socket.on('joinRoom',function(data){            //是否重复加入            var repJoin = false;            leaveMyInRoom(data,socket,rooms);            rooms.forEach(function(r){                if(r.name==data.room){                    //repJoin = r.getUsers().contains(data.name);                    repJoin= r.userContains(data.user);                    if(!repJoin)                        r.addUser(data.user);                }            });            if(!repJoin){                socket.join(data.room);                socket.emit('say',{value:'欢迎加入 ['+data.room+'] 房间!','user':'System'});                socket.broadcast.emit('say',{value:'欢迎 ['+data.user+']加入房间!','user':'System'});                io.emit('refRooms',{rooms:rooms});            }else{                socket.emit('say',{value:'您已经在 ['+data.room+'] 房间!','user':'System'});            }        });        socket.on('disconnect',function(socket){            //console.log(socket.);        });    });}function leaveMyInRoom(data,socket,rooms){    //记录房间用户为0的序号    var delRoom = -1;    var index = 0;    if(data.currRoom!='无'){        socket.leave(data.currRoom);        rooms.forEach(function(r){            if(r.name==data.currRoom){                r.removeUser(data.user);                if(r.getUsers().length==0){                    delRoom = index;                }            }            index++;        });    }    if(delRoom!=-1){        rooms.splice(delRoom,1);    }}

JSP代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>聊天室</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel='stylesheet' href='bootstrap-3.2.0-dist/css/bootstrap.min.css' /><link rel='stylesheet'href='bootstrap-3.2.0-dist/css/bootstrap-theme.min.css' /></head><body><div class="container"><div class="row"><div class="col-md-4"><div class="panel panel-default"><div class="panel-heading"><div class="input-group input-group-sm"><span class="input-group-addon">房间</span> <input id="roomName"type="text" class="form-control" placeholder="创建房间"> <spanclass="input-group-btn"><button class="btn btn-default" onclick="createRoom()"type="button">确认</button></span></div></div><table id="rooms" class="table"><tr><th>序号</th><th>房间名</th><th>人数</th><th>房主</th><th>加入</th></tr></table></div></div><div class="col-md-5"><div class="panel panel-default"style="margin-left: auto; margin-right: auto;"><div class="panel-heading"><div id="userDiv" class="input-group input-group-sm"><span id="rTxt" class="input-group-addon">聊天室[]</span> <inputid="username" type="text" class="form-control"placeholder="请输入昵称"> <span class="input-group-btn"><button id="btnNC" class="btn btn-default" onclick="setName()"type="button">确认</button></span></div><div id="headDiv"style="display: none; margin-left: auto; margin-right: auto;">欢迎您[]--当前房间[<span id='headRoomName'></span>]</div></div><div id="chat" class="panel-body"style="height: 500px; overflow: auto;"></div><div class="panel-footer"><div class="input-group input-group-lg"><input type="text" id="sayTxt" class="form-control"> <spanclass="input-group-btn"><button class="btn btn-default" onclick="say()" type="button">发送</button></span></div></div></div></div><div class="col-md-3"><div class="panel panel-default"><div class="panel-heading">房间成员</div><table id="users" class="table"><tr><th>序号</th><th>昵称</th><th>私聊</th></tr></table></div></div></div></div></body><script type="text/javascript" src="lib/jquery-1.9.1.js"></script><script type="text/javascript" src="lib/socket.io-client/socket.io.js"></script><script type="text/javascript"src="bootstrap-3.2.0-dist/js/bootstrap.js"></script><script type="text/javascript">var socket = io.connect("http://localhost:3001");var currRoom = null;var currUser = null;var privateChat = null;/* socket.on('conn',function(data){writeData(data.value,data.user);}); */var map = {};socket.on('rooms',function(data){rooms(data.rooms);var v = data.room==undefined?"无":data.room;currRoom = v;$("#headRoomName").html(currRoom);if(data.value==undefined)return;writeData(data.value,data.user);userList(data.rooms);});socket.on('refRooms',function(data){rooms(data.rooms);userList(data.rooms);});socket.on('say',function(data){writeData(data.value,data.user);});socket.on('setName',function(data){if(data.type=="new"){currUser = $("#username").val();$("#userDiv").hide();$("#headDiv").show();$("#headDiv").html("欢迎您["+currUser+"]--当前房间[<span id='headRoomName'>"+currRoom+"</span>]");}writeData(data.value,data.user);});socket.on('pchat',function(data){writeData(data.value,data.fname);});//设置名称function setName(){var name = $("#username").val();socket.emit('setName',{name:name});}function writeData(value,user){var dir = "";var type = "";var head = "https://gravatar.com/avatar/8b13de3ced1141b167c7ccc0b78ce872?s=50";if(user=="System"){dir = "pull-left";head = "https://gravatar.com/avatar/8b13de3ced1141b167c7ccc0b78ce871?s=50";type = "alert alert-warning";}else if(user==currUser){dir = "pull-right";type = "alert alert-info";}else{dir = "pull-left";type = "alert alert-success";}var s="<div class=\"media\">"+  "<a class=\""+dir+"\" href=\"#\">"+    "<img class=\"media-object img-rounded\" src=\""+head+"\"  alt='"+user+"'>"+  "</a>"+  "<div class=\"media-body\">"+    "<div class=\""+type+"\">"+value+"</div>"+  "</div>"+"</div>";$("#chat").html(s+$("#chat").html());}//获取所有房间function rooms(data){var th = "<tr><th>序号</th><th>房间名</th><th>人数</th><th>房主</th><th>加入</th></tr>";$("#rooms tbody").html(th);for(var i=0;i<data.length;i++){var r = data[i];var tr = "<tr><td>"+(i+1)+"</td><td>"+r.name+"</td><td>"+r.users.length+"</td><td>"+r.ho+"</td><td><button class=\"btn btn-default\" onclick=\"joinRoom('"+r.name+"')\" type=\"button\">Go!</button></td></tr>";var tableHtml = $("#rooms tbody").html();        tableHtml += tr;        $("#rooms tbody").html(tableHtml);}}//创建房间function createRoom(){var rname = $("#roomName").val();var name = $("#username").val();currUser = name;//currRoom = rname;if(name==""||name==null){alert("请输入用户名");return;}socket.emit('cRoom',{name:rname,ho:name,currRoom:currRoom});}function say(){var say = $("#sayTxt").val();if(currRoom==null||currRoom=="无"){alert("请加入房间！");return;}if(currUser==null){alert("请输入用户名!");return;}var pindex = say.indexOf('@');if(pindex==1){socket.emit('pchat',{value:say,fname:currUser});}else{socket.emit('say',{user:currUser,value:say,room:currRoom});}$("#sayTxt").val("");}function joinRoom(room){var name = $("#username").val();if(room==currRoom){alert("您已经在该房间了！")return;}socket.emit('joinRoom',{room:room,currRoom:currRoom,user:name});currRoom = room;$("#headRoomName").html(room);}function pc(tname){if(tname==currUser){alert("无法私聊自己！");return;}$("#sayTxt").val("[@"+tname+"]");}function userList(rooms){var rs =null;for(var i=0;i<rooms.length;i++){if(rooms[i].name==currRoom){rs = rooms[i];break;}}var th = "<tr><th>序号</th><th>昵称</th><th>私聊</th></tr>";$("#users tbody").html(th);if(rs==null)return;for(var i=0;i<rs.users.length;i++){var r = rs.users[i];var tr = "<tr><td>"+(i+1)+"</td><td>"+r+"</td>"+  "<td><button class=\"btn btn-default\" onclick=\"pc('"+r+"')\" >@!</button></td>"+ "</tr>";var tableHtml = $("#users tbody").html();        tableHtml += tr;        $("#users tbody").html(tableHtml);}}$(window).bind('beforeunload',function(){socket.emit('leaveRoom',{currRoom:currRoom,user:currUser});return "确定离开页面";})</script></html>

全部代码：

点击打开链接