refactor: hoist the websocket connection of connections to global App level

This commit is contained in:
kunish 2023-09-19 20:24:13 +08:00
parent cb53c920d0
commit 4cc5eeb01f
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
4 changed files with 39 additions and 44 deletions

View File

@ -1,3 +1,4 @@
import { usePrefersDark } from '@solid-primitives/media'
import { Navigate, Route, Routes, useNavigate } from '@solidjs/router' import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
import { Show, createEffect, lazy, onMount } from 'solid-js' import { Show, createEffect, lazy, onMount } from 'solid-js'
import { Toaster } from 'solid-toast' import { Toaster } from 'solid-toast'
@ -6,12 +7,13 @@ import { Header } from '~/components'
import { ROUTES } from '~/constants' import { ROUTES } from '~/constants'
import { import {
WsMsg, WsMsg,
autoSwitchTheme,
curTheme, curTheme,
endpoint, endpoint,
selectedEndpoint, favDayTheme,
setAllConnections, favNightTheme,
setCurTheme,
setLatestConnectionMsg, setLatestConnectionMsg,
useAutoSwitchTheme,
useProxies, useProxies,
useTwemoji, useTwemoji,
useWsRequest, useWsRequest,
@ -25,21 +27,33 @@ const Proxies = lazy(() => import('~/pages/Proxies'))
const Rules = lazy(() => import('~/pages/Rules')) const Rules = lazy(() => import('~/pages/Rules'))
const Config = lazy(() => import('~/pages/Config')) const Config = lazy(() => import('~/pages/Config'))
const ProtectedResources = () => {
const { fetchProxies } = useProxies()
onMount(fetchProxies)
const latestConnectionMsg = useWsRequest<WsMsg>('connections')
createEffect(() => {
setLatestConnectionMsg(latestConnectionMsg())
})
return null
}
export const App = () => { export const App = () => {
const navigate = useNavigate() const navigate = useNavigate()
useAutoSwitchTheme() const prefersDark = usePrefersDark()
createEffect(() => { createEffect(() => {
if (selectedEndpoint() && endpoint()) { if (autoSwitchTheme()) {
void useProxies().updateProxies() setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
setAllConnections([])
setLatestConnectionMsg(useWsRequest<WsMsg>('connections'))
} }
}) })
onMount(() => { onMount(() => {
if (!selectedEndpoint()) { if (!endpoint()) {
navigate(ROUTES.Setup) navigate(ROUTES.Setup)
} }
}) })
@ -56,7 +70,7 @@ export const App = () => {
<div class="flex-1 overflow-y-auto p-2 sm:p-4"> <div class="flex-1 overflow-y-auto p-2 sm:p-4">
<Routes> <Routes>
<Show when={selectedEndpoint()}> <Show when={endpoint()}>
<Route path={ROUTES.Overview} component={Overview} /> <Route path={ROUTES.Overview} component={Overview} />
<Route path={ROUTES.Proxies} component={Proxies} /> <Route path={ROUTES.Proxies} component={Proxies} />
<Route path={ROUTES.Rules} component={Rules} /> <Route path={ROUTES.Rules} component={Rules} />
@ -66,11 +80,12 @@ export const App = () => {
<Route path="*" element={<Navigate href={ROUTES.Overview} />} /> <Route path="*" element={<Navigate href={ROUTES.Overview} />} />
</Show> </Show>
<Route <Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
path={selectedEndpoint() ? ROUTES.Setup : '*'}
component={Setup}
/>
</Routes> </Routes>
<Show when={endpoint()}>
<ProtectedResources />
</Show>
</div> </div>
<Toaster position="bottom-center" /> <Toaster position="bottom-center" />

View File

@ -1,6 +1,5 @@
import { usePrefersDark } from '@solid-primitives/media'
import { makePersisted } from '@solid-primitives/storage' import { makePersisted } from '@solid-primitives/storage'
import { createEffect, createSignal } from 'solid-js' import { createSignal } from 'solid-js'
import { import {
CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER, CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY, CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
@ -11,7 +10,6 @@ import {
PROXIES_PREVIEW_TYPE, PROXIES_PREVIEW_TYPE,
TAILWINDCSS_SIZE, TAILWINDCSS_SIZE,
} from '~/constants' } from '~/constants'
import { setCurTheme } from '~/signals'
import { import {
ConnectionsTableColumnOrder, ConnectionsTableColumnOrder,
ConnectionsTableColumnVisibility, ConnectionsTableColumnVisibility,
@ -134,13 +132,3 @@ export const isLatencyTestByHttps = () =>
export const latencyQualityMap = () => export const latencyQualityMap = () =>
isLatencyTestByHttps() ? LATENCY_QUALITY_MAP_HTTPS : LATENCY_QUALITY_MAP_HTTP isLatencyTestByHttps() ? LATENCY_QUALITY_MAP_HTTPS : LATENCY_QUALITY_MAP_HTTP
export const useAutoSwitchTheme = () => {
const prefersDark = usePrefersDark()
createEffect(() => {
if (autoSwitchTheme()) {
setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
}
})
}

View File

@ -1,5 +1,5 @@
import { differenceWith, isNumber, unionWith } from 'lodash' import { differenceWith, isNumber, unionWith } from 'lodash'
import { Accessor, createEffect, createSignal, untrack } from 'solid-js' import { createEffect, createSignal, untrack } from 'solid-js'
import { CONNECTIONS_TABLE_MAX_CLOSED_ROWS } from '~/constants' import { CONNECTIONS_TABLE_MAX_CLOSED_ROWS } from '~/constants'
import { Connection, ConnectionRawMessage } from '~/types' import { Connection, ConnectionRawMessage } from '~/types'
@ -15,16 +15,8 @@ export type WsMsg = {
export const [allConnections, setAllConnections] = createSignal<Connection[]>( export const [allConnections, setAllConnections] = createSignal<Connection[]>(
[], [],
) )
export const [latestConnectionMsg, setLatestConnectionMsg] =
export let latestConnectionMsg: Accessor<WsMsg> = () => ({ createSignal<WsMsg>(null)
uploadTotal: 0,
downloadTotal: 0,
connections: [],
})
export const setLatestConnectionMsg = (accessor: Accessor<WsMsg>) => {
latestConnectionMsg = accessor
}
export const useConnections = () => { export const useConnections = () => {
const [closedConnections, setClosedConnections] = createSignal<Connection[]>( const [closedConnections, setClosedConnections] = createSignal<Connection[]>(

View File

@ -60,7 +60,7 @@ const setProxiesInfo = (proxies: (Proxy | ProxyNode)[]) => {
} }
export const useProxies = () => { export const useProxies = () => {
const updateProxies = async () => { const fetchProxies = async () => {
const [{ providers }, { proxies }] = await Promise.all([ const [{ providers }, { proxies }] = await Promise.all([
fetchProxyProvidersAPI(), fetchProxyProvidersAPI(),
fetchProxiesAPI(), fetchProxiesAPI(),
@ -91,7 +91,7 @@ export const useProxies = () => {
const selectProxyInGroup = async (proxy: Proxy, proxyName: string) => { const selectProxyInGroup = async (proxy: Proxy, proxyName: string) => {
await selectProxyInGroupAPI(proxy.name, proxyName) await selectProxyInGroupAPI(proxy.name, proxyName)
await updateProxies() await fetchProxies()
if (autoCloseConns()) { if (autoCloseConns()) {
// we don't use activeConns from useConnection here for better performance, // we don't use activeConns from useConnection here for better performance,
@ -130,19 +130,19 @@ export const useProxies = () => {
try { try {
await updateProxyProviderAPI(providerName) await updateProxyProviderAPI(providerName)
} catch {} } catch {}
await updateProxies() await fetchProxies()
} }
const updateAllProvider = async () => { const updateAllProvider = async () => {
await Promise.allSettled( await Promise.allSettled(
proxyProviders().map((provider) => updateProxyProviderAPI(provider.name)), proxyProviders().map((provider) => updateProxyProviderAPI(provider.name)),
) )
await updateProxies() await fetchProxies()
} }
const healthCheckByProviderName = async (providerName: string) => { const healthCheckByProviderName = async (providerName: string) => {
await proxyProviderHealthCheck(providerName) await proxyProviderHealthCheck(providerName)
await updateProxies() await fetchProxies()
} }
return { return {
@ -151,7 +151,7 @@ export const useProxies = () => {
latencyTestByProxyGroupName, latencyTestByProxyGroupName,
latencyMap, latencyMap,
proxyNodeMap, proxyNodeMap,
updateProxies, fetchProxies,
selectProxyInGroup, selectProxyInGroup,
updateProviderByProviderName, updateProviderByProviderName,
updateAllProvider, updateAllProvider,