websocket 不同的聊天框显示
easuitab打开相同的表单，生成动态的div，根据divid提交不同的界面。
1.Open.jsp选择聊天成员后，动态生成组，传给后台
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@pagelanguage="java"import="com.web.po.User"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
Useru=(User)request.getSession().getAttribute("localUser");
StringuserName=u.getUsrName();
intuId=u.getId();
%>
<html>
<head>
<title>发送消息</title>
<scripttype="text/javascript"src="<%=basePath%>/js/Date.js"></script>
<scripttype="text/javascript"src="<%=basePath%>/js/easyui/jquery.min.js"></script>
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/easyui/bootstrap/easyui.css">
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/easyui/icon.css">
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/easyui/color.css">
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/easyui/demo.css">
<scripttype="text/javascript"src="<%=basePath%>js/easyui/jquery.min.js"></script>
<scripttype="text/javascript"src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
<scripttype="text/javascript">
varindex=0;
functionaddPanel(){
index++
varfromUserId=$("#fromUserId").val();
vartoUserId=$("#toId").val();
vartitle=$("#toName").val()+index;
if($('#myChatting').tabs('exists',title)){
$('#myChatting').tabs('select',title);
}else{
varurl="listChatUser.action?fromUserid="+fromUserId+"&toUserid="+toUserId;
window.open(url);
//varcontent='<iframescrolling="auto"frameborder="0"src="'+url+'"style="width:100%;height:100%;"></iframe>';
//$('#myChatting').tabs('add',{
//title:title,
//content:content,
//closable:true
//});
}
}
</script>
</head>
<body>
<h2>欢迎<%=userName%></h2>
<divid="myChatting"class="easyui-tabs"style="width:1000px;height:auto">
<divtitle="当前聊天"style="padding:10px">
当前用户Id<inputtype="text"name="fromUserId"id="fromUserId"value="<%=uId%>"><br>
发送给<inputtype="text"name="toName"id="toName"value="园园"><br>
<inputtype="text"name="toId"id="toId"value="2"><br>
<divstyle="margin:20px010px0;">
<ahref="#"class="easyui-linkbutton"onclick="addPanel()">Open</a>
</div>
</div>
<divtitle="聊天2"style="padding:10px">
<p>聊天2进行中</p>
</div>
</div>
</body>
</html>
2.window.jsp
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<%@pagelanguage="java"import="com.web.po.User"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
Useru=(User)request.getSession().getAttribute("localUser");
StringuserName=u.getUsrName();
%>
<html>
<head>
<title>发送消息</title>
<scripttype="text/javascript"src="<%=basePath%>/js/Date.js"></script>
<scripttype="text/javascript"src="<%=basePath%>/js/easyui/jquery.min.js"></script>
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/easyui/bootstrap/easyui.css">
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/easyui/icon.css">
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/easyui/color.css">
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/easyui/demo.css">
<scripttype="text/javascript"src="<%=basePath%>js/easyui/jquery.min.js"></script>
<scripttype="text/javascript"src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<scripttype="text/javascript">
varwebsocket=null;
if('WebSocket'inwindow){
websocket=newWebSocket("ws://localhost:8080/MvcChat/webSocketServer.action");
}
websocket.onopen=onOpen;
websocket.onmessage=onMessage;
websocket.onerror=onError;
websocket.onclose=onClose;
functiononOpen(openEvt){
//alert(openEvt.data);
}
functiononMessage(evt){
varmessage=evt.data;
vargetJson=message.substr(0,message.indexOf("}")+1);
vargroupName=eval(getJson);
varmsg=message.substr(message.indexOf("}")+1,message.length);
updateMessage(msg,groupName);
}
functiononError(){}
functiononClose(){}
functionupdateMessage(data,groupName){
//不要使用传值，因为界面有多个数据，ajax无法区分哪一个
varoldMessage=$("#"+groupName+"div[id='showMessage']").html();
varnewMessage=oldMessage+"<br>"+data;
alert(newMessage);
$("#"+groupName+"div[id='showMessage']").html(newMessage);
}
functiondoSend(){
if(websocket.readyState==websocket.OPEN){
varmsg=document.getElementById("inputMsg").value;
websocket.send(msg);//调用后台handleTextMessage方法
alert("发送成功!");
}else{
alert("连接失败!");
}
}
functionsendMessage(groupName){
varmessage=$("#"+groupName+"textarea[id='message']").val();
if(message==null||message==""||message==undefined){
alert("发送消息不能为空");
return;
}
varfromUserId=$("#"+groupName+"input[id='fromUserId']").val();
vartoUserIds="";
$("#"+groupName+"input[name='chatUserId']").each(function(){
if(toUserIds==""||toUserIds==null){
toUserIds=toUserIds+$(this).val();
}else{
toUserIds=toUserIds+","+$(this).val();
}
});
if(toUserIds==""){
alert("接受人员不能为空");
return;
}
//发送消息的同时，把自己也加进去
toUserIds=fromUserId+","+toUserIds;
$.ajax({
url:"<%=basePath%>/websocket/sendToMany.action",
method:"post",
data:"sendManyFrom="+fromUserId+"&sendToList="+toUserIds+"&message="+message+"&groupname="+groupName,
success:function(data){
vargroupName=eval(data);
//重新给form的group赋值
$("#"+groupName+"input[id='groupName']").val(groupName);
$("#"+groupName+"textarea[id='message']").val('')
}
}
);
}
</script>
<divid="${groupName}">
<inputtype="text"id="fromUserId"value="${fromUserId}"/>
<inputtype="text"id="toId"value="${toUserId}"/>
<inputtype="text"id="groupName"value="${groupName}"/>
<divid="Message"class="easyui-panel"title="聊天窗口"style="overflow-x:visible;width:705px;height:730px;split:true;overflow-y:visible">
<divclass="easyui-layout"style="width:700;height:700;split:true">
<divid="messageContent"class="easyui-layout"data-options="region:'north'"style="width:700px;height:530;split:true">
<divid="showMessage"data-options="region:'west'"style="width:550;height:530;split:true">
</div>
<divid="messageContent"data-options="region:'east'"style="width:150;height:530;split:true">
<c:forEachvar="user"items="${chattingUsers}">
${user.usrName}<inputtype="hidden"name="chatUserId"value="${user.id}">
<c:iftest="${user.onLine=='Y'}">
(在线)
</c:if>
<c:iftest="${user.onLine=='N'}">
(已下线)
</c:if>
</c:forEach>
</div>
</div>
<divid="inputMessage"data-options="region:'south'"style="width:700;height:170">
<textarearows="5"cols="95"id="message"name="message"></textarea>
<br/>
<buttononclick="sendMessage('${groupName}')">发送消息</button>
<buttononclick="closePannel()">退出聊天</button>
</div>
</div>
</div>
</div>
</body>
</html>