基于JQuery+JSP的无数据库无刷新多人在线聊天室

2022-10-27 08:17:03

JQuery是一款非常强大的javascript插件，本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室，该实现的数据全部存储在服务端内存里，没有用到数据库，本文会提供所有源程序，需要持久化聊天数据的可以自行修改增加XML文件数据保存或者数据库数据保存。 

主界面： 

基于JQuery+JSP的无数据库无刷新多人在线聊天室

使用说明： 
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关闭的时候便随之清空了，如果对于聊天信息没有保存的需要，仅仅是需要一个临时的多人在线交流平台，这种设计非常简洁且合适。 

项目文件结构： 

基于JQuery+JSP的无数据库无刷新多人在线聊天室 

服务端的源代码 

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>

上一篇：h3c 交换机配置VLAN和远程管理


下一篇：项目分布式部署那些事（1）：ONS消息队列、基于Redis的Session共享，开源共享