This commit is contained in:
陈红丽 2024-12-18 15:55:44 +08:00
commit e6c1599cb2
3 changed files with 164 additions and 144 deletions

View File

@ -2,18 +2,24 @@
<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({ /**
* 定义接收的参数
*/
const props = defineProps({
uri: { uri: {
type: String, type: String,
}, },
}); });
const state = reactive({ /**
* 定义Socket状态
*/
const state = reactive({
webSocket: ref(), // webSocket webSocket: ref(), // webSocket
lockReconnect: false, // lockReconnect: false, //
maxReconnect: 6, // -1 maxReconnect: 6, // -1
@ -25,29 +31,38 @@ const state = reactive({
pongTimeoutObj: ref(), // pongTimeoutObj: ref(), //
pingMessage: JSON.stringify({ type: 'ping' }), // pingMessage: JSON.stringify({ type: 'ping' }), //
}, },
}); });
const token = computed(() => { /**
* 获取Token令牌
*/
const token = computed(() => {
return useUserStore().getToken; return useUserStore().getToken;
}); });
const tenant = computed(() => { const tenant = computed(() => {
return Session.getTenant(); return Session.getTenant();
}); });
onMounted(() => { /**
* 钩子函数
*/
onMounted(() => {
initWebSocket(); initWebSocket();
}); });
onUnmounted(() => { onUnmounted(() => {
state.webSocket.close(); state.webSocket.close();
clearTimeoutObj(state.heartbeat); clearTimeoutObj(state.heartbeat);
}); });
const initWebSocket = () => { /**
* 初始化WebSocket对象
*/
const initWebSocket = () => {
// ws // ws
let host = window.location.host; let host = window.location.host;
let wsUri =`${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`; let wsUri = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`;
// //
state.webSocket = new WebSocket(wsUri); state.webSocket = new WebSocket(wsUri);
@ -59,13 +74,19 @@ const initWebSocket = () => {
state.webSocket.onmessage = onMessage; state.webSocket.onmessage = onMessage;
// //
state.webSocket.onclose = onClose; state.webSocket.onclose = onClose;
}; };
const reconnect = () => { /**
if (!token) { * 重连机制
*/
const reconnect = () => {
if (!token.value) {
return; return;
} }
if (state.lockReconnect || (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)) { if (
state.lockReconnect ||
(state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)
) {
return; return;
} }
state.lockReconnect = true; state.lockReconnect = true;
@ -75,18 +96,20 @@ const reconnect = () => {
initWebSocket(); initWebSocket();
state.lockReconnect = false; state.lockReconnect = false;
}, 5000); }, 5000);
}; };
/**
/**
* 清空定时器 * 清空定时器
*/ */
const clearTimeoutObj = (heartbeat: any) => { const clearTimeoutObj = (heartbeat: any) => {
heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj); heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj); heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
}; };
/**
/**
* 开启心跳 * 开启心跳
*/ */
const startHeartbeat = () => { const startHeartbeat = () => {
const webSocket = state.webSocket; const webSocket = state.webSocket;
const heartbeat = state.heartbeat; const heartbeat = state.heartbeat;
// //
@ -106,38 +129,40 @@ const startHeartbeat = () => {
reconnect(); reconnect();
} }
}, heartbeat.interval); }, heartbeat.interval);
}; };
/** /**
* 连接成功事件 * 连接成功事件
*/ */
const onOpen = () => { const onOpen = () => {
// //
startHeartbeat(); startHeartbeat();
state.reconnectTime = 0; state.reconnectTime = 0;
}; };
/**
/**
* 连接失败事件 * 连接失败事件
* @param e * @param e
*/ */
const onError = () => { const onError = () => {
// //
reconnect(); reconnect();
}; };
/** /**
* 连接关闭事件 * 连接关闭事件
* @param e * @param e
*/ */
const onClose = () => { const onClose = () => {
// //
reconnect(); reconnect();
}; };
/**
/**
* 接收服务器推送的信息 * 接收服务器推送的信息
* @param msgEvent * @param msgEvent 消息事件
*/ */
const onMessage = (msgEvent: any) => { const onMessage = (msgEvent: any) => {
// //
startHeartbeat(); startHeartbeat();
// if (msgEvent.data.indexOf('pong') > 0) { // if (msgEvent.data.indexOf('pong') > 0) {
@ -151,5 +176,5 @@ const onMessage = (msgEvent: any) => {
// } // }
emit('rollback', msgEvent.data); emit('rollback', msgEvent.data);
}; };
</script> </script>

View File

@ -14,11 +14,6 @@ export const columns = [
{ {
title: '配置编码', title: '配置编码',
key: 'code', key: 'code',
width: 100, width: 200,
},
{
title: '排序',
key: 'sort',
width: 100,
}, },
]; ];

View File

@ -14,6 +14,6 @@ export const columns = [
{ {
title: '字典编码', title: '字典编码',
key: 'code', key: 'code',
width: 100, width: 200,
}, },
]; ];