自制超简单JQuery AJAX聊天室

ericxu131

浏览: 188423 次
性别:
来自: 上海

最近访客更多访客>>

12lisu

121PBL

monushise

kbmelody

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js & ajax & css & html

Ajax jQuery JSP HTML Spring

上午无聊，做着玩玩。
不要鄙视我哟。哈哈

源码如下：
一共三个jsp

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>聊天室</title>
<script type="text/javascript" src="jquery-1.2.5.pack.js"></script>
</head>
<body>
<div id="content" style="font-size: 12px;overflow-y:auto ;height: 300px;width: 300px;border: 1px solid #CCC;padding: 10px;float: left;"></div>
<div id="member" style="overflow-y:auto ;height: 300px;width: 100px;border: 1px solid #CCC;padding: 10px;"></div>


<textarea rows="5" cols="35" id="say"></textarea><br/><input onclick="send();" type="button" value="发送"/>
<script type="text/javascript">

function inChat(){
$.ajax({
  type: "POST",
  url: "member.jsp",
  success: function(msg){
  getMember();
  }
});
}

function send(){
$.ajax({
  type: "POST",
  url: "content.jsp",
  data: "say="+$("#say").val(),
  success: function(msg){
  getContent();
  $("#say").val("");
  }
});

}
getContent();
getMember();
window.setInterval(function(){getContent();getMember();},3000);


function getContent(){
$.ajax({
  type: "POST",
  url: "content.jsp",
  success: function(msg){
  $("#content").html(msg);
  }
});
}

function getMember(){
$.ajax({
  type: "POST",
  url: "member.jsp",
  success: function(msg){
  $("#member").html(msg);
  }
});
}
</script>
</body>
</html>

member.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
if(application.getAttribute("member")==null)
	application.setAttribute("member",new java.util.HashSet());

java.util.Set member=(java.util.Set)application.getAttribute("member");
member.add(request.getRemoteAddr());
%>

<% for(Object o:member){%>
<%=o%><br/>
<%}%>

content.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
if(application.getAttribute("content")==null)application.setAttribute("content","");
%>
<%
if(request.getParameter("say")!=null)
application.setAttribute("content",application.getAttribute("content")+"<br/>"+request.getRemoteAddr()+": "+request.getParameter("say"));
%>
<%=application.getAttribute("content")%>

把这三个页面和jquery-1.2.5.pack.js包放在WebContent下就可以了，有乱码问题的话加个编码过滤器就可以了。

我在web.xml里面加了spring现成的过滤器

	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>
			org.springframework.web.filter.CharacterEncodingFilter
		</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>utf-8</param-value>
		</init-param>
		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
	</filter-mapping>

分享到：

超简单java定时器，定时任务使用 TimerTa ... | 将Subversion SVN装入windows系统服务

2008-06-13 10:16
浏览 3475
评论(9)
论坛回复 / 浏览 (8 / 11351)
查看更多

9 楼 ice_l_h 2008-11-19

赞一个。不错噢~

8 楼 375721064 2008-10-14

还可以哈哈挺好玩

7 楼 375721064 2008-10-10

把程序打包下发过来吧

6 楼 ericxu131 2008-06-22

ydy88 写道

ayeah 写道

原理是这个，真跑起来估计几个人就垮了。。。

性能的瓶颈在于每次执行getContent都会把服务器上所有的对话内容都抓下来，人多是一个导致性能下降的原因，但是就算只有一个人，说的话太多也会导致性能下降。
如果getContent可以做到只抓取最新的对话内容，性能应该可以稳定很多，一些比较实用的基于ajax的聊天工具大约是这样操作的

说的对。
当前的聊天内容+聊天记录。真正要做好的话还是需要做很多优化的。
这段时间公司在做一个iframe的长连接聊天室。感觉还是长轮询比较好，虽然实时性没有长连接好，但是没有连接太多造成的性能瓶颈。个人还是比较支持长轮询的方式。

5 楼 ydy88 2008-06-20

ayeah 写道

原理是这个，真跑起来估计几个人就垮了。。。

4 楼 ericxu131 2008-06-19

ayeah 写道

原理是这个，真跑起来估计几个人就垮了。。。

呵呵。你试过吗？

3 楼 ayeah 2008-06-18

原理是这个，真跑起来估计几个人就垮了。。。

2 楼 yuhui0531 2008-06-18

运行不了。。

1 楼 ghy_20081010 2008-06-13

这个确实不错值得去研究一下！！！

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论