SSM(五) 基于 webSocket 的聊天室(下)

简介: 不知大家在平时的需求中有没有遇到需要实时处理信息的情况,如站内信,订阅,聊天之类的。在这之前我们通常想到的方法一般都是采用轮训的方式每隔一定的时间向服务器发送请求从而获得最新的数据,但这样会浪费掉很多的资源并且也不是实时的,于是随着HTML5的推出带来了websocket可以根本的解决以上问题实现真正的实时传输。

websocket绕坑


sendMessage()方法中我只想实现一个简单的功能,就是将每次的聊天记录都存到数据库中。看似一个简单的功能硬是花了我半天的时间。


我先是按照以前的惯性思维只需要在这个类中注入service即可。但是无论怎么弄每次都注入不进来都是null


最后没办法只有google了,最后终于在神级社区StackOverFlow中找到了答案,就是前边所说的需要添加的第二个 maven依赖,然后加入@ServerEndpoint(value = "/websocket",configurator = SpringConfigurator.class)这个注解即可利用Spring注入了。接着就可以做消息的保存了。


前端


前端我采用了Bootstrap做的,不太清楚Bootstrap的童鞋建议先看下官方文档也比较简单。还是先贴一下代码:


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
   < base href="http://crossoverjie.top/2016/09/04/SSM5/<%=basePath%>">
    < title>聊天室< /title>
  < input id="text" type="text">
 < button>发送< /button>
 < button>关闭连接< /button>
 聊天室
在线人数1人
 < p>
 < button>发送< /button>
 < /p>


其实其中重要的就是那几个JS方法,都写有注释。需要注意的是这里


//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
    websocket = new WebSocket("ws://192.168.0.102:8080/ssm/websocket");
}
else {
    alert("对不起!你的浏览器不支持webSocket")
}


当项目跑起来之后需要将这里的地址改为你项目的地址即可。


哦对了,我在这里采用了百度的一个Ueditor的富文本编辑器(虽然百度搜索我现在很少用了,但是这个编辑器确实还不错),这个编辑器也比较简单只需要个性化的配置一下个人的需求即可。


Ueditor相关配置


直接使用我项目运行的童鞋就不需要重新下载了,我将资源放在了webapp目录下的ueditor文件夹下面的。


值得注意的是我们首先需要将jsp-->lib下的jar包加入到项目中。加好之后会出现一个想下的箭头表示已经引入成功。



之后修改该目录下的config.json文件,主要修改以下内容即可:


"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "http://192.168.0.102:8080/ssm", /* 图片访问路径前缀 */
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",


这里主要是要修改imageUrlPrefix为你自己的项目地址就可以了。ueditor一个我认为很不错的就是他支持图片、多图、截图上传,而且都不需要手动编写后端接口,所有上传的文件、图片都会保存到项目发布出去的jsp-->upload文件夹下一看就明白了。更多关于ueditor的配置可以查看官网


其中值得注意一点的是,由于项目采用了Spring MVC并拦截了所有的请求,导致静态资源不能访问,如果是需要用到上传txt文件之类的需求可以参照web.xml中修改,如下:


< servlet-mapping>
    < servlet-name>default< /servlet-name>
    < url-pattern>*.txt< /url-pattern>
< /servlet-mapping>


这样就可以访问txt文件了,如果还需要上传PPT之类的就以此类推。


总结


这样一个简单的基于websocket的聊天室就算完成了,感兴趣的朋友可以将项目部署到外网服务器上这样好基友之间就可以愉快的聊(zhuang)天(bi)了。


当然这只是一个简单的项目,感兴趣的朋友再这基础之上加入实时在线人数,用户名和IP之类的。


项目地址:github.com/crossoverJi…

个人博客地址:crossoverjie.top

GitHub地址:github.com/crossoverJi…


相关文章
|
安全 前端开发
FastAPI(56)- 使用 Websocket 打造一个迷你聊天室 (上)
FastAPI(56)- 使用 Websocket 打造一个迷你聊天室 (上)
319 0
FastAPI(56)- 使用 Websocket 打造一个迷你聊天室 (上)
|
1月前
|
前端开发 JavaScript Java
【十五】springboot整合WebSocket实现聊天室
【十五】springboot整合WebSocket实现聊天室
30 0
|
Web App开发 存储 缓存
HTTP,WebSocket 和 聊天室
HTTP,WebSocket 和 聊天室
134 0
|
7月前
|
移动开发 前端开发 网络协议
WebSocket网页聊天室
WebSocket网页聊天室
109 0
|
9月前
|
存储
Netty入门到超神系列-基于WebSocket开发聊天室
在很多的网站中都嵌入有聊天功能,最理想的方式就是使用WebSocket来开发,屏幕面前的你如果不清楚WebSocket的作用可以自己去百度一下,Netty提供了WebSocket支持,这篇文章将使用Netty作为服务器,使用WebSocket开发一个简易的聊天室系统。
200 0
|
JSON 前端开发 安全
【Java Web项目】基于WebSocket的Web聊天室
本项目的名称为Web聊天室,即类QQ群组聊天,多个用户可以在同一个群组收发消息进行聊天
【Java Web项目】基于WebSocket的Web聊天室
|
移动开发 网络协议 前端开发
为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统
websocket是个啥? webSocket是一种在单个TCP连接上进行全双工通信的协议 webSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输
为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统
|
存储 移动开发 JavaScript
【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室
这篇文章主要是用WebSocket技术实现一个即时通讯聊天室。从0到1一步一步的编写所有代码,上手容易
481 0
【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室
|
消息中间件 网络协议 前端开发
SpringBoot轻松整合WebSocket,实现Web在线聊天室
前面为大家讲述了 Spring Boot的整合Redis、RabbitMQ、Elasticsearch等各种框架组件;随着移动互联网的发展,服务端消息数据推送已经是一个非常重要、非常普遍的基础功能。今天就和大家聊聊在SpringBoot轻松整合WebSocket,实现Web在线聊天室,希望能对大家有所帮助。
SpringBoot轻松整合WebSocket,实现Web在线聊天室
❤️一个聊天室案例带你了解Node.js+ws模块是如何实现websocket通信的!
❤️一个聊天室案例带你了解Node.js+ws模块是如何实现websocket通信的!
180 0
❤️一个聊天室案例带你了解Node.js+ws模块是如何实现websocket通信的!