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