利用jquery与struts2制作简易的在线聊天功能。

许多学校都会让学生做一个网上电子商城的项目来作为期末作业，所以可以加入客服的功能，但是又未学习到太多知识如websock，就可以参考本文章。

  1. 思路：客户端之前通过服务器端的ServletContext来传递聊天信息。客户端页面由上下两部分组成。上部分为一个聊天框，设置定时刷新页面，使聊天记录不断刷新。下部分是文本框用于信息的发送。当客户端关闭页面，使用监听器，清除掉ServletContext中的聊天记录（这个应该可以实现）。
    2.客户端页面分为由三个页面组成，主页面main.jsp，main.jsp由两个页面组成：top.jsp，under.jsp。

    上部分页面top.jsp设置自动刷新时间为2S，用于接收信息使用。
<%
	/*设置定时刷新*/
	response.setIntHeader("refresh", 2);
%>
<script type="text/javascript">
$(function(){
	/* 定时接收信息  */
	var lookMsg = $('#lookmsg').val();
	$.post("${pageContext.request.contextPath }/getMsg.action?cusername=${customer.cusername}"
			,{"lookMsg":lookMsg},function(data){
			 	$(data).each(function(i,n){
			 		$('#lookmsg').val(n.lookMsg);
			 	});
	},"json");
});
</script>

下部分页面under.jsp负责消息的发送。

<script type="text/javascript">
$(function(){
	/* 发送信息  */
	$('#btn').click(function(){
		var mydate = new Date();
		var t=mydate.toLocaleString();
		var sendMsg = "${customer.cusername}："+t+"\n";
		sendMsg += $('#sendmsg').val();
		$('#sendmsg').val("");
		$.post("${pageContext.request.contextPath }/sendMsg.action?cusername=${customer.cusername}",{"sendMsg":sendMsg}
		,function(data){},"json");
	});
	
});
</script>
<body>
<div align="center">
	<textarea cols="52" rows="10" id="sendmsg" name="sendMsg"></textarea>
	<button id="btn">发送</button>
</div>
</body>

3.客服人员端的页面也跟客户端类似

JAVA多客服源码 javaweb客服聊天_客户端


左边的第一个超链接能够查看哪个客户发来了消息，下面的超链接时与某个客户聊天。

4.acton端的代码。

服务器启动的时候就实例化一个Map<String,String>集合。由于每个客户登录，就会在session中存放一个user的属性。当用户登录，就把session中user的username存放到Map中

重点：Map集合来控制与谁聊天，当页面传过来的cusername参数不同时，就获取的map集合中不同的聊天信息。用一个特定的键（如!#!$@，不符合客户的账号规则即可），来存储谁发来了信息的聊天记录

private Map<String,String> msgMap = new HashMap();//存放各个用户所对应的聊天信息。
	private String cusername;//取得map中信息的键
	private String lookMsg;//显示在上页面的信息。
	private String sendMsg;//下页面发送过来的信息。
	/**
	 * 接收信息
	 * 1.先确保从页面获取的到cusername的值
	 * 2.从ServletContext中拿到存放聊天信息的map集合。
	 * 3.从map中获取键为cusername的聊天信息值。
	 * 4.把聊天信息的记录转化为json数据，响应给浏览器。
	 * @return
	 * @throws IOException
	 */
	public String getMsg() throws IOException {
		System.out.println(cusername);
	    ServletContext servletContext = ServletActionContext.getServletContext();
		msgMap = (Map<String, String>)servletContext.getAttribute("msgMap");
		/*Set<String> set = msgMap.keySet();
		for (String key : set) {
			System.out.println("msg:"+msgMap.get(key));
		}*/
		lookMsg = msgMap.get(cusername);
		Map<String,String> map = new HashMap<>();
		map.put("lookMsg", lookMsg);
		JSONObject msg = JSONObject.fromObject(map);
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
	/*	System.out.println(msg.toString());*/
		ServletActionContext.getResponse().getWriter().println(msg.toString());
		return NONE;
	}
	/**
	 * 发送信息
	 * 1.获取页面传来的cusername的值。
	 * 2.从ServletContext中获取存放聊天信息的map集合
	 * 3.从map中获取键为cusername的聊天信息的值，用oldMsg来接收。
	 * 4.把久的信息，加上新发来的信息sendMsg，存放会map中。
	 * @return
	 */
	public String sendMsg() {
		System.out.println("sendMsg:"+cusername);
		ServletContext servletContext = ServletActionContext.getServletContext();
		msgMap = (Map<String, String>)servletContext.getAttribute("msgMap");
		String oldMsg = msgMap.get(cusername);
		lookMsg = oldMsg +"\n"+sendMsg;
		msgMap.put(cusername, lookMsg);
		//用于客服查看哪个客户发来了信息。
		Date date = new Date();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-HH-dd HH:mm:ss");
		msgMap.put("!!!!!", cusername+",发来了消息"+","+sdf.format(date));
		servletContext.setAttribute("msgMap",msgMap);
		
		return NONE;
	}
	/**
	 * 客服使用的功能。
	 * 用于切换聊天对象。
	 * @return
	 */
	public String changeCustomer() {
		ServletContext servletContext = ServletActionContext.getServletContext();
		//存回值栈中
		msgMap = (Map<String, String>)servletContext.getAttribute("msgMap");
		//设置聊天对象的cusername到目标页面。
		ServletActionContext.getRequest().setAttribute("cusername", cusername);
		
		return "change";
	}