1、要求

类QQ聊天工具的设计与实现，要求如下：

1. 用户可注册并通过密码录登。

2. 用户可通过查找添加自己的好友。

3. 用户可通过好友列表选择好友并与之对话。

4. 需实现聊天记录查看功能。

5. 界面美观大方，交互设计尽量参考QQ。

6. 代码结构合理，可复用性高。能够合理的综合运用课程中的讲授的技术。

7. 支持图片发送及文件传送，相应需要具备文件的保存（加分）。

8. 在此基础上可以增加其它合理功能（加分）。

2、功能描述

1.用户登录：未注册用户需先设置id号（10位数字）及密码（8-12位数字或字母）进行注册后登录；已注册用户可以通过id号以及密码进行登录，在登录后可以添加好友与好友进行聊天。

2.添加好友：登录进入QQ后在联系人界面可以选择添加好友，通过搜索好友的id号向好友发送申请添加好友请求，好友接受申请后则添加好友成功。

3.选择好友进行对话：登录QQ后在联系人界面或者消息界面均可选择好友与之进行对话。

4.发送图片：进入聊天界面后，点击图片按钮选择想要发送的图片，可发送图片给好友。

5.查看聊天记录：在消息界面显示与好友最后一句聊天记录，进入与好友的聊天界面后可查看与好友之间的聊天记录。

6.换头像昵称：对已注册用户的头像和昵称进行修改。

3、类QQ聊天工具的总体设计

3.1、聊天工具聊天的主要流程

根据功能描述，本系统主要实现注册账号、QQ好友的添加和聊天功能的实现:本系统通过JDBC（数据库连接），实现了查询和更新数据库中数据的方法；通过HTML、CSS，JS实现QQ聊天页面的设计；通过JSP实现动态页面的设计，通过WebSocket解决服务器主动给客户端发消息的难题。系统的功能特点如下：

1. 页面模块化：系统界面的设计使用模块化处理，如把页面的登录、注册、聊天等界面做成单独的文件，在其它页面设计中需要时把其它页面的相应内容包括进去了，这样有利于页面风格比较统一以及开发系统的效率。

2. 数据库的自动更新：在创建用户信息时，将自动创建相应的数据库，使得系统得以自动更新。

3. 功能较完善：功能方面包括QQ的注册、登录、好友请求发送，添加好友、发送、接收信息（图片）等，较为完整的实现了QQ聊天工具的部分功能。

因此此QQ聊天工具的主要数据结构设计图如下：

图3.1 数据结构设计图[1]

3.2、数据库设计

3.2.1、 E-R图

根据功能描述以及数据结构设计图，可以画出类QQ聊天工具的E-R图[2]如下图所示：

图3-2 E-R图

绘制出E-R图之后，可以进行数据库设计了，首先创建一个名为qqchat的数据库，包含用户表user，头像表imgs，用户名表usernames，离线消息表messagenotes_offlone，消息表messagenotes。

3.2.2、 数据库中表的结构[3]

1.用户表user

此表主要用于来存储注册用户而生成的用户信息，包括用的id以及用户设置的密码，主键设置为id。

表一user表

2. 头像表imgs

这个表用来存放QQ用户的头像，包括id号和图片路径，其中id为主键。表二imgs表

3. 用户名表usernames

这个表用来存储已创建的用户，包括id号和用户名，其中id为主键。

表三usernames表

4. 离线消息表 messagenotes_offline

这个表用来存储离线后发送、接收信息双方的id、信息以及发送的日期，其中num为主键。

表四messagenotes_offline表

5. 消息表messagenotes

这个表用来存储发送、接收信息双方的id、信息以及发送的日期，其中num为主键。

表五messagenotes表

3.3 类设计及类调用时序

本款类QQ聊天系统主要设计了User、friend、OneMessage、OneMessageBox、ProfilePhoto、JDBC、WSChat等类，类与类之间有相应的关系，以下为此类QQ聊天工具里的一些重要的调用时序图：

图3-3 类调用时序图

各类的UML类图[4]：

图3-4 JDBC UML类图

图3-5 User UML类图

图3-6 friend UML类图

图3-7 ProfilePhoto UML类图

图3-8 OneMessage UML类图

图3-9 OneMessageBox UML类图

图3-10 chatLog UML类图

图3-11 dealCVS UML类图

图3-12 friendList UML类图

图3-13 friendList UML类图

图3-14 NewFriendApply UML类图

图3-15 register UML类图

图3-16 UploadImageOrName UML类图

图3-17 WSChat UML类图

3.4、页面设计及说明

登陆页面

登陆页面可以跳转到注册页面实现新用户注册，登陆页面通过正则表达式[5]判断对登陆用户进行第一步判断，成功则进一步在数据库判断是否存在该用户，存在则登陆成功，否则失败。

图3-17 登陆页面

注册页面

注册页面可以跳转到登陆页面，实现新用户的注册，使用正则表达式判断用户输入是否符合格式，符合格式在数据库中判断是否用户名重复，重复则不能注册用户，不重复则成功注册用户，同时跳转到登陆页面。

图3-18 注册界面

消息页面

新用户的消息页面刚开始没有消息，当用户好友或者用户本身给好友发消息后便在消息页面显示消息框(图3-19界面),当有消息框的时候，点击消息框可进入好友聊天界面，与好友畅聊。

图3-19 消息界面

联系人页面

联系人页面默认没有好友(图3-20),当用户添加好友成功后显示图8-2界面。点击某一个好友框也可以进入到聊天界面与该好友畅聊。

图3-20 联系人界面

聊天页面

每次打开聊天界面都会发送ajax请求[6]读取近日的5条聊天记录。当用户点击发送后会首先判断内容是否为空文本，是则不发送，不是则发送。点击图片按钮选择图片可以发送图片。点击最上方的返回按钮(左边的符号)可以退回到消息页面，点击最上方的聊天记录按钮(右边的符号)可以查看聊天记录。

图3-21 聊天界面

聊天记录页面

点击聊天记录页面会发送ajax请求到后端，返回序列化对象。点击上方的返回按钮可以退回到聊天页面。

图3-22 聊天记录界面

添加好友页面

点击取消则退出该页面，点击确定首先进行判断输入的id号是否符合注册时的id号，符合则发送成功。

图3-23 添加好友界面

同意好友申请页面

默认没有好友申请(图3-24界面)，如果他人给你发了好有申请则显示图12-2界面。点击同意则在双方页面上都显示对应的好友，点击拒绝则消失，点击确定退出该页面。

图3-24 同意好友申请界面

图3-25 同意好友申请界面

换头像和昵称页面

点击头像可以进行换头像或者换名字，点击提交后会进行正则判断，若名字符合规范则成功否则不成功，点击取消则退出该页面。

图3-26 换头像和昵称界面

4、进一步迭代的方向

4.1可添加功能

1. 可添加QQ空间、QQ邮箱等功能.

2、在登陆界面可添加记住密码，找回密码，自动登录以及扫码登录等功能模块。

具体实现：找回密码可以在注册时添加可作为主码的属性，通过查询该属性即可找回密码。

而自动登录以及记住密码可通过cookie实现。

2、好友分组

具体实现：只需在数据库中新建一个数据库存放分组状况，在展现时先访问该数据库，通过该数据库的情况进行显示。

2. 特别关心

具体实现：在数据库中新建一个数据库存放特别关心的情况。

4.2可优化方向

1、访问受阻

在进行离线添加与聊天时经常出现访问受阻，http500的报错。查询发现可能与idea中项目缓存和浏览器缓存相关，可以优化缓存情况。

2、后端数据库过多

每次新建一个账户都会多多个数据表，重构数据库进行优化

3、图片读取效率低下

有极小概率出现图片读取失败的情况。

5、引用文献

[1]樊莉丽. 软件工程的流程图设计与逻辑应用[J]. 产业与科技论坛, 2014(11):2.

[2]牛荣, 陈纪龙, 杜义君. 数据库设计中ER模型设计的一些基本问题探讨[J]. 信息技术与信息化, 2019(7):4.

[3]李延惺, 刘著国, 殷利建,等. 一种基于JDBC数据库连接技术的WEB框架平台软件的自动搭建方法和系统:, CN111026389A[P]. 2020.

[4]李建东. 论基于UML的需求分析[J]. 电脑编程技巧与维护, 2020(9):2.

[5]赵书慧. 正则表达式在JSP登录页面中的应用[J]. 才智(10期):73.

[6]唐小玲. 基于AJAX异步交互技术的门户网站构建[J]. 电脑知识与技术:学术版, 2021, 17(32):2.