websocket 不同的聊天框显示

easui tab 打开相同的表单，生成动态的 div，根据div id 提交不同的界面。

1.Open.jsp 选择聊天成员后，动态生成组，传给后台

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ page language="java" import="com.web.po.User" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

User u =(User)request.getSession().getAttribute("localUser");
String userName= u.getUsrName();
int uId= u.getId();
%>

<html>
<head>
<title>发送消息</title>
<script type="text/javascript" src="<%=basePath %>/js/Date.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/easyui/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/color.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css">
<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>

<script type="text/javascript">
var index = 0;
function addPanel(){
index++
var fromUserId = $("#fromUserId").val();
var toUserId = $("#toId").val();
var title = $("#toName").val()+index;
if ($('#myChatting').tabs('exists', title)){
        $('#myChatting').tabs('select', title);

    } else {
    var url="listChatUser.action?fromUserId="+fromUserId+"&toUserId="+toUserId;
    window.open(url);
//         var content = '<iframe scrolling="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>
<div id="myChatting" class="easyui-tabs" style="width:1000px;height:auto">
<div title="当前聊天" style="padding:10px">
    当前用户Id<input type="text" name="fromUserId" id="fromUserId" value="<%=uId %>" ><br>
发送给 <input type="text" name="toName" id="toName" value="园园" ><br>
   <input type="text" name="toId" id="toId" value="2" > <br>
<div style="margin:20px 0 10px 0;">
<a href="#" class="easyui-linkbutton" onclick="addPanel()">Open</a>
</div>

   </div>

   <div title="聊天2" style="padding:10px">

   <p>聊天2进行中</p>


   </div>

</div>

</body>
</html>

2. window.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" import="com.web.po.User" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

User u =(User)request.getSession().getAttribute("localUser");
String userName= u.getUsrName();
%>

<html>
<head>
<title>发送消息</title>
<script type="text/javascript" src="<%=basePath %>/js/Date.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/easyui/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/color.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css">
<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<script type="text/javascript">
var websocket = null;
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/MvcChat/webSocketServer.action");
}
websocket.onopen = onOpen;
websocket.onmessage = onMessage;
websocket.onerror = onError;
websocket.onclose = onClose;

function onOpen(openEvt) {
//alert(openEvt.data);
}

function onMessage(evt) {
var message= evt.data;
var getJson = message.substr(0, message.indexOf("}")+1);
var groupName= eval(getJson);
var msg = message.substr( message.indexOf("}")+1,message.length);
updateMessage(msg,groupName);

}
function onError() {}
function onClose() {}

function updateMessage(data,groupName){
//不要使用传值，因为界面有多个数据，ajax无法区分哪一个

var oldMessage=$("#"+groupName+" div[id='showMessage']").html();
var newMessage = oldMessage+"<br>"+data;
alert(newMessage);
$("#"+groupName+" div[id='showMessage']").html(newMessage);
}

function doSend() {
if (websocket.readyState == websocket.OPEN) {
            var msg = document.getElementById("inputMsg").value;
            websocket.send(msg);//调用后台handleTextMessage方法
            alert("发送成功!");
        } else {
        alert("连接失败!");
        }
}

function sendMessage(groupName){

var message = $("#"+groupName+" textarea[id='message']").val();

if(message==null || message=="" || message==undefined){
alert("发送消息不能为空");
return;
}
var fromUserId = $("#"+groupName+" input[id='fromUserId']").val();

var toUserIds = "";
$("#"+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){
    var groupName=eval(data);
    //重新给form的group赋值
    $("#"+groupName+" input[id='groupName']").val(groupName);
    $("#"+groupName+" textarea[id='message']").val('')
    }
}
);

}

</script>

<div id="${groupName}" >

    <input type="text" id="fromUserId" value="${fromUserId }" />
    <input type="text" id="toId" value="${toUserId }" />
    <input type="text" id="groupName" value="${groupName}"/>
      <div id="Message" class="easyui-panel" title="聊天窗口" style="overflow-x:visible;width:705px;height:730px; split:true;overflow-y:visible">
<div class="easyui-layout" style="width:700;height:700; split:true">
    <div id="messageContent" class="easyui-layout" data-options="region:'north'" style="width:700px;height:530 ;split:true">

      <div id="showMessage" data-options="region:'west'" style="width:550;height:530;split:true">

      </div>


      <div id="messageContent" data-options="region:'east'" style="width:150;height:530;split:true">
      <c:forEach var="user" items="${chattingUsers}" >
           ${user.usrName } <input type="hidden" name="chatUserId" value="${user.id }" >
              <c:if test="${user.onLine=='Y' }" >
               (在线)
              </c:if>
             <c:if test="${user.onLine=='N' }" >
               (已下线)
              </c:if>
      </c:forEach>

      </div>
    </div>
<div id="inputMessage" data-options="region:'south'" style="width:700;height:170">
    <textarea rows="5" cols="95" id="message" name="message" ></textarea>
    <br/>
    <button onclick="sendMessage('${groupName}')" >发送消息</button>      
    <button onclick="closePannel()" >退出聊天</button>
</div>

</div>
</div>

</div>
</body>
</html>

websocket 不同的聊天框显示

猜你喜欢