WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
js代码如下:
//websocket连接
var websocket = null;
function websocketMsg() {
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://" + baseurl.substring(7) + "equsocket"); //具体的url
} else {
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
//websocketMsg();
reconnect();
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
websocket.send(JSON.stringify({storeId:$("#door-room").find("option:selected").val()}));//发送数据
setMessageInnerHTML("open");
}
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("close");
reconnect(); //执行重连(前端断开websocket的心跳检测,会执行多次)
}
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
}
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
var msgjson = JSON.parse(innerHTML);
msgjson=JSON.parse(msgjson);
console.log(msgjson);
}
针对断网情况的心跳重连,只需要定时的发送消息,去触发websocket.send方法,如果网络断开了,浏览器便会触发onclose。
- 前端心跳重连(前端发送心跳,后端需要返回心跳,也就是ping pong的过程会有两次数据传递)
//针对断网的情况的心跳重连
var heartCheck = {
timeout: 20000,//20ms
timeoutObj: null,
reset: function( ){
clearTimeout(this.timeoutObj);
this.start();
},
start: function( ){
this.timeoutObj = setTimeout(function(){
websocket.send("HeartBeat"); //自定义需要执行的命令
}, this.timeout)
}
};
heartCheck.start();
heartCheck.reset();
//heartCheck 的 reset和start方法主要用来控制心跳的定时。执行心跳检测,看是不是断连了。
2、后端心跳重连(后端来发送心跳的话,就只需要发送ping,前端不需要回应。前端需要和后端约定好心跳间隔,比如后端设置10秒发送一次心跳,那前端就需要设置一个安全值,比如距离上次收到心跳超过12秒还没收到下一个心跳就重连。)
var heartCheck = {
timeout: 20000,//20ms
timeoutObj: null,
serverTimeoutObj: null,
reset: function(){
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
this.start();
},
start: function(){
var self = this;
this.timeoutObj = setTimeout(function(){
websocket.send("HeartBeat");
self.serverTimeoutObj = setTimeout(function(){
websocket.close();//如果onclose会执行reconnect,我们执行websocket.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
}, self.timeout)
}, this.timeout)
},
}