websocket
在单个TCP连接上进行全双工通信的协议,可以实现服务端和客户端双向推送信息的协议。我们在使用webscoket通信时必须要注意的问题超时重连和心跳检测。
超时重连:当出现错误时客户端尝试重新连接websocket。
心跳检测:客户端长时间没接收到服务端消息,就向服务端发送请求,查看服务端是否还在,如果服务端在规定时间未回复消息则表明服务端由于某种原因中断了,那么客户端也就可以中断连接了。当然下面代码可以通过reconnect再次选择重连。文章来源地址https://www.toymoban.com/news/detail-509456.html
class WebSocketClient {
#ws = null
#needReconnect
#count
constructor(options) {
this.url = options.url
this.#needReconnect = false//是否需要重连
this.#initWS()//启动ws
this.watch = options.watch || true//是否开启心跳
this.reconnectCountLimit = options.reconnectCountLimit ||3 //重连次数
this.#count = 0 //重连次数计数
this.reconnectTime = null//重连计时器
this.reconnectInterval = options.reconnectInterval || 5000//重连时间间隔
this.lastMessageTime = 0 //记录上次收到信息的时间 ->暂时没使用
this.heartDeadline = options.heartDeadline || 10000//心跳检测截止时间 每次收到信息后将在该时间后发送心跳消息,在该时间内未收到信息就终端ws连接
this.heartCloseTime = null //心跳关闭计时器
this.checkHeartTime = null //发送心跳消息计时器
}
get ws() {
return this.#ws
}
//初始化websocket
#initWS() {
this.#ws = new WebSocket(this.url)
this.#ws.addEventListener('open', (e) => {
this.initState()
this.#ws.send(`${JSON.stringify({ name: 'xxx', job: '前端高级工程师', salary: 41000 })}`)
})
this.#ws.addEventListener('close', (e) => {
console.log('链接关闭')
})
this.#ws.addEventListener('error', (e) => {
console.log('ws错误,开启重连')
this.#needReconnect = true
this.reconnect()
})
this.#ws.addEventListener('message', (e) => {
this.lastMessageTime = new Date().getTime()
console.log(e.data, 'I am client。I received your message')
this.watch && this.heartBeat()//启动心跳检测
})
}
//重连
reconnect() {
if (this.#needReconnect && this.#count < this.reconnectCountLimit) {
this.reconnectTime = setTimeout(() => {
console.log('重连')
this.#count++
this.#initWS()
}, this.reconnectInterval);
return
}
this.initState()
}
//初始化数据
initState() {
this.#needReconnect = false
this.#count = 0
this.reconnectTime && clearInterval(this.reconnectTime)
}
closeCheckHeart() {
clearTimeout(this.checkHeartTime)
clearTimeout(this.heartCloseTime)
}
send(data) {
this.#ws.send(data)
}
//心跳检测
heartBeat() {
const checkHeart = () => {
return new Promise((resolve) => {
//心跳检测 当上一次交换信息时间和现在间隔heartLimit时3s后开启心跳检测
console.log(new Date(this.lastMessageTime).toLocaleString(),'上次收到时间');
this.closeCheckHeart()
this.checkHeartTime = setTimeout(() => {
if (this.#ws.readyState === 1) {
console.log('检测心跳');
this.#ws.send(JSON.stringify({
type: 'heart'
}))
this.heartCloseTime = setTimeout(() => {
console.log('超时关闭')
this.#ws.close()
}, this.heartDeadline)
resolve()
} else {
checkHeart()
}
}, this.heartDeadline)
})
}
checkHeart()
}
}
const ws = new WebSocketClient({ url:'ws://localhost:8888'})
import { WebSocketServer } from 'ws';
const wss = new WebSocketServer({ port: 8888 });
wss.on('connection', function connection(ws) {
ws.on('message', function message(data) {
const res = data.toString()
console.log(res)
if (res.startsWith('{') && JSON.parse(res)?.type === 'heart') {
// ws.send('{heart:exist}')
}
});
wss.clients.forEach(client => {
client && client.send('广播信息')
})
ws.send('I am service');
setTimeout(() => {
ws.send('xxx');
},10000)
});
wss.onopen = function (e) {
console.log('服务端链接');
}
文章来源:https://www.toymoban.com/news/detail-509456.html
到了这里,关于websocket超时重连、心跳检测的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!