浏览 11368 次
|
锁定老帖子 主题：自制超简单JQuery AJAX聊天室
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-06-13
 上午无聊，做着玩玩。
不要鄙视我哟。哈哈 源码如下： 一共三个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> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-06-18
运行不了。。
|
| 返回顶楼 | |
|
发表时间：2008-06-18
原理是这个，真跑起来估计几个人就垮了。。。
|
| 返回顶楼 | |
|
发表时间：2008-06-19
ayeah 写道 原理是这个，真跑起来估计几个人就垮了。。。
呵呵。你试过吗？ |
| 返回顶楼 | |
|
发表时间：2008-06-20
ayeah 写道 原理是这个，真跑起来估计几个人就垮了。。。
性能的瓶颈在于每次执行getContent都会把服务器上所有的对话内容都抓下来，人多是一个导致性能下降的原因，但是就算只有一个人，说的话太多也会导致性能下降。 如果getContent可以做到只抓取最新的对话内容，性能应该可以稳定很多，一些比较实用的基于ajax的聊天工具大约是这样操作的 |
| 返回顶楼 | |
|
发表时间：2008-06-22
ydy88 写道 ayeah 写道 原理是这个，真跑起来估计几个人就垮了。。。
性能的瓶颈在于每次执行getContent都会把服务器上所有的对话内容都抓下来，人多是一个导致性能下降的原因，但是就算只有一个人，说的话太多也会导致性能下降。 如果getContent可以做到只抓取最新的对话内容，性能应该可以稳定很多，一些比较实用的基于ajax的聊天工具大约是这样操作的 说的对。 当前的聊天内容+聊天记录。真正要做好的话还是需要做很多优化的。 这段时间公司在做一个iframe的长连接聊天室。感觉还是长轮询比较好，虽然实时性没有长连接好，但是没有连接太多造成的性能瓶颈。个人还是比较支持长轮询的方式。
|
| 返回顶楼 | |
|
发表时间：2008-10-10
把程序打包下发过来吧
|
| 返回顶楼 | |
|
发表时间：2008-10-14
还可以 哈哈 挺好玩
|
| 返回顶楼 | |
|
发表时间：2008-11-19
赞一个。不错噢~
|
| 返回顶楼 | |
