基于websocket的多人页面聊天室

这是一个简单的页面聊天室。关于websocket是什么，看看这篇回答吧，要知道它是一个持久化的协议。

在项目中登录注册我就不讲了，直接从聊天室开始吧。

页面js

var socket =null;
var user =null;
function parseObj(strData){//change string to obj
return (new Function( "return " + strData ))();
};
//dbclick to kick
function userdbClick(obj){
if(user.type!=""&&user.type=="1"){
socket.send("kick#"+$(obj).attr("id"));
}else{
alert("You can`t kick him/her");
}
};
//if browser supports WebSocket
if (!window.WebSocket) {
alert("WebSocket not supported by this browser!");
}
$(function(){
if('${user}'==""){
alert("please login in ");
window.location.href="login.jsp";
}else{
user = eval('(' + '${user}' + ')');
$("#myname").text(user.name);
var myt;
if(user.type==1){
myt="Admin";
}else{
myt="User";
}
$("#mytype").text(myt);
//create socket object
socket = new WebSocket("ws://"+ window.location.host+"/${pageContext.request.contextPath}/chat");
socket.onopen = function() {
$("#showMsg").append("Connection Successful...<br/>");
socket.send("add#"+user.id);
};
socket.onmessage = function(message) {
var data=parseObj(message.data);
//if have been kicked ,goto login.jsp
if(typeof(data.type)!= "undefined"){
if(data.type=="kick"){
alert(data.message);
window.location.href="login.jsp";
return;
}
}
//show the msg to screen
$("#showMsg").append("<span style='display:block'>"+data.message+"</span>");
//update the user list while receive the msg from server
var users=data.users;
if(typeof(users)!= "undefined"){
$("#users").empty();
$("#users").append("<option value='0'>all</option>");
$("#userlist").empty();
$.each( users, function(i, n){
if(n.id==user.id){
}else{
$("#users").append("<option value='"+n.id+"'>"+n.name+"</option>");
}
var t=n.type==1;
if(n.id==user.id){
alert("<c:if test='"+n.type+"==1'>A--</c:if>");
$("#userlist").append("<p id='"+n.id+"'  class='my'><c:choose><c:when test='"+t+"'>A--</c:when><c:otherwise>U--</c:otherwise></c:choose>"+n.name+"</p>");
}else{
$("#userlist").append("<p id='"+n.id+"' ondblclick='userdbClick(this);'><c:choose><c:when test='"+t+"'>A--</c:when><c:otherwise>U--</c:otherwise></c:choose>"+n.name+"</p>");
}
});
}
};
//when leave the page
socket.onclose = function(){
<%session.setAttribute("user","");%>
socket.send('leave#');
window.location.href="login.jsp";
};
//when error
socket.onerror = function() {
alert("error");
};
//send msg to others or only one
$("#sendButton").click(function() {
if($("#users").val()!=0){
socket.send("sendone#"+$("#msg").val()+"#"+$("#users").val());
}else{
socket.send("sendall#"+$("#msg").val());
}
$("#msg").val("");
});
//leave the chat room
$("#leaveButton").click(function(){
window.location.href="login.jsp";
socket.send('leave');
});
//change the user state
$("#state").change(function(){
var state=$("#state").val();
socket.send("state#"+state);
});
}
});

server java

这个类中的方法基本与js中的对应，这个OnMessage方法主要是根据页面传过来的数据进行分类处理

@OnMessage
public void onMessage(String unscrambledWord, Session session, EndpointConfig config){
String[] str=unscrambledWord.split("#");
User user=getUserBySession(session);
if("leave".equals(str[0])){//user leave
user.getHttpSession().setAttribute("user", "");
}else if("sendone".equals(str[0])){//send one user
JSONObject json=new JSONObject();
json.put("message", "["+new Date()+"]"+user.getName()+" send to "+userList.get(str[2]).getName()+"<br/>"+str[1]);
broadcastToOne(json,str[2],user);
}else if("sendall".equals(str[0])){//send all users
JSONObject json=new JSONObject();
json.put("message", "["+new Date()+"]"+user.getName()+"<br/>"+str[1]);
broadcastAllUser(json);
}else if("add".equals(str[0])){//new user come in
userList.get(str[1]).setSession(session);
JSONObject json=new JSONObject();
String welcome="*****welcome,"+userList.get(str[1]).getName()+"! *****";
json.put("message", welcome);
json.put("users", getUserList());
broadcastAllUser(json);
}else if("state".equals(str[0])){//change user`s state
user.setState(str[1]);
}else if("kick".equals(str[0])){//kick user
if(user.getType().equals("1")){
String outid=str[1];
JSONObject json=new JSONObject();
json.put("message", "You been kicked !");
json.put("type", "kick");
user.getHttpSession().setAttribute("user", "");
kick(json,outid);
}
}else{
JSONObject json=new JSONObject();
json.put("message", user.getName()+"   "+new Date()+unscrambledWord);
broadcastAllUser(json);
}

}

demo 下载地址：http://download.csdn.net/detail/wujiaoyan0423/9506595