聊天室
一个简易的聊天室系统
项目简介
该项目是我自己做的一个项目的重置版,原来是用原生的servlet搭的,原博客连接在这里:
现在这个是用ssm框架重新搭建的,使用了原来前端的页面,对原来的一些代码进行了一些封装,重要的类还有配置文件交给Spring进行统一管理,使得代码更加整洁,dao层由mybatis这个半自动框架构成,前后端的数据交互由SpringMVC强大的参数绑定机制完成。
该聊天室系统包含了以下功能:用户的登陆与注册、注册前判断该用户是否存在、检查两次输入的密码是否相同、多人聊天、脏话过滤、页面超出滚动、管理员t人下线、多人操作电子白板以及音视频聊天(未完成)等。
项目技术:
前端:JSP、BootStrap以及JQuery
后端:SpringMVC负责view层的数据展示以及数据封装、Spring负责service层对数据的进一步封装以及与dao层的交互、Mybatis做数据访问层控制、数据库使用MySQL、缓存使用redis
项目管理工具 :Maven
整个项目还未挂在阿里云上,有一些地址跳转的问题还未解决,项目容器即服务器采用Tomcat。
项目设计以及实现上的几个点
1、项目使用了JSP作为前端页面的展示,因为JSP内置的域对象能很容易的拿出存在域对象里面的值。页面部分使用了BootStrap来做页面的优化,结合JQuery完成功能控制,另外,还使用了SSE(服务端推送技术)来完成数据的交互,SSE支持长轮询,建立一个HTTP不会立即关闭,而且如果有后端有响应会立即返回,使得不会想ajax一直做短轮询,会增加服务器的负担,使得页面很卡。
2、后端部分,ssm的纯注解配置,这个没有什么好说的,与redis数据库的交互,将电子白板的图层信息存到redis中的list集合中,每次要使用的时候就将集合中的第一个元素删除并取出,使用sse(再返回的Header中要设置‘event-stream;charset=UTF-8’,经过测试,火狐浏览器不声明字节码类型没问题,但是谷歌浏览器会出现字节码不符的问题,进而无法解析数据)返回给浏览器,由浏览器进行解析
3、数据库使用的MySQL,对于数据访问操作的编码上,使用了Mybatis来与数据库进行交互,通过ORM映射,只需要编写SQL语句,Mybatis会会自动帮我们封装到对应的实体类中。
项目展示
1.登陆界面
2.注册界面
3.聊天界面
页面超出滚动以及脏话过滤
电子白板
项目详述
- 版本参数
技术 | 版本号及相关信息 |
---|---|
JDK | 1.8 |
Maven | 3.5 |
Spring | 5.2.0.RELEASE |
SpringMVC | 5.2.0. RELEASE |
Mybatis | 3.5.3 |
Tomacat | 9.2.0.27 |
MySQL | 8.0.17 |
Redis | 2.7.3 |
C3p0 | 0.9.5.4 |
- 项目中遇到的一些问题
1、session的绑定与销毁
为了要监听用户的session,我创建了一个监听类,实现HttpSessionBindingListener接口来监听session
重写ValueBound方法,当有新的用户session生成时,将session存入放在域对象里面的map里面
session的销毁
本来是重写valueUnbound方法来执行销毁操作,但是后来发现这个方法没有办法在里面进行当前session的销毁,所以就放弃了,改成直接在用户的控制器里面写一个退出方法,当用户执行退出操作的时候,发送一个请求到这个方法,删除掉当前用户的session。
2、SpringMVC的前端控制器
本来,整个前端页面是想用html来写的,但是取值又是一个很麻烦的问题,所以就改成了部分html,部分jsp来写,但是,在配置前端控制器的跳转路径时,发现配置了html文件,却没有办法访问jsp文件,配置jsp文件无法访问html文件的现象,后来在网上也没有找到想要的答案,所以就改成纯jsp页面来编写
3、电子画板的编写
一开始不知道html5中有canvas画板这个东西,想着通过鼠标事件来获取鼠标在页面上的坐标,传回后端去然后在后端生成图片返回,最后因为各种原因失败了,后来发现html5有canvas画板支持在页面上操作,就简单很多了。
4、ajax传数组给后端接收
这个。。纯属是我SpringMVC的基础不够扎实,不知道SpringMVC的参数绑定是如此强大,只要在@RequestParams中声明传过来的参数是个数组就行,然后用对应的数组接收。
5、从redis中提取图层信息,传输回前端
这里就用刚开始我提到的sse技术了,但是一开始我为了实现两个浏览器上的页面能够同步,在页面写了一个定时器,每三秒发送一个ajax请求从后端拿数据,但是这样在一两分钟之后,服务器和浏览器都顶不住我这样消耗资源,后来了解到sse技术,改为sse进行HTTP长轮询来获取后端技术之后,解决服务器和浏览器的压力问题,值得注意的是,sse只能是单向的,只能是由服务器向浏览器传输数据,而且传输的数据只能是文本格式,不像webSocket那样支持二进制传输。