带⼼跳的webSocket的使⽤和封装
⼀、webSocket简介
webSocket是⼀种⽹络通信协议，由于HTTP只能实现客服端向服务器的单向通信，即只能客户端主动给服务器发请求，服务器却没有办法主动“联系”客户端，所以全双⼯通信的webSocket应运⽽⽣，以便任何⼀⽅都能把数据推给另⼀⽅，⼤⼤提⾼了⼯作效率。
1、创建⽅法
url为请求的webSocket接⼝地址，第⼆个参数 protocol 是可选的，指定了可接受的⼦协议。
var Socket = new WebSocket(url, [protocol] );
2、webSocket属性
属性描述
Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放⼊正在队列中等待传输，但是还没有发出的 UTF-8 ⽂本字节数。
3、webSocket事件
事件事件处理程序描述
pen连接建⽴时触发
ssage客户端接收服务端数据时触发
r通信发⽣错误时触发
lose连接关闭时触发
4、webSocket⽅法
⽅法描述
Socket.send()使⽤连接发送数据
Socket.close()关闭连接
⼆、webSocket的使⽤
1、webSocket的简单实例
// 初始化⼀个 WebSocket 对象
var ws = new WebSocket("ws://localhost:9998/echo");
// 建⽴ web socket 连接成功触发事件
// 使⽤ send() ⽅法发送数据
ws.send("发送数据");
};
// 接收服务端数据时触发事件
var received_msg = evt.data;//接受到的数据
};
// 断开 web socket 连接成功触发事件
alert("连接已关闭...");
};
以上就是⼀个简单的webSocket例⼦了，但是在实际的运⽤中总是会遇到很多的意外情况，包括⽹络不稳定、后端接⼝不稳定，或者长时间不与后台“联系”等因素，都有可能导致webSocket连接断开，所以要想要⼀个稳定的webSocket连接，就必须有重连机
制，websocket在检测到连接断开时可以⾃动尝试重新连接，不影响数据的传输以及业务的开展。
2、有重连机制的webSocket
var websocket=null,
lockReconnect=false,//避免重复连接
tryAgain,tt;//避免重复连接，保证同⼀个时刻只有⼀个重连成功
// 初始化weosocket
function initWebSocket () {
const wsuri = `ws://url`
websocket = new WebSocket(wsuri)
}
/
/ 重连
function reconnectWebSocket () {
console.log('connect again')
if (lockReconnect) {
return
};
lockReconnect = true
// 没连接上会⼀直重连，设置延迟避免请求过多
tt && clearTimeout(tt);
tt=setTimeout(() => {
initWebSocket()
lockReconnect = false
}, 5000)
}
function websocketonopen () {
console.log('WebSocket连接成功')
}
function websocketonerror (e) { // webSocket发⽣错误
console.log('WebSocket连接发⽣错误')
clearTimeout(tryAgain)
tryAgain = setTimeout(() => {
reconnectWebSocket()
}, 5000)
}
function websocketonmessage (e) { // 数据接收
console.log('数据接收中:' + datePattern(new Date(), 'yyyy-MM-dd HH:mm:ss'))
const redata = e.data//收到的数据
//数据处理
//………………
}
function websocketsend (agentData) { // 数据发送
console.log('发送数据')
websock.send(agentData)
}
function websocketclose (e) { // webSocket关闭
// console.log('connection closed (' + e.code + ')')
console.log('connection closed: ' + datePattern(new Date(), 'yyyy-MM-dd HH:mm:ss'))
clearTimeout(tryAgain)
tryAgain = setTimeout(() => {
reconnectWebSocket()
}, 5000)
}
以上就是有重连机制的webSocket了，⼀般的⽹络断开，连接不稳定断开可以重连成功，但是有些情况是⽆法被检测到连接已经断开的，⽐如采⽤⽆线连接时，设备连着wifi，但是wifi实际上已经没有流量或者跟⽹络的连接已经断开，webSocket是不会知道的，或者检测到了会⼀直不停重连，但是⼀直连不上，
等到wifi恢复正常了也很⼤⼏率是连接失败了。这个时候我们就需要加上⼼跳机制了，⼼跳是前端和后端的⼀种约定，前端每过⼀段时间就向后端发送规定格式的“⼼跳”，后台收到这个⼼跳后，给我返回相应的信息，只要两端⼀直有⼼跳的交互就认为交互还存在，如果在约定时间内（⽐如2分钟）前端都没有收到后端返回的⼼跳信息，那么就可以认为这是⼀个有问题的连接，前端就主动断开这次连接，重新发起⼀个webSocket连接。
3、带⼼跳的webSocket
假设我们和后台约定的⼼跳信息格式如下：
var message = {
'data': {
'type': '95001', // 事件类型编码
'info': '{}', // 消息主体内容，业务组件⾃定义，可为空字符串或JSON字符串
'time': new Date().getTime(), // 时间
'deviceId': '', // 设备编码
'traceId': '', // 染⾊ID
'spanId': '0', // ⽇志ID
'terminalID': '' // 前端页⾯的终端编码（唯⼀），可为空串
}
}
⼼跳机制相关的代码：
//HeartBeat.js
websocket和socketexport const heartBeat = {
timeout: 60000, // 1分钟
timeoutObj: null,
serverTimeoutObj: null,
reset: function (ws) {
clearTimeout(this.timeoutObj)
clearTimeout(this.serverTimeoutObj)
this.start(ws)
},
start: function (ws) {
console.log('start')
var self = this
this.timeoutObj && clearTimeout(this.timeoutObj)
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
this.timeoutObj = setTimeout(function () {
/
/ 这⾥发送⼀个⼼跳，后端收到后，返回⼀个⼼跳消息，
// onmessage拿到返回的⼼跳就说明连接正常
var message = {
'data': {
'type': '95001', // 事件类型编码
'info': '{}', // 消息主体内容，业务组件⾃定义，可为空字符串或JSON字符串
'time': new Date().getTime(), // 时间
'deviceId': '', // 设备编码
'traceId': '', // 染⾊ID
'spanId': '0', // ⽇志ID
'terminalID': '' // 前端页⾯的终端编码（唯⼀），可为空串
}
}
ws.send(JSON.stringify(message))//数据格式这⾥默认是字符串，是字符串还是JSON格式看你们的后台开发⽽定 self.serverTimeoutObj = setTimeout(function () {
}, self.timeout)
}, this.timeout)
}
}
//webSocket代码
import { heartBeat } from '@/assets/js/HeartBeat.js'
var websocket=null,
lockReconnect=false,//避免重复连接
tryAgain,tt;//避免重复连接，保证同⼀个时刻只有⼀个重连成功
// 初始化weosocket
function initWebSocket () {
const wsuri = `ws://url`
websocket = new WebSocket(wsuri)
}
/
/ 重连
function reconnectWebSocket () {
console.log('connect again')
if (lockReconnect) {
return
};
lockReconnect = true
tt && clearTimeout(tt);
tt=setTimeout(() => {
initWebSocket()
lockReconnect = false
}, 5000)
}
function websocketonopen () {
console.log('WebSocket连接成功')
// ⼼跳检测重置
heartBeat.start(this.websocket)
}
function websocketonerror (e) { // webSocket发⽣错误
console.log('WebSocket连接发⽣错误')
clearTimeout(tryAgain)
tryAgain = setTimeout(() => {
reconnectWebSocket()
}, 5000)
}
function websocketonmessage (e) { // 数据接收
console.log('数据接收中:' + datePattern(new Date(), 'yyyy-MM-dd HH:mm:ss'))
const redata = e.data//收到的数据
if (parseInt(pe, 10) === 95001) {//后台返回的type=95001的信息，表⽰这是⼀个⼼跳信息 set(this.websocket)
}
//数据处理
}
function websocketsend (agentData) { // 数据发送
console.log('发送⼼跳')
websock.send(agentData)
}
function websocketclose (e) { // webSocket关闭
// console.log('connection closed (' + e.code + ')')
console.log('connection closed: ' + datePattern(new Date(), 'yyyy-MM-dd HH:mm:ss'))
clearTimeout(tryAgain)
tryAgain = setTimeout(() => {
reconnectWebSocket()
}, 5000)
}
以上就是⼀个稳定的webSocket连接了。
三、webSocket的封装
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论