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、CSSJS实现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.