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 

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%@ page import="zy.DealData" %>
  3. <%
  4. String action=request.getParameter("action");
  5. DealData dd=new DealData();
  6. //用户登录
  7. if("login".equals(action)){
  8. String name=request.getParameter("name");
  9. String pwd=request.getParameter("pwd");
  10. out.println(dd.userLogin(name,pwd,session,application));
  11. }
  12. //获取所有聊天消息
  13. else if("ChatList".equals(action)){
  14. String usernameInSession=(String)session.getAttribute("username");
  15. if(usernameInSession==null){
  16. out.print("unLogin");
  17. }else{
  18. out.print(dd.AllChatList(application));
  19. }
  20. }
  21. //发送消息
  22. else if("SendContent".equals(action)){
  23. String content=request.getParameter("content");
  24. out.println(dd.addContent(content,application,session));
  25. }
  26. //获取在线人员列表
  27. else if("onLineList".equals(action)){
  28. out.println(dd.GetOnlineUsers(application));
  29. }
  30. //下线
  31. else if("OffLine".equals(action)){
  32. out.print(dd.OffLine(application,session));
  33. }
  34. %>

DealData.java 

  1. package zy;
  2. import java.util.ArrayList;
  3. import java.util.Date;
  4. import java.util.List;
  5. import javax.servlet.ServletContext;
  6. import javax.servlet.http.HttpSession;
  7. public class DealData {
  8. //用户登录的判读
  9. public String userLogin(String username,String password,HttpSession session,ServletContext application){
  10. if("123456".equals(password)){
  11. //如果密码正确就将用户名放入session
  12. session.setAttribute("username", username);
  13. //获取在线用户列表
  14. List<String> users=(List<String>)application.getAttribute("users");
  15. if(users==null){
  16. users=new ArrayList<String>();
  17. }
  18. //将当前用户加入用户列表
  19. users.add(username);
  20. //更新application中的对象
  21. application.setAttribute("users", users);
  22. return "True";
  23. }else{
  24. return "False";
  25. }
  26. }
  27. //添加消息
  28. public String addContent(String content,ServletContext application,HttpSession session){
  29. List<String> strList=(List<String>) application.getAttribute("MessageList");
  30. if(strList==null){
  31. strList=new ArrayList<String>();
  32. }
  33. //获取session中的用户名
  34. String username=(String)session.getAttribute("username");
  35. //获取时间
  36. Date date=new Date();
  37. content=content.replace("<:", "<img src='QQface/");
  38. content=content.replace(":>", ".gif' />");
  39. //组装消息
  40. String message=username+"于"+date.toLocaleString()+"说:"+content;
  41. //添加到集合中
  42. strList.add(message);
  43. //放入application对象中
  44. application.setAttribute("MessageList", strList);
  45. return "True";
  46. }
  47. //获取所有的消息
  48. public String AllChatList(ServletContext application){
  49. StringBuffer sb=new StringBuffer();
  50. List<String> strList=(List<String>) application.getAttribute("MessageList");
  51. if(strList!=null){
  52. for(String s:strList){
  53. sb.append(s+"<br />");
  54. }
  55. }
  56. return sb.toString();
  57. }
  58. //获取在线用户列表
  59. public String GetOnlineUsers(ServletContext application){
  60. StringBuffer sb=new StringBuffer();
  61. List<String> strList=(List<String>) application.getAttribute("users");
  62. if(strList!=null){
  63. for(String s:strList){
  64. sb.append(s+"<br />");
  65. }
  66. }
  67. return sb.toString();
  68. }
  69. //下线
  70. public String OffLine(ServletContext application,HttpSession session){
  71. //先取出用户名
  72. String username=(String)session.getAttribute("username");
  73. //移除session中的内容
  74. session.removeAttribute("username");
  75. //移除用户列表中的用户名
  76. List<String> strList=(List<String>) application.getAttribute("users");
  77. if(strList!=null){
  78. strList.remove(username);
  79. }
  80. return "True";
  81. }
  82. }

接下来是客户端的实现,主要是用到了JQuery的Ajax功能来实现无刷新获取数据(此处只列出Ajax函数,具体源代码请自行下载查看): 

Index.jsp用户登录的Ajax实现: 

  1. <script language="javascript" type="text/javascript">
  2. $(function(){
  3. $("#login").click(function(){
  4. var $name=$("#txtName").val();
  5. var $pwd=$("#txtPwd").val();
  6. UserLogin($name,$pwd);
  7. $("#spnMsg").html("正在登录...").show().css({"top":"20%","left":"50%"});
  8. });
  9. function UserLogin(name,pwd){
  10. $.ajax({
  11. type:"POST",
  12. url:"DealData.jsp",
  13. data:"action=login&d="+new Date()+"&name="+name+"&pwd="+pwd,
  14. success:function(data){
  15. if(data.indexOf("True")>0){
  16. window.location="ChatMain.html";
  17. }else{
  18. alert("用户名或者密码错误");
  19. $("#spnMsg").hide();
  20. return false;
  21. }
  22. }
  23. });
  24. }
  25. });
  26. </script>

ChatMain.html聊天室主界面的实现 

  1. <script language="javascript" type="text/javascript">
  2. $(function(){
  3. //键盘监听
  4. $(document).keypress(function(e){
  5. if(e.which==13){
  6. SendContent($("#txtContent").val());
  7. goToBottom();
  8. }
  9. });
  10. //读取消息
  11. GetMessageList();
  12. //读取在线用户
  13. GetOnlineUsers();
  14. //初始化表情
  15. InitFaces();
  16. //自动刷新
  17. AutoRefresh();
  18. //发送按钮事件响应
  19. $("#Button1").click(function(){
  20. var $content=$("#txtContent");
  21. if($content.val()!=""){
  22. SendContent($content.val());
  23. }else{
  24. alert("发送内容不能为空!");
  25. return false;
  26. }
  27. });
  28. $("#Button2").click(function(){
  29. if(confirm("确认下线?")){
  30. OffLine();
  31. }
  32. });
  33. //发送消息
  34. function SendContent(content){
  35. $.ajax({
  36. type:"POST",
  37. url:"DealData.jsp",
  38. data:"action=SendContent&d="+new Date()+"&content="+content,
  39. success:function(data){
  40. if(data.indexOf("True")){
  41. //获取消息
  42. GetMessageList();
  43. //清空发送框
  44. $("#txtContent").val("");
  45. goToBottom();
  46. //alert('shit for SendMessage');
  47. }else{
  48. alert("发送失败");
  49. }
  50. }
  51. });
  52. }
  53. //获取消息
  54. function GetMessageList(){
  55. $.ajax({
  56. type:"POST",
  57. url:"DealData.jsp",
  58. data:"action=ChatList&d="+new Date(),
  59. success:function(data){
  60. if(data.indexOf("unLogin")>0){
  61. alert("非法进入,请先登录!");
  62. window.location="index.html";
  63. }else{
  64. $("#divContent").html(data);
  65. }
  66. //alert('shit for GetMessage');
  67. }
  68. });
  69. }
  70. //获取在线用户列表
  71. function GetOnlineUsers(){
  72. $.ajax({
  73. type:"POST",
  74. url:"DealData.jsp",
  75. data:"action=onLineList&d="+new Date(),
  76. success:function(data){
  77. $("#divOnline").html(data);
  78. //alert('shit for GetOnlineUsers');
  79. }
  80. });
  81. }
  82. //设置表情
  83. function InitFaces(){
  84. var strHTML="";
  85. for(var i=1;i<=7;i++){
  86. strHTML+="<img src='QQface/"+i+".gif' id='"+i+"'/>";
  87. }
  88. $("#divFace").html(strHTML);
  89. }
  90. //图片监听
  91. $("table tbody tr td img").click(function(){
  92. var $txtContent=$("#txtContent");
  93. if($txtContent.val()!=undefined){
  94. var strContent=$txtContent.val()+"<:"+this.id+":>";
  95. }else{
  96. var strContent="<:"+this.id+":>";
  97. }
  98. $("#txtContent").val(strContent);
  99. });
  100. //下线
  101. function OffLine(){
  102. $.ajax({
  103. type:"POST",
  104. url:"DealData.jsp",
  105. data:"action=OffLine&d="+new Date(),
  106. success:function(data){
  107. if(data.indexOf("True")>0){
  108. alert("成功下线!");
  109. window.location="index.html";
  110. }
  111. //alert('shit for GetOnlineUsers');
  112. }
  113. });
  114. }
  115. //到底部去
  116. function goToBottom(){
  117. div=document.getElementById("divContent");
  118. .scrollTop = div.scrollHeight;
  119. }
  120. //自动更新页面信息
  121. function AutoRefresh(){
  122. setInterval(GetMessageList,2000);
  123. setInterval(GetOnlineUsers,4000);
  124. }
  125. });
  126. </script>

基于JQuery+JSP的无数据库无刷新多人在线聊天室的更多相关文章

  1. 基于Server-Sent Event的简单在线聊天室

    Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...

  2. 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室

    在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...

  3. 基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  4. Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

    思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望 为更好的 ...

  5. Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室

    一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...

  6. .NET Core 基于Websocket的在线聊天室

    什么是Websocket 我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯,但是在web体系是用不了socket通讯技术的,因为http被设计成无状态,每次跟服务器通讯完成后 ...

  7. 在线聊天室的实现(2)--基于Netty 4.x的Echo服务器实现

    前言: 就如前文所讲述的, 聊天室往往是最基本的网络编程的学习案例. 本文以WebSocket为底层协议, 实现一个简单的基于web客户端的Echo服务. 服务器采用Netty 4.x来实现, 源于其 ...

  8. 基于Java的在线聊天室

    概述 Java socket编程,实现一个在线聊天室, 实现在线用户群聊,私聊,发送文件等功能. 详细 代码下载:http://www.demodashi.com/demo/13623.html 一. ...

  9. 基于 NodeJs 打造 Web 在线聊天室

    Socket.IO 简介与基础环境搭建 任务时间:10min ~ 20min 关于 Socket.IO Socket.IO 可以实现在浏览器和服务器之间实时双向通信,本节课程将详细介绍 Socket. ...

随机推荐

  1. Oracle的trunc和dbms_random.value随机取n条数据

    今天在review项目代码的时候看到这样一个问题,有一张号码表,每次需要从这样表中随机取6个空闲的号码,也就是每次取出来的6个号码应该都会有所不同.然后我就看到了这样的SQL select   t.* ...

  2. Golang学习 - regexp 包

    ------------------------------------------------------------ // 函数 // 判断在 b(s.r)中能否找到 pattern 所匹配的字符 ...

  3. Foxit Reader 插件下载

    http://www.foxitsoftware.com/Secure_PDF_Reader/addons.php#install 百度云:http://pan.baidu.com/s/1i3DSlv ...

  4. Linux Shell远程执行命令(命令行与脚本方式)

    需求:经常需要在一台服务器远程到其他节点的服务器上执行一些shell命令,如果分别ssh到每台主机上再去执行很麻烦,因此能有个集中管理的方式就好了.介绍两种shell命令远程执行的方法. 方式一: s ...

  5. 关于解决Permission is only granted to system apps

    一句话,clean一下这个Project!就OK了…… 不要被假象迷惑!

  6. SQL Server数据库自增字段正确的插入值的描述

    我们今天主要向大家讲述的是SQL Server数据库之向SQL Server自增字段正确的插入值的实际操作步骤,在一般的情况下,我们不能向 SQL Server 数据库自增字段中插入值,如果非要这么干 ...

  7. 1.4.8 拼凑在一起(putting the pieces together)

    putting the pieces together 在最高的级别,schema.xml结构如下, <schema> <types> <fields> <u ...

  8. 智能 RPC框架 (C++)

    RPC中文叫远程函数调用,它是一种通信方式,只是看起来像普通的函数调用. 它包括三个基本要素: 1:服务端注册相应的(服务)函数(用于调用方调用) 2:调用方通过函数调用的方式将一些信息和参数打包到消 ...

  9. SQL Server 2008 表值参数用法

    下面的示例使用 Transact-SQL 并演示如何执行以下操作:创建表值参数类型,声明变量来引用它,填充参数列表,然后将值传递到存储过程. USE AdventureWorks; GO /*创建表值 ...

  10. 个人总结ANDROID开发事项

    theme:none,Holo Dark(全黑),Holo Light(全白),Holo Light width Dark action Bar(全白,活动栏是黑) Create Activity: ...