diff --git a/src/pages/connections.tsx b/src/pages/connections.tsx index 0c4e866..f949de7 100644 --- a/src/pages/connections.tsx +++ b/src/pages/connections.tsx @@ -12,7 +12,7 @@ const ConnectionsPage = () => { const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] }; const { t } = useTranslation(); - const [conn, setConn] = useState(initConn); + const [connData, setConnData] = useState(initConn); useEffect(() => { let ws: WebSocket | null = null; @@ -23,7 +23,35 @@ const ConnectionsPage = () => { ws.addEventListener("message", (event) => { const data = JSON.parse(event.data) as ApiType.Connections; - setConn(data); + setConnData((old) => { + const oldConn = old.connections; + const oldList = oldConn.map((each) => each.id); + const maxLen = data.connections.length; + + const connections: typeof oldConn = []; + + // 与前一次连接的顺序尽量保持一致 + data.connections + .filter((each) => { + const index = oldList.indexOf(each.id); + + if (index >= 0 && index < maxLen) { + connections[index] = each; + return false; + } + return true; + }) + .forEach((each) => { + for (let i = 0; i < maxLen; ++i) { + if (!connections[i]) { + connections[i] = each; + return; + } + } + }); + + return { ...data, connections }; + }); }); }); @@ -50,7 +78,7 @@ const ConnectionsPage = () => { } />