refactor(proxies): use ws request

This commit is contained in:
Zephyruso 2023-09-06 19:33:07 +08:00
parent a13060a056
commit 714158742d
4 changed files with 41 additions and 74 deletions

View File

@ -1,8 +1,6 @@
import { writeClipboard } from '@solid-primitives/clipboard'
import { createEventSignal } from '@solid-primitives/event-listener'
import { useI18n } from '@solid-primitives/i18n'
import { makePersisted } from '@solid-primitives/storage'
import { createReconnectingWS } from '@solid-primitives/websocket'
import {
IconCircleX,
IconPlayerPause,
@ -38,11 +36,10 @@ import {
} from '~/constants'
import { formatTimeFromNow } from '~/helpers'
import {
secret,
tableSize,
tableSizeClassName,
useRequest,
wsEndpointURL,
useWsRequest,
} from '~/signals'
import type { Connection } from '~/types'
@ -66,13 +63,7 @@ export default () => {
const [search, setSearch] = createSignal('')
const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections)
const ws = createReconnectingWS(
`${wsEndpointURL()}/connections?token=${secret()}`,
)
const messageEvent = createEventSignal<{
message: WebSocketEventMap['message']
}>(ws, 'message')
const connections = useWsRequest<{ connections: Connection[] }>('connections')
const [closedConnectionsWithSpeed, setClosedConnectionsWithSpeed] =
createSignal<ConnectionWithSpeed[]>([])
@ -87,7 +78,7 @@ export default () => {
createSignal<ConnectionWithSpeed[]>([])
createEffect(() => {
const data = messageEvent()?.data
const data = connections()?.connections
if (!data) {
return
@ -97,9 +88,7 @@ export default () => {
const prevMap = new Map<string, Connection>()
prevConnections.forEach((prev) => prevMap.set(prev.id, prev))
const connections = (
JSON.parse(data) as { connections: Connection[] }
).connections.map((connection) => {
const connections = data.map((connection) => {
const prevConn = prevMap.get(connection.id)
if (!prevConn) {

View File

@ -1,6 +1,4 @@
import { createEventSignal } from '@solid-primitives/event-listener'
import { useI18n } from '@solid-primitives/i18n'
import { createReconnectingWS } from '@solid-primitives/websocket'
import {
ColumnDef,
createSolidTable,
@ -9,7 +7,7 @@ import {
} from '@tanstack/solid-table'
import { For, createEffect, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { secret, tableSize, tableSizeClassName, wsEndpointURL } from '~/signals'
import { tableSize, tableSizeClassName, useWsRequest } from '~/signals'
import { Log } from '~/types'
type LogWithSeq = Log & { seq: number }
@ -20,22 +18,16 @@ export default () => {
const [search, setSearch] = createSignal('')
const [logs, setLogs] = createSignal<LogWithSeq[]>([])
const ws = createReconnectingWS(`${wsEndpointURL()}/logs?token=${secret()}`)
const messageEvent = createEventSignal<{
message: WebSocketEventMap['message']
}>(ws, 'message')
const logsData = useWsRequest<Log>('logs')
createEffect(() => {
const data = messageEvent()?.data
const data = logsData()
if (!data) {
return
}
setLogs((logs) =>
[{ ...(JSON.parse(data) as Log), seq }, ...logs].slice(0, 100),
)
setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, 100))
seq++
})

View File

@ -1,7 +1,5 @@
import { createEventSignal } from '@solid-primitives/event-listener'
import { useI18n } from '@solid-primitives/i18n'
import { makeTimer } from '@solid-primitives/timer'
import { createReconnectingWS } from '@solid-primitives/websocket'
import type { ApexOptions } from 'apexcharts'
import byteSize from 'byte-size'
import { merge } from 'lodash'
@ -15,7 +13,7 @@ import {
createSignal,
} from 'solid-js'
import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
import { secret, wsEndpointURL } from '~/signals'
import { useWsRequest } from '~/signals'
import type { Connection } from '~/types'
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
@ -47,17 +45,7 @@ export default () => {
setInterval,
)
const trafficWS = createReconnectingWS(
`${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
}
const traffic = useWsRequest<{ down: number; up: number }>('traffic')
createEffect(() => {
const t = traffic()
@ -80,20 +68,10 @@ export default () => {
},
])
const memoryWS = createReconnectingWS(
`${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
}
const memory = useWsRequest<{ inuse: number }>('memory')
createEffect(() => {
const m = memory()
const m = memory()?.inuse
if (m) setMemories((memories) => [...memories, m])
})
@ -106,25 +84,11 @@ export default () => {
{ name: t('memory'), data: memories() },
])
const connectionsWS = createReconnectingWS(
`${wsEndpointURL()}/connections?token=${secret()}`,
)
const connectionsWSMessageEvent = createEventSignal<{
message: WebSocketEventMap['message']
}>(connectionsWS, 'message')
const connection = () => {
const data = connectionsWSMessageEvent()?.data
return data
? (JSON.parse(data) as {
downloadTotal: number
uploadTotal: number
connections: Connection[]
})
: null
}
const connection = useWsRequest<{
downloadTotal: number
uploadTotal: number
connections: Connection[]
}>('connections')
return (
<div class="flex flex-col gap-4">
@ -150,7 +114,7 @@ export default () => {
</TrafficWidget>
<TrafficWidget label={t('memoryUsage')}>
{byteSize(memory() || 0).toString()}
{byteSize(memory()?.inuse || 0).toString()}
</TrafficWidget>
</div>

View File

@ -1,6 +1,8 @@
import { createEventSignal } from '@solid-primitives/event-listener'
import { makePersisted } from '@solid-primitives/storage'
import { createReconnectingWS } from '@solid-primitives/websocket'
import ky from 'ky'
import { createSignal } from 'solid-js'
import { createMemo, createSignal } from 'solid-js'
export const [selectedEndpoint, setSelectedEndpoint] = makePersisted(
createSignal(''),
@ -37,3 +39,23 @@ export const secret = () => endpoint()?.secret
export const wsEndpointURL = () =>
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)
})
}