JQuery是一款非常强大的javascript插件，本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室，该实现的数据全部存储在服务端内存里，没有用到数据库，本文会提供所有源程序，需要持久化聊天数据的可以自行修改增加XML文件数据保存或者数据库数据保存。
主界面：
使用说明：
1. 聊天室的登录验证规则为：任意用户名，只验证密码(默认为123456)，简单起见，密码直接硬编码在JavaBean中，可自行修改。
2. 需要下线请点击下线按钮，以便服务器及时得到用户下线并通过在线人员列表反馈给其他在线用户。
基于JQuery+JSP的无数据库无刷新多人在线聊天室源代码下载(MyEclipse开发环境下导出的项目包)
下面简要分析一下各个功能的实现：
服务端：
采用JSP+JavaBean结合的方式，本来是想让代码从功能性上看起来比较清晰，后来实现的时候发现好像没有预期的清晰感- -!
JSP用来接收从客户端传来的各种Ajax请求并且反馈信息给客户端，所有的请求处理都封装在了JavaBean中。个人认为这个聊天室服务端实现最大的亮点是：充分利用了request, session. application这三大内置对象的特性，可以加深对这三个对象类型以及作用域的理解。
Request对象用来获取客户端传递过来的参数，对不同客户端有不同的request对象，session用来保存当前登录的用户名，同样是只对当前登录用户有效，最后application大显神威，保存着两个至关重要的数据对象，一个是当前所有的在线人员列表，一个是所有的聊天内容，每当有新用户登录的时候，用户名称便会记录到application中，每当有人发言的时候，聊天信息也会保存到application中，而application对象对于所有用户都是同一个实例，所以通过application可以实现共享聊天信息和聊天人员列表数据的功能，并且application中的内容都是保存在服务端的内存中，当Tomcat关闭的时候便随之清空了，如果对于聊天信息没有保存的需要，仅仅是需要一个临时的多人在线交流平台，这种设计非常简洁且合适。
项目文件结构：
服务端的源代码
DealData.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="zy.DealData" %>
<%
String action=request.getParameter("action");
DealData dd=new DealData();
//用户登录
if("login".equals(action)){
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
out.println(dd.userLogin(name,pwd,session,application));
}
//获取所有聊天消息
else if("ChatList".equals(action)){
String usernameInSession=(String)session.getAttribute("username");
if(usernameInSession==null){
out.print("unLogin");
}else{
out.print(dd.AllChatList(application));
}
}
//发送消息
else if("SendContent".equals(action)){
String content=request.getParameter("content");
out.println(dd.addContent(content,application,session));
}
//获取在线人员列表
else if("onLineList".equals(action)){
out.println(dd.GetOnlineUsers(application));
}
//下线
else if("OffLine".equals(action)){
out.print(dd.OffLine(application,session));
}
%>
DealData.java
package zy;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpSession;
public class DealData {
//用户登录的判读
public String userLogin(String username,String password,HttpSession session,ServletContext application){
if("123456".equals(password)){
//如果密码正确就将用户名放入session
session.setAttribute("username", username);
//获取在线用户列表
List<String> users=(List<String>)application.getAttribute("users");
if(users==null){
users=new ArrayList<String>();
}
//将当前用户加入用户列表
users.add(username);
//更新application中的对象
application.setAttribute("users", users);
return "True";
}else{
return "False";
}
}
//添加消息
public String addContent(String content,ServletContext application,HttpSession session){
List<String> strList=(List<String>) application.getAttribute("MessageList");
if(strList==null){
strList=new ArrayList<String>();
}
//获取session中的用户名
String username=(String)session.getAttribute("username");
//获取时间
Date date=new Date();
content=content.replace("<:", "<img src='QQface/");
content=content.replace(":>", ".gif' />");
//组装消息
String message=username+"于"+date.toLocaleString()+"说："+content;
//添加到集合中
strList.add(message);
//放入application对象中
application.setAttribute("MessageList", strList);
return "True";
}
//获取所有的消息
public String AllChatList(ServletContext application){
StringBuffer sb=new StringBuffer();
List<String> strList=(List<String>) application.getAttribute("MessageList");
if(strList!=null){
for(String s:strList){
sb.append(s+"<br />");
}
}
return sb.toString();
}
//获取在线用户列表
public String GetOnlineUsers(ServletContext application){
StringBuffer sb=new StringBuffer();
List<String> strList=(List<String>) application.getAttribute("users");
if(strList!=null){
for(String s:strList){
sb.append(s+"<br />");
}
}
return sb.toString();
}
//下线
public String OffLine(ServletContext application,HttpSession session){
//先取出用户名
String username=(String)session.getAttribute("username");
//移除session中的内容
session.removeAttribute("username");
//移除用户列表中的用户名
List<String> strList=(List<String>) application.getAttribute("users");
if(strList!=null){
strList.remove(username);
}
return "True";
}
}
接下来是客户端的实现，主要是用到了JQuery的Ajax功能来实现无刷新获取数据(此处只列出Ajax函数，具体源代码请自行下载查看)：
Index.jsp用户登录的Ajax实现：
<script language="javascript" type="text/javascript">
$(function(){
$("#login").click(function(){
var $name=$("#txtName").val();
var $pwd=$("#txtPwd").val();
UserLogin($name,$pwd);
$("#spnMsg").html("正在登录...").show().css({"top":"20%","left":"50%"});
});
function UserLogin(name,pwd){
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=login&d="+new Date()+"&name="+name+"&pwd="+pwd,
success:function(data){
if(data.indexOf("True")>0){
window.location="ChatMain.html";
}else{
alert("用户名或者密码错误");
$("#spnMsg").hide();
return false;
}
}
});
}
});
</script>
ChatMain.html聊天室主界面的实现
<script language="javascript" type="text/javascript">
$(function(){
//键盘监听
$(document).keypress(function(e){
if(e.which==13){
SendContent($("#txtContent").val());
goToBottom();
}
});
//读取消息
GetMessageList();
//读取在线用户
GetOnlineUsers();
//初始化表情
InitFaces();
//自动刷新
AutoRefresh();
//发送按钮事件响应
$("#Button1").click(function(){
var $content=$("#txtContent");
if($content.val()!=""){
SendContent($content.val());
}else{
alert("发送内容不能为空！");
return false;
}
});
$("#Button2").click(function(){
if(confirm("确认下线？")){
OffLine();
}
});
//发送消息
function SendContent(content){
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=SendContent&d="+new Date()+"&content="+content,
success:function(data){
if(data.indexOf("True")){
//获取消息
GetMessageList();
//清空发送框
$("#txtContent").val("");
goToBottom();
//alert('shit for SendMessage');
}else{
alert("发送失败");
}
}
});
}
//获取消息
function GetMessageList(){
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=ChatList&d="+new Date(),
success:function(data){
if(data.indexOf("unLogin")>0){
alert("非法进入，请先登录！");
window.location="index.html";
}else{
$("#divContent").html(data);
}
//alert('shit for GetMessage');
}
});
}
//获取在线用户列表
function GetOnlineUsers(){
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=onLineList&d="+new Date(),
success:function(data){
$("#divOnline").html(data);
//alert('shit for GetOnlineUsers');
}
});
}
//设置表情
function InitFaces(){
var strHTML="";
for(var i=1;i<=7;i++){
strHTML+="<img src='QQface/"+i+".gif' id='"+i+"'/>";
}
$("#divFace").html(strHTML);
}
//图片监听
$("table tbody tr td img").click(function(){
var $txtContent=$("#txtContent");
if($txtContent.val()!=undefined){
var strContent=$txtContent.val()+"<:"+this.id+":>";
}else{
var strContent="<:"+this.id+":>";
}
$("#txtContent").val(strContent);
});
//下线
function OffLine(){
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=OffLine&d="+new Date(),
success:function(data){
if(data.indexOf("True")>0){
alert("成功下线！");
window.location="index.html";
}
//alert('shit for GetOnlineUsers');
}
});
}
//到底部去
function goToBottom(){
div=document.getElementById("divContent");
div.scrollTop = div.scrollHeight;
}
//自动更新页面信息
function AutoRefresh(){
setInterval(GetMessageList,2000);
setInterval(GetOnlineUsers,4000);
}
});
</script>
- 大小: 19.1 KB
- 大小: 7.6 KB
分享到：
相关推荐
网上聊天室 基于jsp，利用mysql数据库 index.html user_reg_form.html mail.jsp user_info.jsp send_info.jsp display_info.jsp logout.jsp
【标题】：“jsp无刷新聊天室源代码”指的是一个基于JavaServer Pages (JSP) 技术实现的在线聊天室应用，它允许用户在不刷新整个网页的情况下进行实时通信，提高了用户体验。 【描述】：“新手学习 无太多的修饰...
【小型多人聊天室】是一个基于网络通信技术的项目，由北京圣思源开发，旨在提供一个简单的多人在线交流平台。这个聊天室系统的核心是实现客户端与服务器之间的实时数据传输，使得用户可以相互发送消息，进行实时对话...
【JSP在线聊天室】是一种基于JavaServer Pages (JSP) 技术开发的实时通信应用，它允许用户通过互联网进行即时交流。JSP作为服务器端脚本语言，结合了HTML、JavaScript、Java代码和服务器端组件，为构建动态网页提供...
6. **聊天室**：虽然描述中未明确提及聊天室功能，但考虑到Ajax常用于实时通信，如聊天室，可能这个Blog系统中包含了一个简单的聊天功能，使用户可以实时交流。 【压缩包子文件的文件名称列表】：Part2 由于未提供...
在聊天室中，JSP可以用来创建用户界面，显示聊天历史记录、在线用户列表等。 3. **WebSocket**：WebSocket提供双向通信，使得客户端和服务器之间可以实时交换数据。在聊天应用中，WebSocket是实现即时聊天的关键，...
在描述中，“用activemq实现多人聊天室，本人参考网络资料自己编写，实测可用”表明了作者基于ActiveMQ创建了一个可运行的多用户聊天平台，并且这个系统已经经过测试，证明其功能是可靠的。这通常涉及到以下关键知识...
- **开发目标**：本项目旨在构建一个使用jQuery和Ajax技术的无刷新聊天室，支持多人同时在线聊天，并能实时显示在线人员列表和聊天信息。 #### 2. 开发环境 - **运行环境**：JDK7.0 - **操作系统**：Windows 7/10 ...
多人聊天室 3个目标文件 第一步：运行ServerData.java 启动服务器，然后服务器处于等待状态 第二步：运行LoginData.java 启动(客户端)登陆界面 输入用户名 ip为本机localhost 第三步：在登陆后的界面文本框输入文本...