From 714158742d05d104e5e85f8bb13350dfd06a763b Mon Sep 17 00:00:00 2001 From: Zephyruso <127948745+Zephyruso@users.noreply.github.com> Date: Wed, 6 Sep 2023 19:33:07 +0800 Subject: [PATCH] refactor(proxies): use ws request --- src/pages/Connections.tsx | 19 +++---------- src/pages/Logs.tsx | 16 +++-------- src/pages/Overview.tsx | 56 +++++++-------------------------------- src/signals/request.ts | 24 ++++++++++++++++- 4 files changed, 41 insertions(+), 74 deletions(-) diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx index 997b243..9f646cb 100644 --- a/src/pages/Connections.tsx +++ b/src/pages/Connections.tsx @@ -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([]) @@ -87,7 +78,7 @@ export default () => { createSignal([]) createEffect(() => { - const data = messageEvent()?.data + const data = connections()?.connections if (!data) { return @@ -97,9 +88,7 @@ export default () => { const prevMap = new Map() 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) { diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx index 8443ade..8390cc6 100644 --- a/src/pages/Logs.tsx +++ b/src/pages/Logs.tsx @@ -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([]) - const ws = createReconnectingWS(`${wsEndpointURL()}/logs?token=${secret()}`) - - const messageEvent = createEventSignal<{ - message: WebSocketEventMap['message'] - }>(ws, 'message') + const logsData = useWsRequest('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++ }) diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx index 016fc21..f319fd8 100644 --- a/src/pages/Overview.tsx +++ b/src/pages/Overview.tsx @@ -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 (
@@ -150,7 +114,7 @@ export default () => { - {byteSize(memory() || 0).toString()} + {byteSize(memory()?.inuse || 0).toString()}
diff --git a/src/signals/request.ts b/src/signals/request.ts index 6fe0299..9c2daba 100644 --- a/src/signals/request.ts +++ b/src/signals/request.ts @@ -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 = (path: string) => { + const ws = createReconnectingWS( + `${wsEndpointURL()}/${path}?token=${secret()}`, + ) + + const event = createEventSignal<{ + message: MessageEvent + }>(ws, 'message') + + return createMemo(() => { + const e = event() + + if (!e) { + return null + } + + return JSON.parse(event()?.data) + }) +}