基于WebSocket的web端IM即时通讯应用的开发
功能列表:
1、Web端的IM即时通讯应用
2、支持上线、下线、实时在线提醒
3、单聊、群聊的建立
4、普通文字、表情、图片的传输(子定义富文本)
5、单人的顶级提醒,多对话的窗口的提醒
6、调用图灵机器人的自动回复演示
目前的兼容性未做太多测试,主要是谷歌浏览器。
核心技术列表
1、websocket、sockjs、stomp
2、前端展示涉及的jquery、vue、elementUI、jquerybase64js
3、后端springboot、jsoup、spring-security、spring-websocket
成果展示:
技术实现说明:
Websocket部分
web端的IM应用,要想实现两个客户端的通信,必然要通过服务器进行信息的转发。例如A要和B通信,则应该是A先把信息发送给IM应用服务器,服务器根据A信息中携带的接收者将它再转发给B,同样B到A也是这种模式。
而要实现web端的实时通讯,websocket也是其中最好的方式,其他的协议如长轮询、短轮询、iframe数据、htmlfile等。
在实际开发中,我们通常使用的是一些别人写好的实时通讯的库,比如socket.io、sockjs(我们本次使用了他,类似jquery,对其他即时通讯技术做了封装),他们的原理就是将上面(还有一些其他的如基于Flash的push)的一些技术进行了在客户端和服务端的封装,然后给开发者一个统一调用的接口。这个接口在支持websocket的环境下使用websocket,在不支持它的时候启用上面所讲的一些hack技术。
WebSocket是HTML5的一种新通信协议(ws协议),是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解释消息的含义;与处在应用层的HTTP不同,WebSocket处在TCP上非常薄的一层,会将字节流转换为文本/二进制消息,因此,对于实际应用来说,WebSocket的通信形式层级过低,因此,可以在 WebSocket 之上使用 STOMP协议,来为浏览器 和 server间的 通信增加适当的消息语义。
STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议。 同 HTTP 在 TCP 套接字上添加请求-响应模型层一样,STOMP 在 WebSocket 之上提供了一个基于帧的线路格式层,用来定义消息语义;
STOMP 源码http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js,有兴趣的可以看一下能大致了解其原理和用法。
本例程序核心代码:
var socket = new SockJS('/im-websocket');stompClient = Stomp.over(socket);//设置stomp 控制台日志为不输出stompClient.debug=null;stompClient.connect({}, function (frame) { // 相当于连接 ws://localhost:8080/gs-guide-websocket/041/hk5tax0r/websocket hk5tax0r就是sessionid console.log("正在连接