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代码和服务器端组件，为构建动态网页提供...
基于HTML+CSS+JS+Node.js+JQuery+Mysql开发的在线聊天室+源码+数据库+项目解析，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于...
总之，"jQuery+jsp连接数据库"这个主题涉及到前后端的交互，涵盖了jQuery的选择器、事件处理、AJAX请求，以及JSP的页面生命周期、JDBC的使用和数据库操作。对于初学者来说，这是一个很好的起点，能够帮助他们建立起...
基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统...
基于jQuery+bootstrap框架开发简约音乐播放器网站源码+sql数据库+登录API说明.zip基于jQuery+bootstrap框架开发简约音乐播放器网站源码+sql数据库+登录API说明.zip基于jQuery+bootstrap框架开发简约音乐播放器网站...
基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...
在"jquery+jsp学习"中，你将学习如何利用jQuery的Ajax功能实现页面的无刷新更新。 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分网页的技术。通过创建或更新DOM中的部分，...
【jQuery+jsp+mysql聊天室】是一个基于前端jQuery库、后端Java的JSP技术和MySQL数据库构建的在线实时交流平台。这个项目旨在提供一个友好、交互性强的用户界面，让用户可以方便地进行实时对话。 首先，jQuery是...
### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中，如...
"PHP+jQuery+Ajax无刷新分页加搜索"是一个经典的技术组合，用于构建动态、高效的网页应用。这个技术方案结合了服务器端处理（PHP）、客户端交互（jQuery）以及异步数据交换（Ajax），实现了用户在不重新加载整个页面...
**jQuery+Ajax+PHP无刷新分页技术详解** 在网页开发中，无刷新分页是一种提升用户体验的重要技术，它使得用户在浏览大量数据时无需等待整个页面重新加载，只需要加载新内容即可。本篇将详细讲解如何利用jQuery、...
标题中的"SSH2+JQUERY+ajax+sqlserver数据库"是一个综合性的技术组合，涉及到Web开发的多个层面，包括服务器端、客户端以及数据存储。让我们逐一解析这些技术及其在实际应用中的作用。 **SSH2（Struts2 + Spring + ...
【标题】：“jsp-jquery-database（jsp直接操作数据库）”这一主题主要涵盖了使用Java Server Pages（JSP）和jQuery来直接与数据库交互的技术。在Web应用开发中，JSP通常用于创建动态网页，而jQuery则是一种强大的...
《基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统》 本项目是一个全面的餐饮管理系统，采用经典的Web开发技术栈，包括Servlet、JSP、Jquery、EL（Expression Language）以及Ajax，旨在提供一个功能完备、交互流畅的...
在本项目中，"Jquery+ajax+php+mysql数据库实现用户注册登录"是一个典型的Web应用程序开发案例，它涵盖了前端交互、后端处理以及数据库管理等多个方面。以下将详细阐述这些知识点： 1. **Jquery**：Jquery是一个...