mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-27 22:54:03 +08:00
refactor(proxies): use ws request
This commit is contained in:
parent
a13060a056
commit
714158742d
@ -1,8 +1,6 @@
|
|||||||
import { writeClipboard } from '@solid-primitives/clipboard'
|
import { writeClipboard } from '@solid-primitives/clipboard'
|
||||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
|
||||||
import { useI18n } from '@solid-primitives/i18n'
|
import { useI18n } from '@solid-primitives/i18n'
|
||||||
import { makePersisted } from '@solid-primitives/storage'
|
import { makePersisted } from '@solid-primitives/storage'
|
||||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
|
||||||
import {
|
import {
|
||||||
IconCircleX,
|
IconCircleX,
|
||||||
IconPlayerPause,
|
IconPlayerPause,
|
||||||
@ -38,11 +36,10 @@ import {
|
|||||||
} from '~/constants'
|
} from '~/constants'
|
||||||
import { formatTimeFromNow } from '~/helpers'
|
import { formatTimeFromNow } from '~/helpers'
|
||||||
import {
|
import {
|
||||||
secret,
|
|
||||||
tableSize,
|
tableSize,
|
||||||
tableSizeClassName,
|
tableSizeClassName,
|
||||||
useRequest,
|
useRequest,
|
||||||
wsEndpointURL,
|
useWsRequest,
|
||||||
} from '~/signals'
|
} from '~/signals'
|
||||||
import type { Connection } from '~/types'
|
import type { Connection } from '~/types'
|
||||||
|
|
||||||
@ -66,13 +63,7 @@ export default () => {
|
|||||||
const [search, setSearch] = createSignal('')
|
const [search, setSearch] = createSignal('')
|
||||||
const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections)
|
const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections)
|
||||||
|
|
||||||
const ws = createReconnectingWS(
|
const connections = useWsRequest<{ connections: Connection[] }>('connections')
|
||||||
`${wsEndpointURL()}/connections?token=${secret()}`,
|
|
||||||
)
|
|
||||||
|
|
||||||
const messageEvent = createEventSignal<{
|
|
||||||
message: WebSocketEventMap['message']
|
|
||||||
}>(ws, 'message')
|
|
||||||
|
|
||||||
const [closedConnectionsWithSpeed, setClosedConnectionsWithSpeed] =
|
const [closedConnectionsWithSpeed, setClosedConnectionsWithSpeed] =
|
||||||
createSignal<ConnectionWithSpeed[]>([])
|
createSignal<ConnectionWithSpeed[]>([])
|
||||||
@ -87,7 +78,7 @@ export default () => {
|
|||||||
createSignal<ConnectionWithSpeed[]>([])
|
createSignal<ConnectionWithSpeed[]>([])
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const data = messageEvent()?.data
|
const data = connections()?.connections
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return
|
return
|
||||||
@ -97,9 +88,7 @@ export default () => {
|
|||||||
const prevMap = new Map<string, Connection>()
|
const prevMap = new Map<string, Connection>()
|
||||||
prevConnections.forEach((prev) => prevMap.set(prev.id, prev))
|
prevConnections.forEach((prev) => prevMap.set(prev.id, prev))
|
||||||
|
|
||||||
const connections = (
|
const connections = data.map((connection) => {
|
||||||
JSON.parse(data) as { connections: Connection[] }
|
|
||||||
).connections.map((connection) => {
|
|
||||||
const prevConn = prevMap.get(connection.id)
|
const prevConn = prevMap.get(connection.id)
|
||||||
|
|
||||||
if (!prevConn) {
|
if (!prevConn) {
|
||||||
|
@ -1,6 +1,4 @@
|
|||||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
|
||||||
import { useI18n } from '@solid-primitives/i18n'
|
import { useI18n } from '@solid-primitives/i18n'
|
||||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
|
||||||
import {
|
import {
|
||||||
ColumnDef,
|
ColumnDef,
|
||||||
createSolidTable,
|
createSolidTable,
|
||||||
@ -9,7 +7,7 @@ import {
|
|||||||
} from '@tanstack/solid-table'
|
} from '@tanstack/solid-table'
|
||||||
import { For, createEffect, createSignal } from 'solid-js'
|
import { For, createEffect, createSignal } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { secret, tableSize, tableSizeClassName, wsEndpointURL } from '~/signals'
|
import { tableSize, tableSizeClassName, useWsRequest } from '~/signals'
|
||||||
import { Log } from '~/types'
|
import { Log } from '~/types'
|
||||||
|
|
||||||
type LogWithSeq = Log & { seq: number }
|
type LogWithSeq = Log & { seq: number }
|
||||||
@ -20,22 +18,16 @@ export default () => {
|
|||||||
const [search, setSearch] = createSignal('')
|
const [search, setSearch] = createSignal('')
|
||||||
const [logs, setLogs] = createSignal<LogWithSeq[]>([])
|
const [logs, setLogs] = createSignal<LogWithSeq[]>([])
|
||||||
|
|
||||||
const ws = createReconnectingWS(`${wsEndpointURL()}/logs?token=${secret()}`)
|
const logsData = useWsRequest<Log>('logs')
|
||||||
|
|
||||||
const messageEvent = createEventSignal<{
|
|
||||||
message: WebSocketEventMap['message']
|
|
||||||
}>(ws, 'message')
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const data = messageEvent()?.data
|
const data = logsData()
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
setLogs((logs) =>
|
setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, 100))
|
||||||
[{ ...(JSON.parse(data) as Log), seq }, ...logs].slice(0, 100),
|
|
||||||
)
|
|
||||||
|
|
||||||
seq++
|
seq++
|
||||||
})
|
})
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
|
||||||
import { useI18n } from '@solid-primitives/i18n'
|
import { useI18n } from '@solid-primitives/i18n'
|
||||||
import { makeTimer } from '@solid-primitives/timer'
|
import { makeTimer } from '@solid-primitives/timer'
|
||||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
|
||||||
import type { ApexOptions } from 'apexcharts'
|
import type { ApexOptions } from 'apexcharts'
|
||||||
import byteSize from 'byte-size'
|
import byteSize from 'byte-size'
|
||||||
import { merge } from 'lodash'
|
import { merge } from 'lodash'
|
||||||
@ -15,7 +13,7 @@ import {
|
|||||||
createSignal,
|
createSignal,
|
||||||
} from 'solid-js'
|
} from 'solid-js'
|
||||||
import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
|
import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
|
||||||
import { secret, wsEndpointURL } from '~/signals'
|
import { useWsRequest } from '~/signals'
|
||||||
import type { Connection } from '~/types'
|
import type { Connection } from '~/types'
|
||||||
|
|
||||||
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
|
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
|
||||||
@ -47,17 +45,7 @@ export default () => {
|
|||||||
setInterval,
|
setInterval,
|
||||||
)
|
)
|
||||||
|
|
||||||
const trafficWS = createReconnectingWS(
|
const traffic = useWsRequest<{ down: number; up: number }>('traffic')
|
||||||
`${wsEndpointURL()}/traffic?token=${secret()}`,
|
|
||||||
)
|
|
||||||
|
|
||||||
const trafficWSMessageEvent = createEventSignal(trafficWS, 'message')
|
|
||||||
|
|
||||||
const traffic = () => {
|
|
||||||
const data = trafficWSMessageEvent()?.data
|
|
||||||
|
|
||||||
return data ? (JSON.parse(data) as { down: number; up: number }) : null
|
|
||||||
}
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const t = traffic()
|
const t = traffic()
|
||||||
@ -80,20 +68,10 @@ export default () => {
|
|||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
const memoryWS = createReconnectingWS(
|
const memory = useWsRequest<{ inuse: number }>('memory')
|
||||||
`${wsEndpointURL()}/memory?token=${secret()}`,
|
|
||||||
)
|
|
||||||
|
|
||||||
const memoryWSMessageEvent = createEventSignal(memoryWS, 'message')
|
|
||||||
|
|
||||||
const memory = () => {
|
|
||||||
const data = memoryWSMessageEvent()?.data
|
|
||||||
|
|
||||||
return data ? (JSON.parse(data) as { inuse: number }).inuse : null
|
|
||||||
}
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const m = memory()
|
const m = memory()?.inuse
|
||||||
|
|
||||||
if (m) setMemories((memories) => [...memories, m])
|
if (m) setMemories((memories) => [...memories, m])
|
||||||
})
|
})
|
||||||
@ -106,25 +84,11 @@ export default () => {
|
|||||||
{ name: t('memory'), data: memories() },
|
{ name: t('memory'), data: memories() },
|
||||||
])
|
])
|
||||||
|
|
||||||
const connectionsWS = createReconnectingWS(
|
const connection = useWsRequest<{
|
||||||
`${wsEndpointURL()}/connections?token=${secret()}`,
|
downloadTotal: number
|
||||||
)
|
uploadTotal: number
|
||||||
|
connections: Connection[]
|
||||||
const connectionsWSMessageEvent = createEventSignal<{
|
}>('connections')
|
||||||
message: WebSocketEventMap['message']
|
|
||||||
}>(connectionsWS, 'message')
|
|
||||||
|
|
||||||
const connection = () => {
|
|
||||||
const data = connectionsWSMessageEvent()?.data
|
|
||||||
|
|
||||||
return data
|
|
||||||
? (JSON.parse(data) as {
|
|
||||||
downloadTotal: number
|
|
||||||
uploadTotal: number
|
|
||||||
connections: Connection[]
|
|
||||||
})
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
@ -150,7 +114,7 @@ export default () => {
|
|||||||
</TrafficWidget>
|
</TrafficWidget>
|
||||||
|
|
||||||
<TrafficWidget label={t('memoryUsage')}>
|
<TrafficWidget label={t('memoryUsage')}>
|
||||||
{byteSize(memory() || 0).toString()}
|
{byteSize(memory()?.inuse || 0).toString()}
|
||||||
</TrafficWidget>
|
</TrafficWidget>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
|
import { createEventSignal } from '@solid-primitives/event-listener'
|
||||||
import { makePersisted } from '@solid-primitives/storage'
|
import { makePersisted } from '@solid-primitives/storage'
|
||||||
|
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||||||
import ky from 'ky'
|
import ky from 'ky'
|
||||||
import { createSignal } from 'solid-js'
|
import { createMemo, createSignal } from 'solid-js'
|
||||||
|
|
||||||
export const [selectedEndpoint, setSelectedEndpoint] = makePersisted(
|
export const [selectedEndpoint, setSelectedEndpoint] = makePersisted(
|
||||||
createSignal(''),
|
createSignal(''),
|
||||||
@ -37,3 +39,23 @@ export const secret = () => endpoint()?.secret
|
|||||||
|
|
||||||
export const wsEndpointURL = () =>
|
export const wsEndpointURL = () =>
|
||||||
new URL(endpoint()?.url ?? '').origin.replace('http', 'ws')
|
new URL(endpoint()?.url ?? '').origin.replace('http', 'ws')
|
||||||
|
|
||||||
|
export const useWsRequest = <T>(path: string) => {
|
||||||
|
const ws = createReconnectingWS(
|
||||||
|
`${wsEndpointURL()}/${path}?token=${secret()}`,
|
||||||
|
)
|
||||||
|
|
||||||
|
const event = createEventSignal<{
|
||||||
|
message: MessageEvent
|
||||||
|
}>(ws, 'message')
|
||||||
|
|
||||||
|
return createMemo<T | null>(() => {
|
||||||
|
const e = event()
|
||||||
|
|
||||||
|
if (!e) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return JSON.parse(event()?.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user