优化WebSocket组件
This commit is contained in:
zjl
parent
03e4a66f18
commit
e44bf151dd
@ -1,155 +1,180 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="ts" name="global-websocket">
|
||||
import { reactive, ref, computed,onMounted,onUnmounted } from 'vue';
|
||||
import { reactive, ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const emit = defineEmits(['rollback']);
|
||||
const emit = defineEmits(['rollback']);
|
||||
|
||||
const props = defineProps({
|
||||
uri: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
uri: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
webSocket: ref(), // webSocket实例
|
||||
lockReconnect: false, // 重连锁，避免多次重连
|
||||
maxReconnect: 6, // 最大重连次数， -1 标识无限重连
|
||||
reconnectTime: 0, // 重连尝试次数
|
||||
heartbeat: {
|
||||
interval: 30 * 1000, // 心跳间隔时间
|
||||
timeout: 10 * 1000, // 响应超时时间
|
||||
pingTimeoutObj: ref(), // 延时发送心跳的定时器
|
||||
pongTimeoutObj: ref(), // 接收心跳响应的定时器
|
||||
pingMessage: JSON.stringify({ type: 'ping' }), // 心跳请求信息
|
||||
},
|
||||
});
|
||||
/**
|
||||
* 定义Socket状态
|
||||
*/
|
||||
const state = reactive({
|
||||
webSocket: ref(), // webSocket实例
|
||||
lockReconnect: false, // 重连锁，避免多次重连
|
||||
maxReconnect: 6, // 最大重连次数， -1 标识无限重连
|
||||
reconnectTime: 0, // 重连尝试次数
|
||||
heartbeat: {
|
||||
interval: 30 * 1000, // 心跳间隔时间
|
||||
timeout: 10 * 1000, // 响应超时时间
|
||||
pingTimeoutObj: ref(), // 延时发送心跳的定时器
|
||||
pongTimeoutObj: ref(), // 接收心跳响应的定时器
|
||||
pingMessage: JSON.stringify({ type: 'ping' }), // 心跳请求信息
|
||||
},
|
||||
});
|
||||
|
||||
const token = computed(() => {
|
||||
return useUserStore().getToken;
|
||||
});
|
||||
/**
|
||||
* 获取Token令牌
|
||||
*/
|
||||
const token = computed(() => {
|
||||
return useUserStore().getToken;
|
||||
});
|
||||
|
||||
const tenant = computed(() => {
|
||||
return Session.getTenant();
|
||||
});
|
||||
const tenant = computed(() => {
|
||||
return Session.getTenant();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initWebSocket();
|
||||
});
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
initWebSocket();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
state.webSocket.close();
|
||||
clearTimeoutObj(state.heartbeat);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
state.webSocket.close();
|
||||
clearTimeoutObj(state.heartbeat);
|
||||
});
|
||||
|
||||
const initWebSocket = () => {
|
||||
// ws地址
|
||||
let host = window.location.host;
|
||||
let wsUri =`${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`;
|
||||
/**
|
||||
* 初始化WebSocket对象
|
||||
*/
|
||||
const initWebSocket = () => {
|
||||
// ws地址
|
||||
let host = window.location.host;
|
||||
let wsUri = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`;
|
||||
|
||||
// 建立连接
|
||||
state.webSocket = new WebSocket(wsUri);
|
||||
// 连接成功
|
||||
state.webSocket.onopen = onOpen;
|
||||
// 连接错误
|
||||
state.webSocket.onerror = onError;
|
||||
// 接收信息
|
||||
state.webSocket.onmessage = onMessage;
|
||||
// 连接关闭
|
||||
state.webSocket.onclose = onClose;
|
||||
};
|
||||
// 建立连接
|
||||
state.webSocket = new WebSocket(wsUri);
|
||||
// 连接成功
|
||||
state.webSocket.onopen = onOpen;
|
||||
// 连接错误
|
||||
state.webSocket.onerror = onError;
|
||||
// 接收信息
|
||||
state.webSocket.onmessage = onMessage;
|
||||
// 连接关闭
|
||||
state.webSocket.onclose = onClose;
|
||||
};
|
||||
|
||||
const reconnect = () => {
|
||||
if (!token) {
|
||||
return;
|
||||
}
|
||||
if (state.lockReconnect || (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)) {
|
||||
return;
|
||||
}
|
||||
state.lockReconnect = true;
|
||||
setTimeout(() => {
|
||||
state.reconnectTime++;
|
||||
// 建立新连接
|
||||
initWebSocket();
|
||||
state.lockReconnect = false;
|
||||
}, 5000);
|
||||
};
|
||||
/**
|
||||
* 清空定时器
|
||||
*/
|
||||
const clearTimeoutObj = (heartbeat: any) => {
|
||||
heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
|
||||
heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
|
||||
};
|
||||
/**
|
||||
* 开启心跳
|
||||
*/
|
||||
const startHeartbeat = () => {
|
||||
const webSocket = state.webSocket;
|
||||
const heartbeat = state.heartbeat;
|
||||
// 清空定时器
|
||||
clearTimeoutObj(heartbeat);
|
||||
// 延时发送下一次心跳
|
||||
heartbeat.pingTimeoutObj = setTimeout(() => {
|
||||
// 如果连接正常
|
||||
if (webSocket.readyState === 1) {
|
||||
//这里发送一个心跳，后端收到后，返回一个心跳消息，
|
||||
webSocket.send(heartbeat.pingMessage);
|
||||
// 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器
|
||||
heartbeat.pongTimeoutObj = setTimeout(() => {
|
||||
webSocket.close();
|
||||
}, heartbeat.timeout);
|
||||
} else {
|
||||
// 否则重连
|
||||
reconnect();
|
||||
}
|
||||
}, heartbeat.interval);
|
||||
};
|
||||
/**
|
||||
* 重连机制
|
||||
*/
|
||||
const reconnect = () => {
|
||||
if (!token.value) {
|
||||
return;
|
||||
}
|
||||
if (
|
||||
state.lockReconnect ||
|
||||
(state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
state.lockReconnect = true;
|
||||
setTimeout(() => {
|
||||
state.reconnectTime++;
|
||||
// 建立新连接
|
||||
initWebSocket();
|
||||
state.lockReconnect = false;
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
/**
|
||||
* 连接成功事件
|
||||
*/
|
||||
const onOpen = () => {
|
||||
//开启心跳
|
||||
startHeartbeat();
|
||||
state.reconnectTime = 0;
|
||||
};
|
||||
/**
|
||||
* 连接失败事件
|
||||
* @param e
|
||||
*/
|
||||
const onError = () => {
|
||||
//重连
|
||||
reconnect();
|
||||
};
|
||||
/**
|
||||
* 清空定时器
|
||||
*/
|
||||
const clearTimeoutObj = (heartbeat: any) => {
|
||||
heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
|
||||
heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
|
||||
};
|
||||
|
||||
/**
|
||||
* 连接关闭事件
|
||||
* @param e
|
||||
*/
|
||||
const onClose = () => {
|
||||
//重连
|
||||
reconnect();
|
||||
};
|
||||
/**
|
||||
* 接收服务器推送的信息
|
||||
* @param msgEvent
|
||||
*/
|
||||
const onMessage = (msgEvent: any) => {
|
||||
//收到服务器信息，心跳重置并发送
|
||||
startHeartbeat();
|
||||
// if (msgEvent.data.indexOf('pong') > 0) {
|
||||
// return;
|
||||
// }
|
||||
// let text =''
|
||||
// try{
|
||||
// text = JSON.parse(msgEvent.data);
|
||||
// }catch(e){
|
||||
// return
|
||||
// }
|
||||
/**
|
||||
* 开启心跳
|
||||
*/
|
||||
const startHeartbeat = () => {
|
||||
const webSocket = state.webSocket;
|
||||
const heartbeat = state.heartbeat;
|
||||
// 清空定时器
|
||||
clearTimeoutObj(heartbeat);
|
||||
// 延时发送下一次心跳
|
||||
heartbeat.pingTimeoutObj = setTimeout(() => {
|
||||
// 如果连接正常
|
||||
if (webSocket.readyState === 1) {
|
||||
// 这里发送一个心跳，后端收到后，返回一个心跳消息，
|
||||
webSocket.send(heartbeat.pingMessage);
|
||||
// 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器
|
||||
heartbeat.pongTimeoutObj = setTimeout(() => {
|
||||
webSocket.close();
|
||||
}, heartbeat.timeout);
|
||||
} else {
|
||||
// 否则重连
|
||||
reconnect();
|
||||
}
|
||||
}, heartbeat.interval);
|
||||
};
|
||||
|
||||
emit('rollback', msgEvent.data);
|
||||
};
|
||||
/**
|
||||
* 连接成功事件
|
||||
*/
|
||||
const onOpen = () => {
|
||||
//开启心跳
|
||||
startHeartbeat();
|
||||
state.reconnectTime = 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* 连接失败事件
|
||||
* @param e
|
||||
*/
|
||||
const onError = () => {
|
||||
//重连
|
||||
reconnect();
|
||||
};
|
||||
|
||||
/**
|
||||
* 连接关闭事件
|
||||
* @param e
|
||||
*/
|
||||
const onClose = () => {
|
||||
//重连
|
||||
reconnect();
|
||||
};
|
||||
|
||||
/**
|
||||
* 接收服务器推送的信息
|
||||
* @param msgEvent 消息事件
|
||||
*/
|
||||
const onMessage = (msgEvent: any) => {
|
||||
// 收到服务器信息，心跳重置并发送
|
||||
startHeartbeat();
|
||||
// if (msgEvent.data.indexOf('pong') > 0) {
|
||||
// return;
|
||||
// }
|
||||
// let text =''
|
||||
// try{
|
||||
// text = JSON.parse(msgEvent.data);
|
||||
// }catch(e){
|
||||
// return
|
||||
// }
|
||||
|
||||
emit('rollback', msgEvent.data);
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user