本文目录一览：
- 1、WebSocket断开重连机制 实现demo，非采用onclose事件方式
- 2、如何避免websocket重复连接
- 3、websocket stomp连接一段时间后断开
- 4、Nginx websocket proxy断连问题
- 5、websocket
WebSocket断开重连机制 实现demo，非采用onclose事件方式
WebSocket.onclose 事件监听器 ，不可控性和断网情况下不触发问题，无法很好实现断线重连功能。
我们解决方案是，根据服务端一定时间，自动给客户端推送的心跳，心跳来判断是否断开，如果一定时间内没有收到服务器发送的心跳，则会触发重连。（很像医生抢救重症病人，看心跳图没有波动，启用心电复苏）
如何避免websocket重复连接
你实现TextWebSocketHandler中的类中在 afterConnectionClosed();连接关闭后,里面如果定义了用户断开连接就移除websocketsession就没有问题。还有就是不要在多个页面建立连接，尽量使用子夫页面互调方法的方式实现数据传递。
websocket stomp连接一段时间后断开
因为项目中存在频繁的由服务器发起的数据交换，相比使用Ajax轮训的方式，websocket长连接和双向保持的特点能够较好的提升数据交换的性能。
为了简便，直接使用spring boot + shiro + stomp和socketJs作为构建的工具。
但是由于使用时，主要是由服务端进行数据的推送，通过stomp自行保持心跳，就会存在session过期导致连接断开的情况，而且由于stomp本身不会提示错误原因，导致排查起来比较麻烦，因此记录下整个纠错过程以备忘。
在一开始打开时，一切正常，数据能推送成功，但是在大约10分钟左右（时长不定）能通过chrome的前端调试工具发现stomp提示连接断开。服务器端无任何异常提示。
因为服务器端无任何异常，且断连时长不定，因此推测为可能是session导致的自动断链或者心跳丢失导致的。因为stomp本身不会报错误原因，因此想要找到具体的错误原因比较麻烦。后来发现可以通过断点到stomp的onclose时间就能够获取到具体的错误码，这就为我们定位问题提供了很好的帮助（具体断点位置如下图所示）
最后通过错误码发现，提示的错误码是1008，reason部分提示的是http session被关闭，因此问题就比较清楚了，是由于session释放导致的断链。这一点就很有意思，因为在使用过程中为了避免不必要的数据传输就一直没有发起websocket的send事件，只是一直在subscribe监听服务器的推送。因此导致了服务器的session一直没有被touch()，从而释放。（其实个人觉得这个可能也是一个比较有意思的问题，为什么心跳没有被处理会触发到session，具体没有试验是不是和我使用了shiro的session作为管理有关，有兴趣的同学们可以尝试一下）
这里也顺便贴上对于错误码的描述和相关参考资料，便于大家解决其它的错误码问题：
那么问题找到了响应的解决方案就比较好处理了，但是究竟哪种方案比较好，还是得看具体的业务需求和对利弊的取舍。
问题本身倒是不复杂，就是对stomp不熟悉，确定具体的错误原因上花了很多时间，进行了很多白费的尝试，所以希望能记录下，做个以后的备忘，防止再走很多弯路。
Nginx websocket proxy断连问题
由于项目中需要服务端向移动设备主动推送信令，于是引入websocket协议进行移动设备和服务端之间的通信。Demo程序很正常，服务端使用nodejs ws类库起一个websocket服务器，android设备中使用Okhttp3-ws对接，一切都比较正常。但是集成到生产环境kong api gateway后出现了连接一段时间android设备出现java.io.EOFException错误，服务端ws服务器出现1006错误，websocket连接断开的问题。
由于demo程序运行正常，生产环境与demo环境区别在于android设备和服务端之间使用kong api gateway工具进行了proxy，kong是基于Nginx的api管理工具，于是问题分析重点锁定gateway转发的过程。
首先抓包比对一下demo环境和生产环境区别。
demo环境wireshark包：
可以看到，GET请求包和协议切换响应包间隔很短。
kong 环境包:
尝试修改了read timeout的时间，果然出现断连的时间随着timeout而变化，应该就是Nginx这个机制导致的。文档中也明确说明了解决方法，在时间间隔小于read timeout的轮询中不断和服务器进行ping包发送来刷新timeout时间。
实际测试，用20秒的间隔不断给服务器发送心跳，可以保持websocket连接不断。
但是还有一个问题，http upgarde包发出去后应该要等http code 101 Switching Protocols这个包回来才算握手完成，才可以建立tcp长连接，但是在nginx环境下这个包60秒后才回来，但是中间数据交互都是正常的，让人匪夷所思。
再仔细看下nginx转发wireshark包，发现http code 101 Switching Protocols包是由3片TCP包组装而成的：
第一帧序号23，找到后发现内容就是服务器响应握手的http报文内容
所以在25帧时实际已经握手完成了，并非在62秒才传包回来。
第二帧：
传递的数据是connected.
这样就和协议描述一致，先完成handshake再transfer data。但是经过nginx抓发的包一直没有结束符，所以导致wireshark在断连得时候才显示该http报完成，此处不知是不是nginx websocket proxy的bug? 如果有大神知道还请指导。
websocket
建立连接（创建WebSocket对象）：
var Socket =new WebSocket(url, [protocol] );// url：服务器端地址；protocol：可选，指定可接受的子协议。
WebSocket对象提供了两个属性、四个事件、两个方法，分别是：
1.WebSocket.readyState属性：表示连接状态
0——（连接尚未建立）；1——（连接已建立）；2——（连接正在关闭）；3——（连接已经关闭或连接不能打开）
2.WebSocket.bufferedAmount属性：被send()放入传输队列，还未发出的UTF-8文本字节数
ws.addEventListener('open',function(event){
ws.send('Hello Server!');
});
ws.onopen =function(){
ws.send('Hello Server!');
}
3.open：WebSocket.onopen()：连接建立时触发的事件
4.message：WebSocket.onmessage()： 客户端接收服务器端发送的信息时触发
5.error：WebSocket.onerror()：通信发生错误时触发
6.close：WebSocket.onclose()：连接关闭时触发
7.WebSocket.send()：发送信息的方法
8.WebSocket.close()：关闭连接方法
SOCKJS
SOCKJS 是一个浏览器使用的js库，它提供了一个类似网络的对象，和连贯的，跨浏览器的jaApi，可以在浏览器和服务器之间创建一个低延迟，全双工的跨域通信通道
SOCKJS实现了对浏览器的兼容，spring框架提供了很多透明的，回退选项，如果遇到低版本的浏览器会自动降级为轮询，支持就用websocket
sockjs-client
sockjs-client 是从SOCKJS分离出来的客户端使用的通信模块
stompjs
STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议;
websocket只是一个消息架构，不强制使用任何的消息协议，为了更好的在浏览器和服务器之间传递消息，使用stomp协议 的stompjs
STOMP与WebSocket 的关系:就是没使用http而使用stomp协议，在浏览器和服务器之间进行消息传递
1.HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情;
2.直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义;
3同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义、
安装
npm install sockjs-client --save
npm install stompjs --save
引入
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
export default {
data(){
return {
stompClient:'',
timer:'',
}
},
methods:{
initWebSocket() {
this.connection();
let that= this;
// 断开重连机制,尝试发送消息,捕获异常发生时重连
this.timer = setInterval(() = {
try {
that.stompClient.send("test");
} catch (err) {
console.log("断线了: " + err);
that.connection();
}
}, 5000);
},
connection() {
// 建立连接对象
let socket = new SockJS('execution-progress/info?t=1593744273983');
var sockjs =new SockJS(url, _reserved, options);
//server(string)：添加到url的字符串，默认为随机的4位数
//transports (string OR array of strings)：回退传输列表
// sessionId (number OR function)：会话标识，函数必须返回一个随机生成的字符串
// 获取STOMP子协议的客户端对象
this.stompClient = Stomp.over(socket);
// 定义客户端的认证信息,按需求配置
let headers = {
Authorization:''
}
// 向服务器发起websocket连接
this.stompClient.connect(headers,() = {
this.stompClient.subscribe('/topic/public', (msg) = { // 订阅服务端提供的某个topic
console.log('广播成功')
console.log(msg); // msg.body存放的是服务端发送给我们的信息
},headers);
this.stompClient.send("/app/chat.addUser",
headers,
JSON.stringify({sender: '',chatType: 'JOIN'}),
) //用户加入接口
}, (err) = {
// 连接发生错误时的处理函数
console.log('失败')
console.log(err);
});
}, //连接 后台
disconnect() {
if (this.stompClient) {
this.stompClient.disconnect();
}
}, // 断开连接
},
mounted(){
this.initWebSocket();
},
beforeDestroy: function () {
// 页面离开时断开连接,清除定时器
this.disconnect();
clearInterval(this.timer);
}
}
