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之类的。
个人博客地址:crossoverjie.top。
GitHub地址:github.com/crossoverJi…。