feat: 增加终端的网络延迟显示

This commit is contained in:
Wankko Ree 2023-04-06 14:14:10 +08:00 committed by zhengkunwang223
parent 6fb1e690aa
commit 750a2a445e
2 changed files with 16 additions and 4 deletions

View File

@ -18,9 +18,17 @@
> >
<template #label> <template #label>
<span class="custom-tabs-label"> <span class="custom-tabs-label">
<el-icon style="margin-top: 1px" color="#67C23A" v-if="item.status === 'online'"> <span
v-if="item.status === 'online'"
:style="`color: ${
item.latency < 100 ? '#69db7c' : item.latency < 300 ? '#f59f00' : '#d9480f'
}; display: inline-flex; align-items: center`"
>
<span>&nbsp;{{ item.latency }}&nbsp;ms&nbsp;</span>
<el-icon>
<circleCheck /> <circleCheck />
</el-icon> </el-icon>
</span>
<el-button <el-button
v-if="item.status === 'closed'" v-if="item.status === 'closed'"
icon="Refresh" icon="Refresh"
@ -328,6 +336,7 @@ const onConnTerminal = async (title: string, wsID: number, isLocal?: boolean) =>
title: title, title: title,
wsID: wsID, wsID: wsID,
status: res.data ? 'online' : 'closed', status: res.data ? 'online' : 'closed',
latency: 0,
}); });
terminalValue.value = tabIndex; terminalValue.value = tabIndex;
if (!res.data && isLocal) { if (!res.data && isLocal) {
@ -348,6 +357,7 @@ function syncTerminal() {
for (const terminal of terminalTabs.value) { for (const terminal of terminalTabs.value) {
if (ctx && ctx.refs[`t-${terminal.index}`][0]) { if (ctx && ctx.refs[`t-${terminal.index}`][0]) {
terminal.status = ctx.refs[`t-${terminal.index}`][0].isWsOpen() ? 'online' : 'closed'; terminal.status = ctx.refs[`t-${terminal.index}`][0].isWsOpen() ? 'online' : 'closed';
terminal.latency = ctx.refs[`t-${terminal.index}`][0].getLatency();
} }
} }
} }

View File

@ -35,6 +35,7 @@ const termReady = ref(false);
const terminalSocket = ref<WebSocket>(); const terminalSocket = ref<WebSocket>();
const term = ref<Terminal>(); const term = ref<Terminal>();
const heartbeatTimer = ref<number>(); const heartbeatTimer = ref<number>();
const latency = ref(0);
const readyWatcher = watch( const readyWatcher = watch(
() => webSocketReady.value && termReady.value, () => webSocketReady.value && termReady.value,
@ -61,7 +62,7 @@ const onWSReceive = (message: MessageEvent) => {
break; break;
} }
case 'heartbeat': { case 'heartbeat': {
console.debug('latency', new Date().getTime() - wsMsg.timestamp, 'ms'); latency.value = new Date().getTime() - wsMsg.timestamp;
break; break;
} }
} }
@ -225,6 +226,7 @@ defineExpose({
onClose, onClose,
isWsOpen, isWsOpen,
onSendMsg, onSendMsg,
getLatency: () => latency.value,
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {