connections page

Author: Pompurin404

src/main/core/mihomoApi.ts

@@ -7,6 +7,7 @@ let axiosIns: AxiosInstance = null!
 let mihomoTrafficWs: WebSocket | null = null
 let mihomoMemoryWs: WebSocket | null = null
 let mihomoLogsWs: WebSocket | null = null
+let mihomoConnectionsWs: WebSocket | null = null
 
 export const getAxios = async (force: boolean = false): Promise<AxiosInstance> => {
   if (axiosIns && !force) return axiosIns
@@ -46,13 +47,6 @@ export const patchMihomoConfig = async (patch: Partial<IMihomoConfig>): Promise<
   })) as Promise<void>
 }
 
-export const mihomoConnections = async (): Promise<IMihomoConnectionsInfo> => {
-  const instance = await getAxios()
-  return (await instance.get('/connections').catch(() => {
-    return { downloadTotal: 0, uploadTotal: 0, connections: [], memory: 0 }
-  })) as IMihomoConnectionsInfo
-}
-
 export const mihomoCloseConnection = async (id: string): Promise<void> => {
   const instance = await getAxios()
   return (await instance.delete(`/connections/${encodeURIComponent(id)}`).catch((e) => {
@@ -230,3 +224,44 @@ const mihomoLogs = (): void => {
     }
   }
 }
+
+export const startMihomoConnections = (): void => {
+  mihomoConnections()
+}
+
+export const stopMihomoConnections = (): void => {
+  if (mihomoConnectionsWs) {
+    mihomoConnectionsWs.removeAllListeners()
+    if (mihomoConnectionsWs.readyState === WebSocket.OPEN) {
+      mihomoConnectionsWs.close()
+    }
+    mihomoConnectionsWs = null
+  }
+}
+
+const mihomoConnections = (): void => {
+  let server = getControledMihomoConfig()['external-controller']
+  const secret = getControledMihomoConfig().secret ?? ''
+  if (server?.startsWith(':')) server = `127.0.0.1${server}`
+  stopMihomoConnections()
+
+  mihomoConnectionsWs = new WebSocket(
+    `ws://${server}/connections?token=${encodeURIComponent(secret)}`
+  )
+
+  mihomoConnectionsWs.onmessage = (e): void => {
+    const data = e.data as string
+    window?.webContents.send('mihomoConnections', JSON.parse(data) as IMihomoConnectionsInfo)
+  }
+
+  mihomoConnectionsWs.onclose = (): void => {
+    mihomoConnections()
+  }
+
+  mihomoConnectionsWs.onerror = (): void => {
+    if (mihomoConnectionsWs) {
+      mihomoConnectionsWs.close()
+      mihomoConnectionsWs = null
+    }
+  }
+}

src/main/utils/ipc.ts

@@ -4,13 +4,14 @@ import {
   mihomoCloseAllConnections,
   mihomoCloseConnection,
   mihomoConfig,
-  mihomoConnections,
   mihomoProxies,
   mihomoProxyDelay,
   mihomoRules,
   mihomoVersion,
   patchMihomoConfig,
+  startMihomoConnections,
   startMihomoLogs,
+  stopMihomoConnections,
   stopMihomoLogs
 } from '../core/mihomoApi'
 import { checkAutoRun, disableAutoRun, enableAutoRun } from '../resolve/autoRun'
@@ -36,7 +37,6 @@ import { checkUpdate } from '../resolve/autoUpdater'
 export function registerIpcMainHandlers(): void {
   ipcMain.handle('mihomoVersion', mihomoVersion)
   ipcMain.handle('mihomoConfig', mihomoConfig)
-  ipcMain.handle('mihomoConnections', mihomoConnections)
   ipcMain.handle('mihomoCloseConnection', (_e, id) => mihomoCloseConnection(id))
   ipcMain.handle('mihomoCloseAllConnections', mihomoCloseAllConnections)
   ipcMain.handle('mihomoRules', mihomoRules)
@@ -45,6 +45,8 @@ export function registerIpcMainHandlers(): void {
   ipcMain.handle('mihomoProxyDelay', (_e, proxy, url) => mihomoProxyDelay(proxy, url))
   ipcMain.handle('startMihomoLogs', startMihomoLogs)
   ipcMain.handle('stopMihomoLogs', stopMihomoLogs)
+  ipcMain.handle('startMihomoConnections', () => startMihomoConnections())
+  ipcMain.handle('stopMihomoConnections', () => stopMihomoConnections())
   ipcMain.handle('patchMihomoConfig', (_e, patch) => patchMihomoConfig(patch))
   ipcMain.handle('checkAutoRun', checkAutoRun)
   ipcMain.handle('enableAutoRun', enableAutoRun)

src/renderer/src/assets/main.css

@@ -8,7 +8,11 @@
 
 *::-webkit-scrollbar {
   width: 8px;
-  height: 6px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
 
 /* Light mode */

src/renderer/src/components/connections/connection-detail-modal.tsx

@@ -0,0 +1,29 @@
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@nextui-org/react'
+import React from 'react'
+interface Props {
+  connection: IMihomoConnectionDetail
+  onClose: () => void
+}
+const ConnectionDetailModal: React.FC<Props> = (props) => {
+  const { connection, onClose } = props
+
+  return (
+    <Modal size="xl" hideCloseButton isOpen={true} scrollBehavior="inside">
+      <ModalContent>
+        <ModalHeader className="flex">连接详情</ModalHeader>
+        <ModalBody>
+          <pre>
+            <code>{JSON.stringify(connection, null, 2)}</code>
+          </pre>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="light" onPress={onClose}>
+            关闭
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default ConnectionDetailModal