let wsurl = `${location.protocol === "https:" ? "wss" : "ws"}` + "://api.aaa.com:8080/websocket"
let ws = null;
let weboscket_callback = null;
//避免重复连接
let lockReconnect = false;
let timeoutnum = null; //断开 重连倒计时
let initWebSocket = () => {
//初始化 websocket
if ('WebSocket' in window) {
ws = new WebSocket(wsurl)
ws.onmessage = websocketOnmessage
ws.onopen = websocketOnopen
ws.onerror = websocketOnerror
ws.onclose = websocketClose
} else {
console.log('Current browser Not support websocket')
}
}
//获取 websocket 推送的数据
let websocketOnmessage = e => {
heartCheck.reset().start();
return weboscket_callback(e)
}
// 发送数据
let sendData = (data, callback) => {
weboscket_callback = callback
// 判断 data 数据类型
if (typeof data == 'string') {
data = data
} else {
data = JSON.stringify(data)
}
// 判断 websocket 的状态
if (ws.readyState === ws.OPEN) {
// 已经打开,可以直接发送
ws.send(data)
} else if (ws.readyState === ws.CONNECTING) {
// 正在开启状态中,则 1 秒后重新发送
setTimeout(() => {
ws.send(data)
}, 1000)
} else {
// 未打开,则开启后重新调用
initWebSocket()
sendData(data, callback)
}
}
// 连接关闭事件
let websocketClose = (e) => {
console.log('连接关闭', e)
heartCheck.reset();//心跳检测
reconnect();
}
// 连接失败时重新连接
let websocketOnerror = () => {
lockReconnect = false;
reconnect();
}
// 手动关闭 websocket
let closeWebsocket = () => {
console.log('手动关闭 websocket');
ws.close()
}
// 重连
let reconnect = () => {
if (lockReconnect) {
return;
}
// 没连接上会一直重连,设置延迟避免请求过多
timeoutnum && clearTimeout(timeoutnum);
timeoutnum = setTimeout(function () {
lockReconnect = false;
console.log('重连中...');
initWebSocket();
}, 5000);
}
let websocketOnopen =()=>{
heartCheck.reset().start()
}
let heartCheck = { //心跳检测
// timeout: 240 * 1000,
timeout: 30000,
timeoutObj: null,
serverTimeoutObj: null,
reset () {
clearTimeout(this.timeoutObj)
clearTimeout(this.serverTimeoutObj)
return this;
},
start(){
let that = this;
this.timeoutObj = setTimeout(() => {
//发送数据,如果onmessage能接收到数据,表示连接正常,然后在onmessage里面执行reset方法清除定时器
ws.send(JSON.stringify({ eventType: 'PING' }))
console.log('ping')
this.serverTimeoutObj = setTimeout(() => {
ws.close()
},that.timeout)
},this.timeout)
}
}
export { initWebSocket, sendData, websocketOnmessage,closeWebsocket}
vue连接websocket并做心跳检测
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- Vue页面template Vue页面js 其他js 部分截图 用途 即使通讯 消息通知 封装当前页面地址到APP...
- python websocket 安装 先来看一下,长连接调用方式: 长连接,参数介绍: 长连接关键方法: 如果不...