湖南科技大学计算机科学与工程学院
WEB编程课程设计报告
题目：仿QQweb即时聊天系统
学 号： 姓 名： 指导老师： 完成时间：
目录
1.项目概述 ....................................................................................................................................................1 1.1项目背景 ............................................................................................................................................ 1 1.2项目功能 ............................................................................................................................................ 1 1.3项目开发工具及所需的框架........................................................................................................ 1 2.系统需求分析 ...........................................................................................................................................2 2.1系统任务描述 ................................................................................................................................... 2 2.2系统功能分析 ................................................................................................................................... 2 2.3系统可行性分析 .............................................................................................................................. 2 3.系统设计 ....................................................................................................................................................2 3.1数据库设计 ........................................................................................................................................ 3 3.2系统功能模块 ................................................................................................................................... 4 3.3系统处理流程 ................................................................................................................................... 5 3.4系统模块划分 ................................................................................................................................... 5 4.详细设计级界面设计 .............................................................................................................................5 4.1注册登录 ............................................................................................................................................ 5 4.2添加好友 ......................................................................................................................................... 10 4.3一对一聊天 ..................................................................................................................................... 12 4.4创建群以及群聊 ........................................................................................................................... 13 5心得体会 ................................................................................................................................................. 15
1、项目概述
1.1项目背景
JavaEE方面：jsp+servlet，会简单的Struts，Spring； 前端方面:html，css，会使用Bootstrap前端工具开发集；
数据库:熟悉jdbc与数据库的连接，会基本的增删改查SQL语句，简单使用过Hibernate。 1.2项目功能 注册、登录功能 查看所有好友、群组
查找好友、添加好友（可以附带验证消息） 一对一聊天
创建群组、查看群组成员、邀请好友进群 群聊
1.3项目开发工具及所需的框架
开发工具:Intellij IDEA，前端写html，css基本样式使用Dreamweaver（修改反馈速度较快），写js并且与后端调试是使用Intellij IDEA。 依赖管理：Maven 数据库：MySQL
后端框架：Spring MVC + Hibernate 通信协议：WebScoket 第三方jar包:Java-WebScoekt 前后端数据交互格式：json
前端框架和工具:Bootstrap 这是一个非常流行的前端工具开发集，可以借助这套工具进行快速得前端开发；
Layer.js 一个基于Jquery的弹出层解决方案，可以说我这个项目的前端基本就是依靠这个插件建立起来的（注意区分LayerUI和Layer.js，前者是类似于Bootstrap的前端开发工具集，后者只是一个插件，而且后者是开源的，本项目中只是用了后者）。 原生javascript语法。
- 1 -
2、系统需求分析 2.1系统任务描述
实现Web的点对点即时的文本消息聊天功能； 实现Web的表情的发送、接收和显示功能； 实现Web的图片的发送、接收和显示功能；
实现本地消息的存储，在离线的时候也能加载和查看历史消息； 要求使用WebSocket。
2.2系统功能分析
聊天系统程序通常需要完成以下一些基本功能： 1)登录聊天系统； 2)启动服务器 3)关闭服务器 4)用户之间的聊天 5)退出聊天室
2.3系统可行性分析
技术可行性：使用Swing 和socket技术，可以很轻松地开发出实用、简便、高效的基于网络的即时通讯系统。因此技术上是可以实现的； 经济可行性：计算机网络已经普及，因此在网络设备上不需要进行大的投入。本系统需要一个MySQL数据库服务器，由于并发使用人数比较少，tomcat可以作为web服务器，所以成本很低。
操作可行性：只要一台以上计算机连接在同一个局域网内，本系统就可以安装使用，所以操作上完全不存在问题。如果要实现internet上通讯，只需要将服务器端运行在一个有固定IP的公网上就可以。 综上所述，即时Java即时通讯系统是可行的。
3、系统设计
系统设计是本系统开发的重要阶段，它直接影响目标系统的质量，是整个开发工作的核心。系统设计阶段主要任务是：在系统分析提出的逻辑模型
- 2 -
的基础上，科学合理地进行物理模型设计。
3.1数据库设计
本系统主要涉及的主要实体及其属性和关系表有：
用户表User_main（用户ID，用户名，用户昵称，用户是否在线），如下表：
用户详细信息表user_detail(用户ID，用户名，用户昵称，用户密码，用户的邮箱地址，用户的手机号，用户注册的时间)，如下表：
聊天记录表message（接收方ID，发送方ID，内容，发送时间），如下表：
群组表group_main(群ID，群名，群主ID，群创建时间，群介绍，群人数，群成员)，如下表；
- 3 -
用户、群关系表user_group_relation(用户ID，群ID，群等级，群用户昵称，用户加群时间)，如下表；
用户好友关系表user_relation(用户A的ID，用户B的ID，加好友的时间)，如下表；
3.2系统功能模块
- 4 -
3.3系统的处理流程
3.4系统模块划分 服务器：
数据库访问(dao)
业务逻辑处理（Service） 请求控制（Controller）
通信服务器端（WebSocket Server）
Web端：
前端UI
逻辑处理(js)
通信客户端（WebSocket Client）
4、详细设计及界面设计 4.1注册、登录
首先进去的是欢迎界面，欢迎界面有登录和注册两种选项
- 5 -
点击登录，即进入登录界面，登录时将对用户名进行检测，如果用户名为空、数据库内不存在当前的登录的用户名、用户名正确但是密码错误等情况时将会弹出错误提醒窗口
用户名以及密码检测核心代码如下：
- 6 -
function checkLogin(){ var user = {};
user.userName = document.getElementById(\"userName\").value;
user.userPassword = document.getElementById(\"userPassword\").value; if(user.userName == ''){
layer.msg('用户名不能为空',{icon:2}); return; }
else if(user.userName.length >= 12){
layer.msg('用户名长度不能超过12个字符',{icon:2}); return; }
else if(user.userPassword == ''){
layer.msg('密码不能为空',{icon:2}); return; }
var loginResult = null; $.ajax({
async : false, //设置同步 type : 'POST',
url : '${cp}/doLogin', data : user,
dataType : 'json',
success : function(result) { loginResult = result.result; },
error : function(result) {
layer.alert('查询用户错误'); } });
if(loginResult == 'success'){
layer.msg('登录成功',{icon:1}); window.location.href=\"${cp}/main\"; }
else if(loginResult == 'unexist'){
layer.msg('是不是用户名记错了？',{icon:2}); }
else if(loginResult == 'wrong'){
layer.msg('密码不对哦，再想想~',{icon:2}); }
else if(loginResult == 'fail'){
layer.msg('服务器异常',{icon:2}); }
对服务器的登录请求控制的核心代码如下；
- 7 -
@ResponseBody
public Map User user = this.userService.getUser(userName); UserDetail userDetail = this.userDetailService.getUserDetail(userName); if (user != null) { if (Objects.equals(userDetail.getUserDetailPassword(), userPassword)) { httpSession.setAttribute(\"currentUser\", user); result = \"success\"; } else { result = \"wrong\"; } } else { result = \"unexist\"; } Map results.put(\"user\", JSON.toJSON(user)); } return results; 接下来是注册界面，注册包括用户名、昵称和密码的注册，如果用户名已被注册时将会弹出提醒对话框