在线聊天系统,关键代码,(jquery.ajax)

在线聊天系统:

(jquery.ajax版本,定时刷新页面,且聊天内容不保存到数据库)


其实可以使用DWR推技术。有值进入,才刷新页面,


关键点:

【一】显示在线人数及其列表

【二】显示聊天内容 

         ① XXX进入聊天室

         ② XXX说什么话

         ③ XXX离开聊天室

【三】发送聊天信息

第一部分,页面

①  Chat.jsp页面:

聊天内容


【id】online,插入在线人数列表

【id】content,插入聊天内容

【id】message,输入框

【id】button,发送按钮


②online.jsp页面:

<%@ page import = "chat.entity.UserList" %>
<%@ page import = "java.util.Vector" %>
<%
	UserList ul=UserList.getInstance();
	Vector vector=ul.getUserList();
	int amount=0;
%>

	<%
	if(vector!=null && vector.size()>0){
		String username="";	 
		amount=vector.size();
		for(int i=0;i
	
	<%
		}
	}
	%>
当前在线
<%=username%>


③ content.jsp页面:

${message}


第二部分:jquery

【一】插入在线列表

window.setInterval("showOnline();",10000);
$(function(){
	showOnline();
})
//显示在线人员
function showOnline(){
	$.ajax({
		url: "toonline.action",
		type:"get",
		success: function(data){
			//alert(data);
			$("#online").html('');
			$("#online").append(data);
		}
	});
}
		


【二】插入聊天列表

window.setInterval("showContent();",1000);
$(function(){
	showContent();

})
//显示内容
function showContent(){
	$.ajax({
		url: "chat.action",
		type:"get",
		success: function(data){
			//alert(data);
			$("#content").html('聊天内容');
			$("#content").append(data);
		}
	});
}


【三】发送

$(function(){
	//提交表单
	$("#button").click(function(){
		if( $("#message").val()=="" ){
			alert("还没输入呢");
		}else{
			var varmessage = $("#message").val();
			$.ajax({
				url:"send.action",
				type:"POST",
				data:{message:varmessage},
				success: function(data){
					$("#message").prop("value","");
					//alert("ddd");
				}
			});
		}
	});
});



第三部分:后台

【一】显示在线人数及其列表

在登录的时候,专门用一个vector,来存取人的名字,作为列表

【二】显示聊天内容 

         ① XXX进入聊天室

这个在登陆的时候,顺带写到application里的message

         ② XXX说什么话

后台接收到消息后,弄成合适的输出结构,获取原先讲到一半的message里,再向里面插入,存回message

         ③ XXX离开聊天室

退出时,顺带写到application里的message

【三】发送聊天信息

同上②





② content.jsp页面:

${message}

你可能感兴趣的:(.....jsp)