网络聊天室系统设计与实现.docx

长春理工大学实习报告

科研训练

网络聊天室系统设计与实现

Design and implementation of network chat room system

学 生 姓 名
XXX
专 业
软件工程
学 号
1305XXXXX
指 导 教 师
李XX 祝XX
学 院
计算机科学技术学院

二〇一六年六月

起 止 周
17～19
周 数
3
实习地点
计算机学院专业实验室南区研1213
选 题
自 选
实习目的：
培养学生未来进入职场的素质，以及企业级行业解决方案系统的分析、设计、实现等企业级综合应用能力。
主要任务通过项目开发培养学生的职业素质，按照软件工程的思想，训练学生掌握面向对象分析/设计(UML 建模)、编码规范、概要设计方法、详细设计方法、模块划分方法等技能；培养学生的编程思想和基本工作技能，培养学生的编程能力。

实习要求：
要求学生能掌握软件开发的基本能力，具有项目开发的实际经验，按照专业方向或本人就业方向选择一个项目进行实际开发，能熟练运用常用的程序设计语言和开发工具，完成整个开发过程。
实习内容及进度安排：

每个同学的课题的主要研究内容，完成的主要功能、按周完成的工作（总计3周，每周具体完成的内容要写清楚）
指导教师评语：

成绩：
指导教师/带队教师（签字）

2016年 6月 日

目录
一、 引言 1
二、 需求分析 1
2.1 系统运行环境需求 1
2.2 模块功能分析 1
2.3系统功能结构 3
2.4系统数据流图 3
2.4.1顶层数据流图 3
2.4.2一层数据流图 3
2.4.3二层数据流图 4
2.5数据字典 5
三、 概要设计 5
3.1系统总体结构设计 5
3.1.1结构设计系统 5
3.1.2系统功能模块结构 6
3.2数据库设计 8
3.2.1概念设计 8
3.2.2逻辑设计 8
3.2.3物理设计 9
四、 详细设计 9
4.1流程图 9
4.1.1用户注册登录 9
4.1.2在线用户显示模块 11
4.1.3用户交流聊天模块 12
4.1.4聊天信息显示模块 13
4.1.5系统消息显示模块 14
4.1.6管理员管理用户模块 14
4.1.7辅助功能 15
4.2算法 16
4.2.1用户对话存储算法 16
4.2.2检测用户是否被踢算法 16
4.2.3 检测当前用户是否有新消息算法 17
4.3界面设计 18
4.3.1登录首页 18

II

4.3.2注册界面 19
4.3.3聊天室界面 20
4.4工程结构设计 20
4.5各类功能设计 21
4.5.1实体类 22
4.5.2数据库操作Dao层 23
4.5.3监听器 23
4.5.4业务逻辑service层 23
4.5.5工具箱Utils 24
4.5.6 Actions 24
五、 系统实现 24
5.1用户注册登录模块 25
5.1.1用户注册 25
5.1.2用户登录 26
5.2在线用户显示模块 28
5.3用户交流聊天模块 29
5.4聊天信息显示模块 30
5.5系统消息显示模块 32
5.6管理员管理用户模块 32
5.7辅助功能 33
六、 总结与体会 35
6.1开发中遇到的问题 35
6.2问题分析与解决方法 35
6.3经验与教训 35
参考文献 37
附录 38

IV

一、 引言
随着网络的大幅度普及，以及网络技术快速发展，人们通过网络进行交流的方式发生着巨大的变化，人们不再拘泥于移动电话的通话模式，越来越多的人通过网络聊天工具进行交流，网络聊天室便是非常典型的聊天工具之一。聊天室系统的即时交流方式满足了网络中人们同时与多人进行聊天交流的需要，使得较多的人在同一个聊天页面进行交流变得方便，简单。
本设计所完成的网络聊天室具有常用聊天室的所有功能，包括使用账号登录聊天室、注册账号、显示在线用户列表、显示系统消息、两人之间进行私密聊天、消息提醒、发送表情、修改发送文字颜色；同时，为了管理聊天室中的用户使用语言的文明，赋予管理员踢出使用不文明语言的用户功能，显示全部聊天信息。
该系统采用B/S（浏览器/服务器）结构进行开发，参考网络中正在使用的大型聊天室的架构、分析聊天室可实现功能，结合本次设计的相关要求，进行开发设计并写出需求分析说明书。
该系统具体开发环境：使用Windows8.1专业版作为服务器运行平台，服务器开发语言使用Java语言，前台使用Jsp技术、JavaScript、Jquery语言，系统框架使用Struts2+Hibernate+Spring框架，后台数据库使用MySql数据库。
二、 需求分析
该系统采用B/S模式设计，开发目的主要是提供一个基于网络的安全文明的供多人聊天社交平台。
2.1 系统运行环境需求
该系统是在windows 8.1专业版操作系统下，搭建的运行平台，使用myEclipse作为开发工具，mySql作为数据库，Java语言作为系统后台开发语言。
JSP技术作为前台开发语言，其中使用JavaScript以及Jquery作为脚本语言。工程框架使用Struts+Spring+Hibernate框架。
（1） 服务器配置：
配置apache-tomcat-7.0.39服务器。
（2） 客户端要求配置：
谷歌浏览器、狐火浏览器以及IE浏览器5.0以上版本。
2.2 模块功能分析
（一） 用户注册登录模块
新用户在使用该聊天室系统时，必须先进行注册新用户操作，后台将注册信息添加到数据库中，用于胡勇登录验证；在注册成功之后再进行登录；当用户名与密码匹配成功，即可进入聊天室系统。
（二） 在线用户显示模块
当用户登录进入系统后，该页面实现在线用户的统计，并将在线用户依次显示出来。如果当前用户属于管理员角色，则在普通用户角色的右边显示“踢下线”链接，如果当前用户属于普通用户角色，则正常显示在线用户名。
（三） 用户交流聊天模块
该模块主要负责发送信息内容，选择聊天对象；除此之外，可以修改聊天内容的字体颜色以及发送的表情。发言的颜色和发言的表情通过下拉式组合框实现。发言内容书写完毕后。通过点击“发送”按钮，发送聊天内容。
（四） 聊天信息显示模块
当用户选择聊天对象并发送聊天内容后，显示出当前发送的内容以及之前的历史聊天内容，聊天的内容只有对话的两人可见，其他人不可见。当用户退出系统后，再次登录进入聊天室时，两人的对话记录依然存在。
（五） 系统消息显示模块
系统消息提示所有用户，聊天室的文明守则，以及当其他用户进入、离开或被管理员踢出聊天室的情况。
（六） 管理员管理用户模块
管理员用户可以与其他用户聊天，并且随时监督其他用户的言行，一旦
出现不文明用语，即将改用户踢出聊天室。
（七） 辅助功能
辅助功能包括：显示全部聊天信息、退出聊天室、检测用户是否有新消息。显示全部信息是指当用户之间的聊天信息占满全屏的时候，点击显示全部信息，即可看到全部的聊天内容。退出聊天室是指用户离开聊天室。检测用户是否有新信息，当用户收到其他用户发来的消息时，提示用户。
2.3系统功能结构
图2-1 功能结构图

2.4系统数据流图
2.4.1顶层数据流图

图2-2 顶层数据流图

2.4.2一层数据流图

图2-3 一层数据流图

2.4.3二层数据流图

图2-4 二层数据流图
2.5数据字典
数据项名称：用户名
数据项别名：username
说明：用户唯一标识
类型：varchar
长度：20
取值范围及含义：用户登录聊天室的用户名长度在1~20之内不论数字、字符还是符号。
表2-1 用户名数据字典

数据项名称：密码
数据项别名：password
说明：用户登陆密码
类型：varchar
长度：20
取值范围及含义：用户登录聊天室的密码长度在1~20之内不论数字、字母还是符号。
表2-2 密码数据字典

数据项名称：级别
数据项别名：type
说明：用户身份级别
类型：varchar
长度：20
取值范围及含义：用户登录聊天室的角色，管理员（admin）或者普通用户（user）。
表2-3 级别数据字典

三、 概要设计
3.1系统总体结构设计
3.1.1结构设计系统
图3-1 总体结构图

3.1.2系统功能模块结构
（1） 用户注册登录模块
用户注册是添加用户到数据中，只能注册普通用户，当注册验证信息合格，即可登录进入聊天室。

图3-2 用户注册登录H图

（2） 在线用户显示模块
当用户登录进入系统后，该页面实现在线用户的统计，并将在线用户依次显示出来。如果当前用户属于管理员角色，则在普通用户角色的右边显示“踢下线”链接，如果当前用户属于普通用户角色，则正常显示在线用户名。
（3） 用户交流聊天模块
交流包括选择聊天对象，选择发送表情，字体颜色。

图3-3 用户聊天H图

（4） 聊天信息显示模块
聊天信息的显示，首先系统必须获得与当前用户正在进行聊天的对象，根据聊天对象的用户名，获得存储在系统中的聊天记录，传送到浏览器客户端，浏览器客户端进行1s刷新界面，从而获取两人之间的私密聊天记录并显示在界面上。

图3-4 聊天信息显示H图

（5） 系统消息显示模块
系统信息包括：聊天室守则、系统公告。

图3-5 系统信息显示H图

（6） 管理员管理用户模块
管理员用户可以与其他用户聊天，并且随时监督其他用户的言行， 一旦出现不文明用语，即将改用户踢出聊天室。
（7） 辅助功能
辅助功能包括：显示全部聊天信息、退出聊天室。显示全部信息是指当用户之间的聊天信息占满全屏的时候，点击显示全部信息，即可看到全部的聊天内容。退出聊天室是指用户离开聊天室。
3.2数据库设计
3.2.1概念设计
E-R图：该系统只存在用户一个实体，用户的属性包括：id、用户名、密码、级别。

图3-6 E-R图

3.2.2逻辑设计
用户表
字段名
数据类型
长度
说明
描述
id
int
4
不空
用户id
userName
varchar
20
不空
用户名
password
varchar
20
不空
登录密码
type
varchar
20
不空
用户级别
表3-1 用户表

3.2.3物理设计
数据库类型使用mySql数据库，用户表的主键为id。
四、 详细设计
4.1流程图
4.1.1用户注册登录
用户注册的时候，操作人员输入想取的用户民，输入自创密码与确认密码，点击注册；此时，系统会首先检测两次密码是有一致，若不一致，提示用户密码不一致，请重新输入。若一致，检测用户名是否已经被注册过，若已经被注册，提示是用户，已被注册。若为被注册，系统添加用户注册信息到数据库user表中。界面提示用户注册成功，并跳转到登录界面。注册的用户默认type是普通用户，即user。

图4-1 注册流程图

用户登录的时候，用户输入用户名，密码，点击进入按钮，系统获取用户所填写的用户名与密码，首先判断该用户名是否存在于数据库，若不存在，提示用户不存在该用户，请重新填写或注册，若该用户名存在，则判断密码与用户名是否匹配，若不匹配，提示用户密码错误，请重新填写，若匹配，进入聊天室界面。

图4-2 登录流程图

4.1.2在线用户显示模块
当用户登录进入聊天室时，系统会将用户的信息存入application属性的userMap中，进入系统后，在jsp中获取userMap，将所有的用户信息中的用户名显示出来。

图4-3 显示在线人数流程图

4.1.3用户交流聊天模块
用户实现找人聊天，点击聊天对象的用户名，获取聊天对象，填写发送内容，选择表情、与发送字体的颜色，点击发送即可进行聊天。
在未选择聊天对象时，点击发送，提示用户选择聊天对象；在未填写发送的内容点击发送时，提示用户未填写发送内容。
发送的表情默认为[微笑着]，字体颜色默认为黑色。

图4-4 发送信息流程图

4.1.4聊天信息显示模块
聊天信息显示，首先必须保证聊天对象的用户名不为空，当不为空时，系统将获取用户名，在application作用域中获得，相应的聊天记录属性，返回到jsp中，并显示在界面中。

图4-5 显示聊天记录流程图
4.1.5系统消息显示模块
在用户登录聊天室时，系统存储聊天室的聊天守则，并获取登录的用户名，存储系统公告（XXX进入聊天室！）；当用户离开聊天室时，修改系统公告（XXX离开聊天室！）；当用户被管理员踢出聊天室时，修改系统公告（XXX，被管理员踢出聊天室！）。

图4-6 显示系统信息流程图

4.1.6管理员管理用户模块
当用户使用了不文明的语言，管理员有权利该用户踢出聊天室。获取用户名，在application中的userMap中获得相应的用户session，清除该session即可将用户踢下线。

图4-7 管理员管理用户流程图

4.1.7辅助功能
显示与某人的全部聊天信息，当聊天的内容占满全屏，点击显示全部消息，即可显示全部信息。
当用户离开聊天室时，系统获取当前用户名，并释放user的session。
检测用户是否有新消息：

图4-8 检测信息流程图
4.2算法
4.2.1用户对话存储算法
首先获取进行对话双方的用户名以及id，再比较两者的id若id1<id2，则messageName = userName1 + userName2；否则messageName = userName2 + userName1。

图4-9 用户对话存储算法

4.2.2检测用户是否被踢算法
当用户登录进入聊天室时，向application中存储一个isKickedMap属性，将用户名添加到isKickedMap中并赋值为1（1表示在线，-1表示被踢）。当管理员将某个用户踢下线时，将isKickedMap属性中的改用户名修改成“*”符号，并赋值为-1。Jsp页面每秒刷新一次，当检测到isKickedMap属性中getAttribute（“*”）== -1 时，则该用户被踢下线，此时要在jsp页面中提示用户已被踢下线，并返回登陆界面。

图4-10 检测用户是否被踢算法

4.2.3 检测当前用户是否有新消息算法
Jsp每隔1s就检测一次当前session中的call属性中是否有值，如果有值，返回到jsp中，在jsp中遍历出有个值，并且让id为该值的<tr>标签的背景色为红色。

图4-11 检测当前用户是否有新消息算法

4.3界面设计
4.3.1登录首页
登陆首页是写在index.jsp中的，前台主要运用jsp动态网页技术。并使用JavaScript语言判断用户是否正确输入用户名以及密码。在登录界面可以点击注册用户进入用户注册界面。

图4-12 登录界面

4.3.2注册界面

图4-13 注册界面
4.3.3聊天室界面
聊天室界面：左侧是在线人员列表显示，和在线人数的统计；右侧是专门显示系统公告的地方；中间属于聊天内容的显示；下方是用户发送消息的模块，在该模块中，当用户点击聊天对象的用户名，下方的第一个input框将获取到聊天对象的用户名，还可以选择聊天的表情与字体的颜色，在最下角的input框可以编辑所要说的话，点击发送，即可发送聊天内容。

图4-14 聊天室主界面

4.4工程结构设计
该系统采用SSH（struts2 + spring + hibernate）框架搭建工程。
系统的基本业务流程是： 在表示层中，首先通过JSP页面实现交互界面，负责接收请求(Request)和传送响应(Response)，然后Struts根据配置文件(struts-config.xml)将ActionServlet接收到的Request委派给相应的Action处理。在业务层中，管理服务组件的Spring IOC容器负责向Action提供业务模型(Model)组件和该组件的协作对象数据处理(DAO)组件完成业务逻辑，并提供事务处理、缓冲池等容器组件以提升系统性能和保证数据的完整性。而在持久层中，则依赖于Hibernate的对象化映射和数据库交互，处理DAO组件请求的数据，并返回处理结果。
采用上述开发模型，不仅实现了视图、控制器与模型的彻底分离，而且还实现了业务逻辑层与持久层的分离。这样无论前端如何变化，模型层只需很少的改动，并且数据库的变化也不会对前端有所影响，大大提高了系统的可复用性。而且由于不同层之间耦合度小，有利于团队成员并行工作，大大提高了开发效率。
工程结构中其中：
applicationContext.xml文件是关于配置spring的配置文件，主要是将各种POJO,JAVA，action配置到XML转交给beanfactory管理，降低耦合度。
struts.properties文件配置struts的属性值，程序员可以通过它来管理Struts 2  框架中定义的大量常量。struts.properties 文件是一个标准的properties 文件。
struts.xml 为Struts 2的核心配置文件。struts.xml文件主要负责管理应用中的Action映射，以及该Action包含的Result定义。

图4-15 工程结构

4.5各类功能设计
4.5.1类图

图4-16 工程类图

4.5.2实体类
User.java，属性包括：
private int id;//id
private String username;//用户名
private String password;//密码
private String type;//级别
用于建立与数据库user表表的映射关系，管理用户。
Message.java，属性包括：
private static String comeIn = "走进聊天室！";
private static String goOut = "离开聊天室！";
private static String kicked = "被管理员踢出去！";
用于获取系统公告。
4.5.3数据库操作Dao层
BaseHibernateDAO.java，方法：
public List query(String hql, Object values[],int firstResult, int maxResults)
用于查询数据库。
public Serializable save(Object obj)
用于添加用户到数据库中
4.5.4监听器
MyServletContextListener.java，实现了ServletContextListener接口。
重写方法：public void contextInitialized(ServletContextEvent sce)
用于监听：一旦创建servletContext对象，就添加用户和相应的session进去。使用此监听器可以得到所有登录的用户以及相应的session。
监听器的配置：在WEB-INF下的web.xml中写上下面语句。
<listener>
<listener-class>com.cust.listener.MyServletContextListener</listener-class>
</listener>
实体类实现监听HttpSessionBindingListener接口，当当前用户session.setAttribute(“user”, user)时，运行public void valueBound(HttpSessionBindingEvent event)方法，当session.invalidate()时，运行public void valueUnbound(HttpSessionBindingEvent event)方法。
4.5.5业务逻辑service层
LoginSrvImpl.java，方法：
public Map<String, Object> executeLogin(String username, String password) 用于用户登录，返回值Map：当用户名不存在reMap.put("result", -1);reMap.put("msg", "用户不存在！"); 当密码错误时，eMap.put("result", -2);reMap.put("msg", "密码错误！");登录成功时，reMap.put("result", 1);reMap.put("msg", "登录成功！");reMap.put("user", user);
RegisterSrvImpl.java， 方法：
public int executeRegister(String userName, String password)
用于注册，添加用户到数据库。
public int query(String userName)
用于判断用户名是否已经被注册了。返回值为int，当用户被注册 return -1;
4.5.6工具箱Utils
Utils.java，方法：
public static Map<User, HttpSession> gainUserMap()//获取application里的userMap
public static Map<String, String> gainSysMessageMap()//获取系统消息
public static HttpSession gainToSession(String toId)//得到对方session
public static HttpSession gainCurrentSession()//得到当前session
public static ServletContext gainApplication()//得到application
public static String gainMessageName(String from, String to, String fromId, String toId)//获得聊天消息的名称
4.5.7 Actions
CheckNewMessageAction.java //检测当前用户是否有新消息
CheckUserIsKickAction.java //检测当前用户是否被管理员踢出聊天室
ExitAction.java //当前用户离开聊天室
KickAction.java //管理员踢出语言不文明的用户
LoginAction.java //用户登录
RegisterAction.java //新用户注册
SendMessageAction.java //发送聊天消息给指定用户
ShowSendMessage.java //显示聊天信息
SystemMessageAction.java //显示系统消息
五、 系统实现
聊天室的功能主要是实现用户的发言和观看大家发言的内容，发言界面和聊天内容需要显示在同一屏界面中，以方便发言和观看，另外，通常还需要显示当前在线的人数和用户列表，以方便选择对谁发言。
用户书写发言的界面、聊天内容的显示、用户列表的显示均需要通过单独的页面来实现，为了能在同一屏界面中同时显示多个页面的内容，此时需要利用带框架集的页面来实现。框架集是多个框架的集合，每一个框架可显示一个页面的内容，在同一屏中需要显示多少个页面，就需要创建一个具有多少个框架的框架集来实现，整个框架集最后存盘形成一个页面，以后浏览该页面时，各框架集中的内容就会自动显示出来。
5.1用户注册登录模块
5.1.1用户注册
用户进入注册页面后，根据要求，填写表单中各项数据，单击注册按钮后，将输入的内容通过异步刷新的方式传递给后台处理页面register.action进行写入数据库处理。其中，在进行表单传递的时候，系统还调用了JavaScript的function check（）函数对填入表单的数据进行检验，一旦发现表单中有一个数据项不符合要求，系统便会弹出出错信息，提示用户重新填写。在后台处理页面中，系统先定义对应于表单各数据项的变量，利用Struts2配置，将用户填入表单的数据赋给这些变量，判断用户名是否已经存在，存在返回数据2，前台接收到数据2，提示用户用户名已经被注册，请重新填写，若改用户名有效，但是两次密码不一致，则返回数据1，前台接收到数据1，则提示用户两次密码不一致，请重新输入，这些数据都正确的情况下，存入数据库的时候直接将变量值添入数据库即可，并返回数据4，前台接收到数据4则提示用户注册成功，并跳转到登录界面，用户可以直接用刚刚注册的用户登录进入聊天室主页，若存入数据库失败，则返回数据3，提示用户注册失败。
下面以“zhuwei”为用户名，“111”为密码进行注册，前提是数据库中没有该数据的记录，结果是注册成功。
数据库chatroom，表user中的数据记录：

图5-1 数据库记录

注册界面以及填写的信息，可以看到数据库并没有该数据的记录。

图5-2 注册用户zhuwei

注册成功：

图5-3 注册成功

5.1.2用户登录
用户在聊天室登录界面填入正确的注册信息，单击登录，系统将自动把用户填入的“帐号”、“密码”于数据库中存放的用户注册信息进行比对验证。系统进行用户身份验证时，首先利用Request对象，将用户填入的“帐号”（即用户名）、“密码”传递给预先定义的变量，再使用Select语句，将变量值与用户信息表进行比对
List<Object> list = dao.query(" from User where username=?", username);
当list不为空时，表示该用户名已经注册可以进行登录操作，然后比对密码是否与数据库中的密码一致。
User user = (User) list.get(0);
if(password.equals(user.getPassword()))
如果一致，用户登录成功，页面发生跳转，如果一开始用户名不存在于数据库list == null 或者list.isEmpty()，提示用户用户名错误。如果密码不一致提示用户密码错误。
以Response对象的Redirect方法跳转到聊天主页面，Response对象的Redirect方法是实现页面的跳转，使当前页面跳转到指定的页面。在用户登录进聊天主页面的同时，系统将该用户的用户名以及该用户的session存入application中的userMap集合中，目的是利用userMap集合遍历出所有在线的用户，显示在线用户的用户名。同时，也将该用户存入当前session中，session.setAtrribute(“user”, User);目的是在聊天主页能够获取当前用户的信息，可以通过User对象中的type属性，判断当前用户的级别，是否为管理员，是否有权限踢出其他用户。
通过上述的用户验证和数据传递，系统跳转到聊天页面，此时用户便可在聊天主页面进行聊天交流了。
下面以刚刚注册的用户信息登录进入聊天室：

图5-4 zhuwei用户登录

点击进入，进入聊天室，如下图所示，可以看到该用户已经成功登录并存入application的userMap集合中，当前在线列表中也遍历出来该用户的用户名，系统公告也显示“zhuwei走进聊天室！”。

图5-5 在线人员列表显示 图5-6 系统公告显示

5.2在线用户显示模块
为了存储所有登录进入聊天室的用户，在jsp的内置对象application中设置一个集合属性，userMap<User, HttpSession> 该集合的关键字为User用户对象，值是该用户对象所对应的session值。如此便可以根据user得到user的session值。
为了判断集合中的关键字user对象与传入的user对象相等，在实体类User中重写int hashCode() 与boolean equals(Object obj)方法比较两者的id是否相同，id相同则User对象相同，反之则不相同。
当浏览器进入登录首页，创建servletContext对象，监听器MyServletContextListener监听servletContext对象的创建，就在向application中添加属性userMap<User, HttpSession>;当用户确认登录成功，将User对象user添加到时，在public void valueBound(HttpSessionBindingEvent event)方法中得到userMap，并向其添加当前session与用户user进去。这样application中就有所有登录进去聊天室的用户，所以在jsp页面也就是online.jsp中使用el表达式${userMap}即可将所有在线用户显示出来，如下图所示：

图5-7 在线人员列表显示
当某个用户离开或被管理员踢出聊天室时，系统将得到的userMap集合根据离开的用户的id找到相应的session，清除该session即可删除离开的用户。
在显示当前在线人员列表的时候，首先要判断当前用户是否是管理员，管理员可以踢出其他用户，但是管理员之间是不可以相互踢出，即判断条件为：当前用户的级别等于“admin”并且要显示的用户的级别不等于“admin”，在jsp中写成：<c:if test="${user.type == 'admin' and entry.key.type != 'admin'}"></c:if>
在满足条件的情况下，显示“踢下线”。
<a href="kick.action?id=${ entry.key.id }&userName=${entry.key.username}" class="tixiaxian">踢下线</a>
下面登录一个管理员“aaa”：

图5-8 登录管理员

在用户“aaa”中的在线人员列表中用户“zhuwei”的右边显示“踢下线”操作，但在用户“zhuwei”的在线人员列表当中用户“aaa”的右边不显示“踢下线”操作：

图5-9 aaa的在线人员显示 图5-10 zhuwei的在线人员显示

5.3用户交流聊天模块
进入聊天主页面后，用户便可在主页面下方的发言界面设计书写自己想要说的话，以及想对谁说，同时，系统还提供了发言字体颜色选择、插入表情、图片的功能，如图下图所示，让用户的聊天更有趣味。

图5-11 写对话界面

在点击发送调用JavaScript的send()方法，在发送消息之前，确保已经选择聊天的对象，并将用户名显示在“[zhiwei]对”右边的文本框中，以及发送的内容不为空时，即可调用后台的sendMessage.action。
用户发言界面采用Jsp表单from模式设计，在表单包括发言对象、发言内容、发送内容字体颜色以及发言颜色，并未它们每一个标签写上name值。这些表单数据，通过post的异步刷新方式，提交到后台，后台action的属性中与jsp的标签那么值相同，并为每个属性添加上set方法。在得到这些属性值后，根据Utils.gainMessageName(from,to,fromId,oId);方法得到对话的名称messageName，然后将这些属性值写成html语言：
sourceMessage += "<font color='blue'><strong>" + from
+ "</strong></font><font color='#CC0000'>" + face
+ "</font>对<font color='green'>[" + to + "]</font size='15px'>说："
+ "<font color='" + color + "'>" + content + "</font>（"
+ sendTime + "）<br>";
之后将sourceMessage存入application中：
Utils.gainApplication().setAttribute(messageName, sourceMessage);
到此为止，聊天内容就已经发送，等发言对象端接收并显示消息内容。
在面管理员aaa将发送一段文字给用户zhuwei：

图5-12 aaa向zhuwei发送一条对话

5.4聊天信息显示模块
当聊天对象没有选择聊天对象时，例如用户“zhuwei”开始并没有选择聊天对象“aaa”，但是“aaa”向“zhuwei”发送了消息，此时，系统检测到“zhuwei”有新消息，所有在jsp页面中将把“aaa”的背景色变成红色以提醒“zhuwei”有新消息来自“aaa”，如下图所示。这个功能在辅助功能中介绍：

图5-13 zhuwei检索到aaa有新消息提醒
当选择聊天对象aaa后，jsp开始刷洗界面，并调用JavaScript的方法showSendMessage()，在该方法中还是已post的异步刷新方式，调用后台的showSendMessage.action。在该action中同样将获取application的消息名称，并根据此消息名称获得相应的对话：
String message = (String) Utils.gainApplication().getAttribute(messageName);
如果message不等于null，则向jsp中输出message：
response.getWriter().println(message);
在jsp中的回调函数中获得data，并在id为content的div中显示data：
$("#content").html(sysBBS + data + "</span>");
Jsp界面每隔1s就刷新界面，调用后台showSendMessage.action的action获取最新的消息。例如用户“zhuwei”收到来自“aaa”的消息，如下图所示：

图5-14 zhuwei收到aaa的对话并显示在聊天内容中

用户“zhuwei”回复用户“aaa”：

图5-15 zhuwei向aaa回复一条对话

在用户“aaa”的界面中收到来自“zhuwei”的回话：
图5-16 aaa收到zhuwei的回复

至此，聊天信息的显示完毕。
5.5系统消息显示模块
系统消息包括聊天室守则“欢迎来到聊天室，请遵守聊天室规则，不要使用不文明用语。”的显示；还有就是系统公告的显示。
首先聊天室准则的显示，一旦用户登录进入聊天室守则就被显示在聊天内容的下方，它的实现主要是在jsp中，一旦加载了聊天室主页main.jsp就执行：
var sysBBS = "<span style='font-size:14px; color:red; line-hei