基于JSP技术和SSM框架的Web聊天系统的设计和开发

摘要

随着当今社会经济的飞速发展和地球村的建设，现在的人们在平常的生活中由于平常的工作生活等原因，造成了许多亲朋长时间无法见面的情况。沟通交流的缺失造成了许多人感情的淡薄。而在现在飞速发展的网络技术的支持下，越来越多的人选择通过网络即时通讯系统来进行每天的沟通，常用的PC端的QQ，移动端的微信等。然而现在流行的通讯软件大多都需要下载安装专用的客户端才能实现通讯。

本论文在JSP技术和MVC设计模式的基础上，对WEB即时通讯系统进行了需求分析和总体设计，框架采用Spring + Springmvc + Mybatis，前端设计使用Amaze UI，弹窗和分页使用Layer以及JQuery，数据库使用Mysql，并最终使用流行的Eclipse开发环境实现了整个系统。通过运行和测试，本聊天系统功能基本完善且运行稳定，能够满足客户在实际使用中的需求。

关键词 ：WEB聊天；JSP；SSM；Eclipse；Amaze UI

Abstract

With the rapid development of social economy and the construction ofa global village, people now in normal life due to normal working life, causedmany relatives and can't meet for a long time.The lack of communication causedby weak feelings of many people.And with the support of the rapid developmentof network technology now, every day more and more people choose the network tocommunication, such as commonly used the PC QQ, mobile WeiXin, But now mostpopular communication software need to download and install a dedicated clientto realize communication.

Based on JSP technology and MVC design patterns, this paper carrieson the demand analysis and the overall design on the WEB chat system., the Spring + Springmvc + Mybatis is used as theframework, Amaze UI is used as the front design, Layer and JQuery is used asthe popups and paging, Mysql is used as the database, and the whole system isrealized in the popular Eclipse development environment. The testing resultshows that the functions of the chat system is basically perfect and runsmoothly, it can meet the needs of users in actual use.

Keywords :WEB chat; The JSP; SSM; The Eclipse; Amaze UI

第1章前言

1.1 论文研究的目的和意义

即时会话由于人们对于信息及时性的需求成为了当前社会的一个热门技术[1]。随着计算机网络通信技术和国家网络建设的飞速发展，网络已经全方位的进入人们的日常生活中，网络购物每年的成交量和使用率都在上涨，随之而来的是物流快递行业的飞速发展。近些年来，远程教学，远程就诊也已经实现或是基本实现，而在网络世界，彼此隔着计算机的人们只有通过网络会话才能够传递自己的信息和理解别人的意思。这都离不开网络即时通讯技术。只有及时清晰的表达和理解，才能够让网络交流达到面对面交流的效果。

即时通讯系统是指通过现有的各种电气通讯传输媒体，将人物的静态或动态图像、语音、文字、图片等多种信息分送到各个用户的计算机上，使得在地理上分散的用户可以共聚一处，运用图片，文字，声音等多种方式传递信息[2]，能够更好地让交流的双方理解到对方的本意，解决非面对面沟通时信息传递的阻碍，便于人们进行远程沟通交流。即时通讯系统能够有效地传递及时准确的信息；提高各个机构工作实施的效率；便于分隔两地的人们进行交流沟通；便于集思广益，共同商讨意见和看法。这都将给使用者带来直接或者是间接的利益和便利。正是由于即时通讯系统有着上述诸多优点，使得人们对其青睐有加。自然，有了需求就会催生出各种不同的产品来满足人们的需求[3]。

即时通讯系统在我国开始发展的初期，政府部门的应用就占据了重要位置，覆盖中央到直辖市和各省会城市的国家骨干网已经完工。自1994年9月投入使用以来，国务院等机关先后利用该网召开了三百多次全国范围的即时通讯会议。整个系统运行情况良好，得到了国家领导人和各部委领导的高度赞扬[4]。

随着国家网络建设的发展，渐渐地即时通讯系统更广泛的应用于现代企业和人们的日常生活中。经济全球化以及地球村的建设使得所有人特别是企业都要有敏锐的嗅觉，能够及时的获得更多的信息，做出更快的反应和决策，得到最快速的实现。视频会议跨越空间，成本低，损耗小的特点自然成为人们的首选。然而，现在许多视频会话系统尤其是企业内部的即时通讯系统为了保障安全性都是基于C/S模式的，需要下载安装客户端才能运行。因此，本论文旨在运用现今流行的技术设计和开发一个不需要下载任何客户端，只需要一个浏览器就可以进行会话沟通的即时通讯聊天系统。其目的是能够让普通的人在上面畅聊交友，也可以实现与特定用户的沟通交流。

首先，本文对JAVA进行了深入的学习和研究。其次，以JSP技术和MVC设计模式为基础，采用SSM框架对整个系统进行了需求分析和各个功能块的设计和实现，使用Amaze UI对UI界面进行设计。

1.2 国内外研究综述

随着时代的发展和网络通讯技术的飞速发展，对于高昂的长途电话费用不满的人们越来越多的选择了通过网络来进行远距离的沟通和交流。而现在的即时通讯聊天系统也已经不是多年前专为各大公司开发的内部系统了。实时，便捷，易于使用和操作成为了现今即时通讯系统的重要标杆。

由于现在手机移动端的兴起，我国现有的即时通讯软件如QQ，微信都是支持移动端的。当然为了追求信息安全等原因PC端基于B/S结构的即时通讯系统依旧是企业和政府部门的首选，各个公司内部的软件也能够实现通信交流。

腾讯公司的官方数据显示,我国使用QQ聊天软件的用户已经达到了2.6亿人,活跃用户接近了8000万,而同时在线的人数也已经超过了800万,所以,腾讯QQ可以说是我国使用用户数量最多的个人即时通讯软件,占我国70%左右[5]。QQ是一款十分出色的软件，不只是在PC端，在移动端也已经成为了必装应用之一。

国外自从上世纪90年代美国在线(America Online，AOL)带动实时通讯（instant messaging，以下简称IM）风行一时以来，IM改变了人们沟通的方式[6]。目前国外最大的三个即时通讯软件分别为AOL的AIM、雅虎的Yahoo Messenger和微软的Windows Live Messenger[7] ,而前段时间微软与腾讯在中国市场的争斗也说明了了该领域蓬勃的生机。

1.3 论文研究的内容和取得的成果

本文将着重研究JSP和SSM框架，对Web聊天系统进行详细的需求分析，并使用MVC设计模式对网站系统进行设计，最终利用Eclipse 开发工具实现网站的全部功能。使用JQuery和Layer进行弹窗和分页。通过使用Amaze UI对前端的UI进行设计。通过论文研究设计取得了以下研究成果：

熟练掌握JSP以及使用现有的UI设计框架进行开发。
在通过对SSM框架的学习和实践，对系统整体结构有了更深入的了解。
学习使用了My SQL数据库系统，并且使用My SQL建立了Web聊天系统网站的后台数据库系统，能够存储用户的相应信息并与前台进行交互显示。
在分析设计的基础上使用Eclipse对网站系统后台采用JAVA语言进行了开发，实现了具有文字聊天功能，能够设置修改用户信息的聊天系统。

第2章即时通讯聊天系统开发涉及技术简介

本系统项目使用Maven构建，采用Spring + Spring MVC + Mybatis作为框架。后台使用的语言是JAVA，数据库使用的是MySQL 前端采用Amaze UI,弹窗和分页使用的是Layer,当然还有Jquery。开发工具使用的是Eclipse。

2.1 Spring简介

Spring是轻量级的Java开发框架，最初是由Road Johnson在其著作Expen-One J2EEDevelopmentand Design中阐述的部分原理和原型衍生出来的。其目的是为了解决企业应用开发的复杂性，Spring最主要的特点就是使用基本的JavaBean来完成以前有EJB完成的事情[8]。其核心是控制反转(ioC)和面向切面(AOP)。

IOC：inverse of Control：控制反转。本意就是不需要程序员再像以往一样通过代码来控制程序之间的关系。而是通过容器根据信息中得到的关系注入组件来确定关系。当然，依赖注入和控制反转其实就是一个东西。总之，就是通过容器来控制关系，解放程序员集中注意力到业务逻辑的实现上面，减少开发工作量。本次开发采用的是set注入方式。

Spring除了IOC之外的另一个关键组件就是面向切面AOP，由于AOP并不是必须需要使用的组件，所以这里就不做过多介绍了。

2.2 SpringMVC简介

Spring MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架，即使用了MVC架构模式的思想，将Web层进行职责解耦，基于请求驱动指的就是使用请求-响应模型，

Spring MVC也是服务到工作者模式的实现，但进行可优化。前端控制器是DispatcherServlet；应用控制器其实拆为处理器映射器(HandlerMapping)进行处理器管理和视图解析器(View Resolver)进行视图管理；页面控制器/动作/处理器为Controller接口（仅包含ModelAndView handleRequest(request, response)方法）的实现（也可以是任何的POJO类）；支持本地化（Locale）解析、主题（Theme）解析及文件上传等；提供了非常灵活的数据验证、格式化和数据绑定机制；提供了强大的约定大于配置（惯例优先原则）的契约式编程支持[9]。SpringMVC相较于Struts2来说更加的简单，便于使用者学习快速掌握。Spring MVC对比Struts2来说，前者是方法级别的拦截，一个方法对应一个request上下文，又同事和一个url对应，更容易实现restful url，并且一个方法独自享有一个request response数据，数据处理结果通过modemap直接交回给框架。

2.3 MyBatis简介

MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation迁移到了google code，并且改名为MyBatis 。iBATIS一词来源于“internet”和“abatis”的组合，是一个基于Java的持久层框架。iBATIS提供的持久层框架包括SQL Maps和Data Access Objects（DAO）[10]。

MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架。MyBatis 避免了几乎所有的 JDBC 代码和手工设置参数以及抽取结果集。MyBatis 使用简单的 XML 或注解来配置和映射基本体，将接口和 Java 的 POJOs(Plain Old Java Objects,普通的 Java对象)映射成数据库中的记录[11]。

2.4 AmazeUI简介

由于以前何绍设计前端的开发，所以在实现了系统的基本功能之后发现自己的界面真的有点丑陋，所以有了进行UI设计的想法，经过各方查找，决定使用Amaze UI来进行UI的设计。

Amaze UI是中国第一个HTML5的开源跨屏框架。其组件式的开发方式能够让我通过基于其丰富的组件迅速的拼装出页面，所以我就是直接使用的现有的模板来设计的界面。Amaze UI JS 插件基于 jQuery 开发，所以使用之前需要先将JQuery装入。

2.5 开发工具介绍

本节主要介绍在系统开发中所使用的工具，包括：Eclipse, Tomcat, MySql。

2.5.1 Eclipse集成开发环境

Eclipse最初是由IBM公司开发的替代商业软件Visual Age for Java的下一代IDE开发环境，2001年11月贡献给开源社区，现在它由非营利软件供应商联盟Eclipse基金会(Eclipse Foundation)管理[12]。

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具(Java Development Kit JDK)。

下面简单介绍如何在Eclipse中创建一个Web工程并将其部署到Tomcat服务器上。

打开eclipse for J2EE, 选择file--new--Dynamic Web Project，输入项目名称，然后Finish。到此，Web项目建立完成
在生成的项目的WebContent目录下创建Jsp File。起名hello.jsp在其中写入hello world
配置Tomcat。通过window->preference->Server->Runtime Enviroments , 在通过Add加入你所使用的Tomcat版本点击Next后在Browse中选择刚刚指定的Tomcat的所在位置

这样就在Eclipse中创建了一个Web项目并且部署到了Tomcat服务器上。

2.5.2 Tomcat服务器

Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成[13]。

Tomcat 服务器是一个免费的开放源代码的Web应用服务器，属于轻量级应用服务器[10]。正是由于这个特点，所以本系统决定使用Tomcat作为本次开发的服务器，应为在并发访问用户数量不是很多的小型项目中，Tomcat完全能够支撑。

第3章即时通讯聊天系统需求分析和总体设计

3.1 系统可行性分析

系统是否值得投入资源进行开发，是取决于系统的可行性的[14]。在系统可行性全面发展以前很多系统在研发后期都无法继续进行下去。后来提出系统可行性分析以后，在项目前期就进行系统可行性分析，全面的从经济、技术、法律、操作四个方面进行评估。

3.1.1 法律可行性分析

本系统所使用的软件和技术都是合法的，不存在任何违法或者侵权行为。引用的代码和文字也没有超过法律规定的界限，且引用都标明出处。因此在法律方面是可行的。

3.1.2 技术可行性分析

本系统是一个使用SSM框架的Web系统。在以前的学习中，有过Java和JavaWeb的课程学习，有着一定的知识基础。本系统对于硬件也没有很高的要求。因此利用现有技术完全可以实现本系统。

3.1.3 经济可行性分析

本系统采用JavaWeb技术，对于硬件没有特殊要求，软件方面也都是使用的开源软件，没有经济负担。

3.1.4 操作可行性分析

本系统本着使用简洁的原则进行设计和开发，界面简洁明了，用户只要有基本的计算机操作基础就能够流畅的使用。

3.2 需求分析

了解用户的需求才能够做出让用户使用起来满意的产品。经过需求分析和实际使用现在市面上现有的web通讯软件，决定将整个系统分为登陆页面，聊天页面，个人信息页面，设置页面，系统日志查看页面,在线用户页面。

3.2.1 登陆页面

用户通过注册功能获得注册账号，然后通过登陆功能进行登陆，只有登陆成功才能进入主页面，否则返回登陆界面。用户用例图如图3-1所示。

3.2.2 个人信息页面

展示用户的个人信息，包括：昵称，性别，年龄，简介，注册时间，最近登录时间。能够实时根据用户在设置界面修改的信息更新对应的信息。

3.2.3 设置页面

设置通过一个下拉弹窗包括了个人设置和系统设置两个部分。个人设置展示用户基本信息，能够实现修改头像，修改密码修改基本信息等功能。系统设置展示系统基本设置，能够实现修改头像，修改密码，修改系统设置等功能。

3.2.4 注销页面

注销页面注销当前用户登陆，返回到登陆界面。

3.2.5 用户页面

用户页面包括用户资料，设置，注销功能。分别展示用户资料，用户设置，注销返回登陆。

3.2.6 聊天页面

聊天页面包括展示聊天信息，当前输入信息，发送对象，链接服务，断开服务，检查链接，清理聊天信息，发送输入信息。

3.2.7 在线列表页面

在线列表页面显示当前连接的用户信息，可对用户发起私聊。

3.2.8 图灵机器人功能

通过图灵提供的API端口实现聊天中引入图灵机器人和用户进行对话。

3.3 系统总体设计

通过SSM框架和JSP,前端的设计使用了AmazeUI，弹窗和分页使用了Layer和JQuery。

首先，在进行开发之前，先将Amaze UI, Laye以及JQuery下载下来，导入进入工程中，如图3-2所示。

3.3.1 SSM框架配置

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

1.Spring和MyBatis的整合

整合之前，首先需要导入项目开发需要的所有jar包，然后建立JDBC属性文件即jdbc.properties文件。jdbc.properties[15]文件内容如下：

java 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整合文件，主要内容无外乎自动扫描，自动引用，配置数据库等。相关代码如下：

```xml

<!-- 引入jdbc配置文件 -->
<bean id="propertyConfigurer" >
  <property name="location" value="classpath:config/jdbc.properties" />
</bean>

<!-- 配置数据源 -->
<bean id="dataSource" 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文件主要包括自动扫描控制器，视图模式，注解启动等，当然由于我需要上传文件显示，所以为了防止文件被拦截需要在其中特殊设置一下：。主要代码如下：

xml  <bean >… <mvc:interceptors>  <mvc:interceptor>  <mvc:mapping path="/**"/>  <mvc:exclude-mapping path="/static/**"/> <bean id="loginInterceptor" >…  …  … <mvc:resources location="/" mapping="/**/*.jpg" />

最后，再在web.xml文件中对spring-mybatis.xml进行引用以及配置spring-mvc的servlet就完成了SSM框架的整合，web.xml文件相关配置没有什么值得注意的地方。

3.3.2 即时通讯聊天系统总体设计

整个系统总体设计如图3-4所示，主要分为：

登录页面：用户在该界面进行登陆，验证账号密码正确之后之后跳转到聊天主界面
聊天页面主页：用户进入界面默认为群聊，能够在此界面进行群聊，可以通过左边的功能栏中的进行查看个人信息，个人设置，查看系统日志等
右边的用户列表栏显示当前链接的用户，可以选择与用户私聊和进行视频
点击私聊可以发送信息进行私聊
点击在线用户的视频按钮向对应用户发送视频请求，对方同意后可以进行一对一视频通话

3.3.3 路由设计

确定了本系统的总体设计之后，明确了系统所需要的界面，根据各页面设置相应的路由。在RouteCotroller使用RequestMapping()进行地质映射来实现。RequestMapping是一个用来处理请求地址映射的注解，可用于类或方法上。用于类上，表示类中的所有响应请求的方法都是以该地址作为父路径。系统各页面以及对应路由如表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

具体实现代码如下：

```java @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 用户聊天主界面

主聊天界面主要分为四个部分，分别是顶部的状态栏模块，左侧的功能栏模块，右侧的用户列表栏模块以及中央的聊天栏模块。

状态栏模块

顶部状态栏主要用于显示应用的名称以及右侧的导航下拉菜单。下拉菜单通过：下拉菜单包括个人资料，设置，注销三个功能。分别可以进入个人资料界面，个人设置界面，以及注销用户返回登陆界面。

功能栏模块

功能栏主要有显示个人信息，个人设置和系统设置，查看系统日志，获取帮助，关于和注销功能。整个功能栏的主要思路就是通过${user.**}来获取用户对应的字段的值。再在jsp中展示出来。其中比较重要的功能为修改用户的头像。用户的头像在个人资料，聊天信息框中均可展示。所以这个实时根据用户的选择更新还是比较重要的。

用户列表模块

对于右侧的列表模块，用于显示当前在线的用户名，其中还包含了一个图灵机器人功能，点击上线按钮，调用tuling提供的api接口可以让其与自己进行对话沟通。

其次，显示出来的每一个在线用户(除开自己以外)还有两个按钮，分别是私聊和视频通话功能。私聊按钮就是点击之后将当前获取的用户名加入到to中去，实现私聊。

用户聊天模块

对于用户发送的信息，可以分为两个类型：massage和notice,massage表示用户输入的信息。notice表示一些提示消息，如：用户登入，用户离开以及图灵机器人的接入的接出。所以需要在传输和获取数据的时候对这两类信息分别进行处理。用户还会将用户列表中的信息一起发送，用于其他用户更新用户列表。

对于私聊和一对多的聊天处理的想法是，用一个string 类型的对象to来存储一段文本，初始设置为空，即想所有人发送消息，当用户点击私聊按钮后，就将该按钮对应的用户的userid存放到to里面去，可以存放多个用户的userid，用“，”分隔开。这样子在发送的时候就可以使用split()方法将字符拆分存到一个数组里面再通过循环访问数组来发送消息就可以实现一条消息发送给多个指定的人了。

3.3.6 数据库设计

整个数据库的内容并不复杂，只需要两个表user和log。User表存储用户的相关信息。如：用户名，密码，昵称，头像，简介等。User表结构如图3-5所示。

log表用于存储用户的日志，包括一个随机生成的操作id，用户名，时间，类型，动作。Log表结构如图3-6所示。

数据库总体设计E-R图如图3-7所示。

第4章系统实现及效果分析

4.1 用户登录界面

用户登录界面是用户进入系统的第一步，所以一定要有特色，能够第一时间抓住用户的眼球，产生使用的欲望。

整体登录界面的账号密码验证交由控制器LoginController来进行，通过@RequestMapping(value ="/login", method = RequestMethod.POST)来获取表单数据，进行判断，跳转到对应页面。

LoginController文件代码如下所示：

java @RequestMapping(value = "/login", method = RequestMethod.POST) public String login(String userid, String password, HttpSession session, RedirectAttributes attributes, WordDefined defined, CommonDate date, LogUtil logUtil, NetUtil netUtil, HttpServletRequest request) { String ip=netUtil.getIpAddress(request); User user = userService.selectUserByUserid(userid); if (user == null) { attributes.addFlashAttribute("error", defined.LOGIN_USERID_ERROR); return "redirect:/user/login"; } else { if (!user.getPassword().equals(password)) { attributes.addFlashAttribute("error", defined.LOGIN_PASSWORD_ERROR); return "redirect:/user/login"; } else { if (user.getStatus() != 1) { attributes.addFlashAttribute("error", defined.LOGIN_USERID_DISABLED); return "redirect:/user/login"; } else { logService.insert(logUtil.setLog(userid, date.getTime24(), defined.LOG_TYPE_LOGIN, defined.LOG_DETAIL_USER_LOGIN, netUtil.getIpAddress(request))); session.setAttribute("userid", userid); session.setAttribute("login_status", true); user.setLasttime(date.getTime24()); user.setIp(ip); userService.update(user); attributes.addFlashAttribute("message", defined.LOGIN_SUCCESS); return "redirect:/chat"; } } } }

验证账号密码成功之后，通过return “redirect:/caht”来进入聊天界面。登录界面效果图如图4-1所示。

4.2 用户聊天主界面

主聊天界面主要分为四个部分，分别是顶部的状态栏模块，左侧的功能栏模块，右侧的用户列表栏模块以及中央的聊天栏模块。本部分将对这三个部分进行详细的描述并给出关键实现代码。聊天主界面如图4-2所示。

4.2.1 状态栏模块

顶部状态栏主要用于显示应用的名称以及右侧的导航下拉菜单。下拉菜单包括个人资料，设置，注销三个功能。由于考虑到这一栏需要一直显示在页面最顶部，所以我将其单独写入了一个JSP文件中，其后的都直接引用该文件达到这个效果。具体代码如下：

java <button data-am-collapse="{target: '#topbar-collapse'}"><span >导航切换</span> <span ></span></button> ... <ul > <li><a href="${ctx}/${userid}"><span ></span> 资料</a></li> <li><a href="${ctx}/${userid}/config"><span ></span> 设置</a></li> <li><a href="${ctx}/user/logout"><span ></span> 注销</a></li> </ul> ...

4.2.2 功能栏模块

功能栏主要有显示个人信息，个人设置和系统设置，查看系统日志，获取帮助，关于和注销功能。整个功能栏的主要思路就是通过${user.**}来获取用户对应的字段的值。再在jsp中展示出来。

个人信息展示功能

根据用户的userid在数据库查询出相应的信息，再通过ModelAndView selectUserByUserid()方法展示出来。效果如图4-3所示：

个人设置功能

个人设置功能能够在其中修改用户的昵称，性别，年龄以及个性签名。修改完成后点击提交就可以完成更新。修改头像可以修改用户的头像。修改密码能够修改用户的登陆密码，用户输入当前密码再输入新密码，验证旧密码成功后即可以完成密码的修改。其中比较重要的功能为修改用户的头像。用户的头像可以在个人资料，聊天信息框中均可展示。所以这个实时根据用户的选择更新还是比较重要的。基本思路就是首先我们上传的只能是图片文件，即后缀为"bmp","jpg","gif","png"的文件，那么首先要通过下列代码：

java var format = ["bmp","jpg","gif","png"]; var filename = $("#file").val(); var ext = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();

来获得选择的文件的后缀名，在通过jQuery.inArray(ext,format)函数来进行对比即可。如果其值不等于-1，则说明文件格式正确，否则通过layer.msg()函数来显示提示信息。最后在通过下面的代码将文件进行更新即可。

java $(function() { $('#file').on('change', function() { var fileNames = ''; $.each(this.files, function() { fileNames += '<span class="E73_ed0c_0cdee4e am-badge">' + this.name + '</span> '; }); $('#file-list').html(fileNames); }); });

系统日志功能

系统日志功能能够查看当前登录的用户进行过的操作，包括登录和更新两类，跟新又分为更新头像和更新资料两种。在用户执行上述操作时，将该操作信息存放到数据库中的log表中。其与用户表的更新方式一致，不在赘述。具体实现方法如下：

```java @Resource private ILogService logService;

@RequestMapping(value = "{userid}/log")
public ModelAndView selectAll(@PathVariable("userid") String userid, @RequestParam(defaultValue = "1") int page) {
    int pageSize = 5;
    ModelAndView view = new ModelAndView("log");
    List<Log> list = logService.selectLogByUserid(userid, page, pageSize);
    int count = logService.selectCountByUserid(userid, pageSize);
    view.addObject("list", list);
    view.addObject("count", count);
    return view;
}

```

其余的帮助，关于以及注销功能十分简单。不做过多描述。

4.2.3 用户列表模块

对于右侧的列表模块，用于显示当前在线的用户名，其中还包含了一个图灵机器人功能，点击上线按钮，调用tuling提供的api接口可以让其与自己进行对话沟通。效果如下所示：

其次，显示出来的每一个在线用户(除开自己以外)还有两个按钮，分别是私聊和视频通话功能。私聊按钮就是点击之后将当前获取的用户名加入到to中去，实现私聊。这个在后面的用户聊天中会详细说明。效果图如图4-5所示。

4.2.4 用户聊天模块

在进入用户聊天模块之后，用户可以在消息输入框中输入消息进行群发或者给指定的在线用户发送私聊。那么，前后台的数据交互就要有一定的格式了。经过分析，对于用户之间传递的信息可以分为聊天信息和提示信息两种，聊天信息就是用户发送的信息，可以使全局广播或是指定发送。二提示信息则是用户登录或者登出是的提示信息，这个必须是全局广播让所有在线用户接收到。能够相应的更新在线列表。定义前后台的数据交互格式如下：

json "message" : { "from" : "xxx", "to" : "xxx", "content" : "xxxxxx", "time" : "xxxx.xx.xx" }, "type" : { "xxx" }, "list" : { ["xx","xx"] }

其中,message是消息部分，from是发信人用户名，to是收信人用户名(如果是群聊则置空)，content是消息内容，time是发送时间，这里发信时间是前台JS获取，from和to都是直接用用户名而不是昵称。

type是消息类型,分为两种,notice和message.notice是提示类型，比如xxx用户加入了聊天室，xxx用户离开了聊天室；message是消息类型，就是用户之间发送的消息。对于这两类的处理代码如下：

java function analysisMessage(message){ message = JSON.parse(message); if(message.type == "message"){ //会话消息 showChat(message.message); } if(message.type == "notice"){ //提示消息 showNotice(message.message); } if(message.list != null && message.list != undefined){ //在线列表 showOnline(message.list); } }

list是当前在线的用户名的列表,只在后台触发onopen和onclose时返回list,然后更新前台的在线列表,实现实时的列表展示。实现代码如下：

java function showOnline(list){ $("#list").html(""); //清空在线列表 $.each(list, function(index, item){ //添加私聊和视频按钮 var li = "<li>"+item+"</li>"; if('${userid}' != item){ //排除自己 li = "<li>"+item+" <button type=\"button\" class=\"am-btn am-btn-xs am-btn-primary am-round\" onclick=\"addChat('"+item+"');\"><span class=\"am-icon-phone\"><span> 私聊</button>" +"<button type=\"button\" class=\"am-btn am-btn-xs am-btn-primary am-round\" onclick=\"startVideo('item');\"><span class=\"am-icon-phone\"><span> 视频</button></li>"; } $("#list").append(li); }); $("#onlinenum").text($("#list li").length); //获取在线人数 }

在确定了信息的格式之后，为了能让各个用户之间进行信息传输，我们要建立一个websocket服务。进行信息发送的基本思路如下：首先接受客户端的massage，判断to是否为空，如果为空，则执行broadcast(message)函数，代码如下：

java public void broadcast(String message){ for(ChatServer chat: webSocketSet){ try { chat.session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); continue; } } }

如果不为空，那么执行singleSend(String message, Session session)函数给指定的用户发送信息。代码如下：

java public void singleSend(String message, Session session){ try { session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } }

如果要实现一个用户同事对多个用户发送同一条信息的话，先将所有选取的用户名添加到to中通过,隔开，在发送的时候对to进行解析根据split(“,”)将这个字符串拆分成一个个用户名字符串加入到一个list里面，通过for(user:listname)就可以循环发送消息达到此效果，相关代码如下：

java public void onMessage(String _message) { JSONObject chat = JSON.parseObject(_message); JSONObject message = JSON.parseObject(chat.get("message").toString()); if(message.get("to") == null || message.get("to").equals("")){ //如果to为空,则广播;如果不为空,则对指定的用户发送消息 broadcast(_message); }else{ String [] userlist = message.get("to").toString().split(","); singleSend(_message, (Session) routetab.get(message.get("from"))); //发送给自己 for(String user : userlist){ if(!user.equals(message.get("from"))){ singleSend(_message, (Session) routetab.get(user)); //分别发送给每个指定用户 } } } }

当获取到对方发送过来的数据时，通过JSonObject的put方法进行操作，再返回该对象给前台就可以显示出来了。方法如下：

java public String getMessage(String message, String type, List list){ JSONObject member = new JSONObject(); member.put("message", message); member.put("type", type); member.put("list", list); return member.toString(); }

上述私聊，群发私聊，提示消息显示和更新在线用户列表如图4-6所示：

结论

本论文通过SSM框架，运用java基础知识，结合layer进行弹窗和分页，使用amaze ui 对整个系统的界面进行UI设计并且结合数据库MySql进行系统的开发。这个架构将系统分为了持久层，业务层，表现层，Viewc层。除了view层和controller层耦合度比较高，一般当做一个整体之外，其余层之间耦合度很低，都可以单独开发。开发者只需要知道层与层之间的接口的定义，直接调用接口就可以完成所需要的逻辑应用。这种模式在小规模的开发中体现的不多，但是在开发大项目的过程中能够发挥出更大的作用。

总的来说，完成了一个有实际用处和良好操作体验的系统。与用户能够直接通过网页访问该系统，登陆成功之后就可以和所有在线的用户进行及时的交流沟通。这个页面简介明了，使用起来没有任何的难点。色彩上也不会让人产生审美疲劳。整个系统功能较为完善，使用感不错。

当然，webchat系统也存在这一些问题。首先，对于是否该加入好友这个功能，原本并不想做成一个类似于QQ那样只能在好友之间进行即时通讯的系统，而是所有只要登录了系统的人都能够自由的聊天，但是这样就会造成，当登录人数过多之后就没有办法在聊天信息里面准确快速的辨别出需要的信息。另外右侧的在线用户列表也会因为人数过多的问题不方便找到指定用户进行私聊和视频。

初步解决的想法方法是，将用户列表替换成好友列表，聊天信息显示依旧不变，但是在信息展示的用户头像处，能够进行左键点击进行加好友操作，只有加成好友以后才能够进行私聊和视频，并且更新右侧用户列表。这样就能够实现和所有用户不限定的聊天，操作性上来说也更加的方便。

通过这次的毕业设计，对于MVC模式下的系统开发有了更进一步的认识，通过结合自己以前所学习到的知识和新学习的知识，整体地提升了个人的思考学习行动能力。当然，对于在这次实际开发中暴露出来的问题，我也会在接下来的学习生活中不断改进，对于整个系统也会进一步的去完善它。

参考文献

[1]鲁耀斌,徐红梅. 即时通讯服务使用行为的影响因素实证研究[J]. 管理学报,2006,(05):614-621.

[2] 项颖王文生. 视频会议应用浅析[J].中国科技信息，2006().

[3]黄科. 浅析视频会议系统的发展趋势[J]. 计算机光盘软件与应用,2012,(19):73-75.

[4] 梁建军. 让沟通没有距离——视频会议系统市场潮流[M]. 中国计算机用户，2002(01):18-18.

[5] 李锐. 浅谈即时通讯工具现状及其发展趋势[J]. 中国科技信息，2013(16):92-92.

[6]邹红霆. 基于SSM框架的Web系统研究与应用[J]. 湖南理工学院学报(自然科学版),2017,(01):39-43.

[7]李洋. SSM框架在Web应用开发中的设计与实现[J]. 计算机技术与发展,2016,(12):190-194.

[8] 方犀超. 面向会展行业信息管理系统的设计与实施[D]. 中国优秀硕士学位论文全文数据库，2012 (12).

[9] 周帝. Spring MVC入门知识总结[EB/OL].(2016-10-14)[ 2016-10-14]. http://www.cnblogs.com/zhoudi/p/5960683.html.

[10] 徐雯,高建华. 基于Spring MVC及MyBatis的Web应用框架研究[J]. 微型电脑应用,2012,(07).

[11]Tie Bin Liu. Design and Implement anApplication Development Platform Based on Open Source Technology[J]. AdvancedMaterials Research,2014,3326(989).

[12]V.U. Chukwuma,B.J. Adekoya. Theeffects of March 20 2015 solar eclipse on the F2 layer in the mid-latitude[J].Advances in Space Research,2016.

[13]Aleksa Vukotic,James Goodwill. UsingTomcat’s Manager Web Application[M].Apress:2011.

[14]吴小青. JSP+TOMCAT+MYSQL开源软件整合配置初探——以揭阳职业技术学院图书馆网站服务器配置为例[J]. 齐齐哈尔大学学报(自然科学版),2012,(04):66-69.

[15]张俐,张维玺. 改进的JDBC框架在数据持久层的应用[J]. 计算机工程与设计,2010,(08):1746-1749.