基于SSM的Web网页聊天室系统

目录
第1章前言 1
1.1 论文研究的目的和意义 1
1.2 国内外研究综述 2
1.3 论文研究的内容和取得的成果 2
第2章即时通讯聊天系统开发涉及技术简介 4
2.1 Spring简介 4
2.2 SpringMVC简介 4
2.3 MyBatis简介 5
2.4 AmazeUI简介 5
2.5 开发工具介绍 5
2.5.1 Eclipse集成开发环境 5
2.5.2 Tomcat服务器 6
第3章即时通讯聊天系统需求分析和总体设计 7
3.1 系统可行性分析 7
3.1.1 法律可行性分析 7
3.1.2 技术可行性分析 7
3.1.3 经济可行性分析 7
3.1.4 操作可行性分析 7
3.2 需求分析 7
3.2.1 登陆页面 8
3.2.2 个人信息页面 8
3.2.3 设置页面 8
3.2.4 注销页面 8
3.2.5 用户页面 8
3.2.6 聊天页面 9
3.2.7 在线列表页面 9
3.2.8 图灵机器人功能 9
3.3 系统总体设计 9
3.3.1 SSM框架配置 9
3.3.2 即时通讯聊天系统总体设计 12
3.3.3 路由设计 13
3.3.4 用户登录界面 14
3.3.5 用户聊天主界面 14
3.3.6 数据库设计 15
第4章系统实现及效果分析 17
4.1 用户登录界面 17
4.2 用户聊天主界面 18
4.2.1 状态栏模块 19
4.2.2 功能栏模块 19
4.2.3 用户列表模块 22
4.2.4 用户聊天模块 22
结论 26
致谢 27
参考文献 28

3.3系统总体设计
通过SSM框架和JSP,前端的设计使用了Amaze UI，弹窗和分页使用了Layer和JQuery。
首先，在进行开发之前，先将Amaze UI, Laye以及JQuery下载下来，导入进入工程中，如图3-2所示。
在这里插入图片描述

图3-2导入所需文件
3.3.1SSM框架配置
要使用SSM框架进行醒目开发，首先我们需要将框架进行整合，这次整合将SSM分为了两个配置文件，分别是spring-mvc.xml 和spring-mybatis.xml,前者是spring-mvc的配置文件，后者包含了spring和mybatis的配置文件。当然，还包括两个资源文件jdbc.properties和log4j2.xml。如图3-3所示。
在这里插入图片描述

图3-3配置文件
（1）Spring和MyBatis的整合;
整合之前，首先需要导入项目开发需要的所有jar包，然后建立JDBC属性文件即jdbc.properties文件。jdbc.properties[15]文件内容如下：
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/zhoutao?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
username=root
password=123456
initialSize=0
maxActive=20
maxIdle=20
minIdle=1
maxWait=60000
建立spring-mybatis.xml整合文件，主要内容无外乎自动扫描，自动引用，配置数据库等。相关代码如下：

<context:component-scan base-package="com.amayadream.webchat.*" ><context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan><!-- 引入jdbc配置文件 -->
<bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"><property name="location" value="classpath:config/jdbc.properties" />
</bean><!-- 配置数据源 -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"><property name="driverClassName" value="${driver}" /><property name="url" value="${url}" /><property name="username" value="${username}" /><property name="password" value="${password}" /><!-- 初始化连接大小 --><property name="initialSize" value="${initialSize}"/><!-- 连接池最大数量 --><property name="maxActive" value="${maxActive}"/><!-- 连接池最大空闲 --><property name="maxIdle" value="${maxIdle}"/><!-- 连接池最小空闲 --><property name="minIdle" value="${minIdle}"/><!-- 获取连接最大等待时间 --><property name="maxWait" value="${maxWait}"/>
</bean>

（2）SpringMVC的整合;
springmvc.xml文件主要包括自动扫描控制器，视图模式，注解启动等，当然由于我需要上传文件显示，所以为了防止文件被拦截需要在其中特殊设置一下：<mvc:resources location=“/” mapping=“/**/*.jpg” />。主要代码如下：

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">…
<mvc:interceptors><!-- 登陆拦截器,负责拦截未登录的操作 --><mvc:interceptor><!-- 需要拦截的地址 --><mvc:mapping path="/**"/><!-- 需要排除拦截的地址 --><mvc:exclude-mapping path="/static/**"/><bean id="loginInterceptor" class="com.amayadream.webchat.interceptor.LoginInterceptor">…
<!-- 开启注解模式 -->
…
<!-- 静态资源映射 -->
…
<mvc:resources location="/" mapping="/**/*.jpg" />

最后，再在web.xml文件中对spring-mybatis.xml进行引用以及配置spring-mvc的servlet就完成了SSM框架的整合，web.xml文件相关配置没有什么值得注意的地方。
3.3.2即时通讯聊天系统总体设计
整个系统总体设计如图3-4所示，主要分为：
(1)登录页面：用户在该界面进行登陆，验证账号密码正确之后之后跳转到聊天主界面。
(2)聊天页面主页：用户进入界面默认为群聊，能够在此界面进行群聊，可以通过左边的功能栏中的进行查看个人信息，个人设置，查看系统日志等。
(3)右边的用户列表栏显示当前链接的用户，可以选择与用户私聊和进行视频。
(4)点击私聊可以发送信息进行私聊。
(5)点击在线用户的视频按钮向对应用户发送视频请求，对方同意后可以进行一对一视频通话。
在这里插入图片描述

图3-4 系统总体设计
3.3.3路由设计
确定了本系统的总体设计之后，明确了系统所需要的界面，根据各页面设置相应的路由。在RouteCotroller使用RequestMapping()进行地质映射来实现。RequestMapping是一个用来处理请求地址映射的注解，可用于类或方法上。用于类上，表示类中的所有响应请求的方法都是以该地址作为父路径。系统各页面以及对应路由如表3-1所示：
在这里插入图片描述

表3-1 路由对应表
各分类模块对应页面对应路由
登陆 login.jsp /user/login
聊天主页 Index.jsp /chat
个人信息 information.jsp /Userid
个人设置 Info-setting.jsp /userid/cofig
日志 log.jsp /log
帮助 help.jsp /help
关于 about.jsp /about
系统设置 systemsetting.jsp /systemsetting
具体实现代码如下：
@RequestMapping(value = “”)
public class RouteController {

@RequestMapping(value = "")
public String index() {return "redirect:/user/login";
}@RequestMapping(value = "/about")
public String about() {return "about";
}@RequestMapping(value = "/help")
public String help() {return "help";
}@RequestMapping(value = "/systemsetting")
public String systemsetting() {return "systemsetting";
}

}
3.3.4用户登录界面
登录界面主要使用了query-2.1.4.min.js，login.css，layer.js来进行UI的设计。
3.3.5用户聊天主界面
主聊天界面主要分为四个部分，分别是顶部的状态栏模块，左侧的功能栏模块，右侧的用户列表栏模块以及中央的聊天栏模块。
（1）状态栏模块
顶部状态栏主要用于显示应用的名称以及右侧的导航下拉菜单。下拉菜单通过：下拉菜单包括个人资料，设置，注销三个功能。分别可以进入个人资料界面，个人设置界面，以及注销用户返回登陆界面。
（2）功能栏模块
功能栏主要有显示个人信息，个人设置和系统设置，查看系统日志，获取帮助，关于和注销功能。整个功能栏的主要思路就是通过${user.**}来获取用户对应的字段的值。再在jsp中展示出来。其中比较重要的功能为修改用户的头像。用户的头像在个人资料，聊天信息框中均可展示。所以这个实时根据用户的选择更新还是比较重要的。
（3）用户列表模块
对于右侧的列表模块，用于显示当前在线的用户名，其中还包含了一个图灵机器人功能，点击上线按钮，调用tuling提供的api接口可以让其与自己进行对话沟通。
其次，显示出来的每一个在线用户(除开自己以外)还有两个按钮，分别是私聊和视频通话功能。私聊按钮就是点击之后将当前获取的用户名加入到to中去，实现私聊。
（4）用户聊天模块
对于用户发送的信息，可以分为两个类型：massage和notice,massage表示用户输入的信息。notice表示一些提示消息，如：用户登入，用户离开以及图灵机器人的接入的接出。所以需要在传输和获取数据的时候对这两类信息分别进行处理。用户还会将用户列表中的信息一起发送，用于其他用户更新用户列表。
对于私聊和一对多的聊天处理的想法是，用一个string 类型的对象to来存储一段文本，初始设置为空，即想所有人发送消息，当用户点击私聊按钮后，就将该按钮对应的用户的userid存放到to里面去，可以存放多个用户的userid，用“，”分隔开。这样子在发送的时候就可以使用split()方法将字符拆分存到一个数组里面再通过循环访问数组来发送消息就可以实现一条消息发送给多个指定的人了。
3.3.6数据库设计
整个数据库的内容并不复杂，只需要两个表user和log。User表存储用户的相关信息。如：用户名，密码，昵称，头像，简介等。User表结构如图3-5所示。
在这里插入图片描述