湖南科技大学计算机科学与工程学院
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语法。
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、系统设计
系统设计是本系统开发的重要阶段，它直接影响目标系统的质量，是整个开发工作的核心。系统设计阶段主要任务是：在系统分析提出的逻辑模型
的基础上，科学合理地进行物理模型设计。
3.1数据库设计
本系统主要涉及的主要实体及其属性和关系表有：
用户表User_main（用户ID，用户名，用户昵称，用户是否在线），如下表：
用户详细信息表user_detail(用户ID，用户名，用户昵称，用户密码，用
户的邮箱地址，用户的手机号，用户注册的时间)，如下表：
聊天记录表message（接收方ID，发送方ID，内容，发送时间），如下表：
群组表group_main(群ID，群名，群主ID，群创建时间，群介绍，群人数，
群成员)，如下表；
用户、群关系表user_group_relation(用户ID，群ID，群等级，群用户昵称，用户加群时间)，如下表；
用户好友关系表user_relation(用户A的ID，用户B的ID，加好友的时间)，如下表；
3.2系统功能模块
3.3系统的处理流程
3.4系统模块划分
服务器：
数据库访问(dao)
业务逻辑处理（Service）
请求控制（Controller）
通信服务器端（WebSocket Server）
Web端：
前端UI
逻辑处理(js)
通信客户端（WebSocket Client）
4、详细设计及界面设计
4.1注册、登录
首先进去的是欢迎界面，欢迎界面有登录和注册两种选项
点击登录，即进入登录界面，登录时将对用户名进行检测，如果用户名为空、数据库内不存在当前的登录的用户名、用户名正确但是密码错误等情况时将会弹出错误提醒窗口
用户名以及密码检测核心代码如下：
function checkLogin(){
var user = {};
https://www.doczj.com/doc/6a15990790.html,erName = document.getElementById("userName").value;
https://www.doczj.com/doc/6a15990790.html,erPassword = document.getElementById("userPassword").value;
if(https://www.doczj.com/doc/6a15990790.html,erName == ''){
layer.msg('用户名不能为空',{icon:2});
return;
}
else if(https://www.doczj.com/doc/6a15990790.html,erName.length >= 12){
layer.msg('用户名长度不能超过12个字符',{icon:2});
return;
}
else if(https://www.doczj.com/doc/6a15990790.html,erPassword == ''){
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});
}
对服务器的登录请求控制的核心代码如下；
@ResponseBody
public Map
String result = "fail";
User user = https://www.doczj.com/doc/6a15990790.html,erService.getUser(userName);
UserDetail userDetail = https://www.doczj.com/doc/6a15990790.html,erDetailService.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("result", result);
if (result.equals("success")) {
results.put("user", JSON.toJSON(user));
}
return results;
接下来是注册界面，注册包括用户名、昵称和密码的注册，如果用户名已被注册时将会弹出提醒对话框