mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 17:25:34 +08:00
refactor: hoist the websocket connection of connections
to global App level
This commit is contained in:
parent
cb53c920d0
commit
4cc5eeb01f
43
src/App.tsx
43
src/App.tsx
@ -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" />
|
||||||
|
@ -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())
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
@ -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[]>(
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user