`

websocket 不同的聊天框显示

    博客分类：
  • JS
 
阅读更多
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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="closePannel()" >退出聊天</button>
</div>

</div>
  </div>
 
  </div>
</body>
</html>
分享到：
| hadoop fs -put 失败
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    微信小程序—基于websocket的聊天框

    在本项目"微信小程序—基于websocket的聊天框"中，开发者利用了WebSocket技术来构建一个实时的一对一聊天功能。 WebSocket是一种在客户端和服务器之间建立长连接的协议，它提供了全双工通信，允许数据在两个方向上...

    UNIAPP(Websocket)聊天室

    在“UNIAPP(Websocket)聊天室”项目中，uniapp负责前端界面的展示和用户交互，通过调用Websocket API与服务器建立连接，发送和接收聊天消息，同时处理用户的输入和消息显示。 【Spring Boot】 Spring Boot是Java...

    websocket简易聊天室

    添加房间概念，让不同用户可以加入不同的聊天室；以及支持表情、图片等富文本消息。同时，对于大型聊天室，还需要考虑负载均衡和高可用性，可能需要用到集群部署和消息队列等技术。 总的来说，"websocket简易聊天室...

    webSocket实时聊天模板+回复功能源码

    7. CSS：`css`目录中的样式表文件用于定义聊天窗口的布局和视觉效果，如聊天框的大小、颜色、字体样式等。CSS也可能包括对按钮、输入框等元素的特定样式设置，以提高交互性和可读性。 8. 图像资源：`img`目录包含的...

    c# ASP.MVC websocket在线聊天

    5. **前端界面**：使用HTML、CSS和JavaScript（可能配合使用jQuery或更现代的库如React、Vue.js）构建用户界面，显示聊天窗口，接收用户输入，通过WebSocket发送消息，并更新聊天历史。 6. **错误处理与断线重连**...

    websocket聊天 netty聊天

    在WebSocket聊天应用中，Netty可以用来处理WebSocket握手过程、数据帧的解码与编码，以及网络I/O操作，确保数据的高效传输。 实现WebSocket聊天业务通常包括以下几个步骤： 1. **服务器端配置**：创建一个Netty...

    基于websocket实时聊天记录Demo

    前端则可能需要提供查询聊天记录的接口，通过Ajax请求获取历史记录并显示在聊天界面上。 5. 安全与优化: 实际应用中，我们还需要考虑WebSocket的安全性，比如使用HTTPS加密通信，防止中间人攻击。此外，通过设置...

    C# mvc websocket 在线聊天实例

    **C# MVC WebSocket 在线聊天实例详解** WebSocket 是一种在客户端和服务器之间建立持久连接的协议，它允许双向通信，即服务器和客户端都可以主动发送数据。在C# MVC（Model-View-Controller）框架中集成WebSocket...

    C#版 websocket 在线聊天实例代码

    7. **用户界面**: 聊天应用的用户界面（UI）通常由Windows Forms或WPF等技术构建，显示在线用户列表、接收的消息以及输入框供用户发送消息。 8. **数据格式**: 聊天消息可能以JSON或其他轻量级的数据格式传输，以...

    spring websocket在线聊天demo

    用户界面设计用于输入和显示聊天内容。 - **后端**：后端处理WebSocket连接，管理用户会话，存储和分发消息。Spring提供的` SimpMessagingTemplate`可以帮助向特定用户或所有用户广播消息。 7. **一对一和群聊** ...

    H5实现websocket聊天对话

    在这个“H5实现WebSocket聊天对话”的项目中，我们将深入探讨WebSocket的基本原理、如何在前端使用WebSocket进行聊天功能的开发，以及可能遇到的问题和解决方案。 1. WebSocket基础知识： WebSocket是一种在客户端...

    java利用websocket实现多人聊天室（springmvc框架）

    以上步骤概括了使用Java和Spring MVC实现WebSocket聊天室的主要过程。实际开发中可能需要根据具体需求进行调整，例如添加文件上传功能、实时用户列表展示、历史消息记录等。在设计和实现过程中，确保代码的可扩展性...

    SpringBoot+websocket实时聊天

    4. **接收消息**：客户端监听WebSocket连接，接收并显示来自服务器的新消息。 5. **用户状态管理**：记录用户的在线状态，如在线、离线等，可以使用WebSocket心跳机制来维护。 综上所述，"SpringBoot+websocket实时...

    基于java，easyui，websocket的聊天界面实现

    在本项目中，我们主要探讨如何使用Java、EasyUI、WebSocket和jQuery技术来构建一个实时交互的聊天界面。这是一个常见的Web应用开发场景，对于提升用户体验和实现即时通信至关重要。下面将详细阐述这些技术及其在聊天...

    websocket聊天室demo

    在这个"websocket聊天室demo"中，我们将探讨WebSocket如何应用于构建一个简单的即时聊天应用。 WebSocket协议是HTML5的一个重要组成部分，它通过在TCP层面上创建持久连接，解决了HTTP协议的限制，HTTP协议每次请求/...

    Angular 5 WebSocket 聊天室_前端

    与传统的HTTP请求-响应模式不同，WebSocket在连接建立后可以持续传输数据，减少了延迟，非常适合实时通信场景，如在线聊天、实时股票更新等。 **3. 实现WebSocket通信** 在Angular 5中，可以使用第三方库如`@stomp/...

    基于Websocket的在线聊天源码

    在这个基于Websocket的在线聊天源码中，开发者提供了一个基础的聊天应用框架，尽管前端界面可能在某些分辨率下表现不佳，但主要的逻辑和功能都在后端代码中实现。 1. **WebSocket协议**：WebSocket协议是HTML5的一...

    websocket聊天室

    在这个"WebSocket聊天室"项目中，我们利用WebSocket技术来构建一个实时的在线聊天环境，用户可以进行群聊和私聊。 首先，前端使用了JSP（JavaServer Pages）技术。JSP是Java的一种视图技术，它允许开发者将HTML、...

    mvc websocket 聊天室功能

    在这个"mvc websocket 聊天室功能"项目中，我们可以看到一个基于MVC（Model-View-Controller）架构和WebSocket的聊天室应用实例，它具有系统群发和定时群发消息的功能。 **1. MVC架构** MVC是一种设计模式，常用于...

    基于Tomcat7、Java、Ext、WebSocket的聊天室

    6. 每个客户端的WebSocket监听器接收到新消息，更新UI显示。 总的来说，这个项目结合了Tomcat7的服务器环境、Java的业务逻辑处理、Ext的富客户端界面以及WebSocket的实时通信，提供了一个完整的在线聊天室解决方案...

Magicbox
Global site tag (gtag.js) - Google Analytics