fix: use baseUrl for Socket.IO connection to support separate frontend hosting

Previously, useTerminalSocket used a relative path `/terminal` for Socket.IO,
which would connect to the frontend host instead of the actual HAPI server.
Now it uses the baseUrl from context to connect to the correct server, enabling
scenarios like hosting the frontend on GitHub Pages while the server runs elsewhere.
This commit is contained in:
weishu
2026-01-14 11:27:35 +08:00
parent 584a912311
commit 7003bda706
4 changed files with 10 additions and 5 deletions
+1 -1
View File
@@ -313,7 +313,7 @@ function AppInner() {
}
return (
<AppContextProvider value={{ api, token }}>
<AppContextProvider value={{ api, token, baseUrl }}>
<SyncingBanner isSyncing={isSyncing} />
<OfflineBanner />
<div className="h-full flex flex-col">
+5 -2
View File
@@ -8,6 +8,7 @@ type TerminalConnectionState =
| { status: 'error'; error: string }
type UseTerminalSocketOptions = {
baseUrl: string
token: string
sessionId: string
terminalId: string
@@ -49,12 +50,14 @@ export function useTerminalSocket(options: UseTerminalSocketOptions): {
const sessionIdRef = useRef(options.sessionId)
const terminalIdRef = useRef(options.terminalId)
const tokenRef = useRef(options.token)
const baseUrlRef = useRef(options.baseUrl)
const lastSizeRef = useRef<{ cols: number; rows: number } | null>(null)
useEffect(() => {
sessionIdRef.current = options.sessionId
terminalIdRef.current = options.terminalId
}, [options.sessionId, options.terminalId])
baseUrlRef.current = options.baseUrl
}, [options.sessionId, options.terminalId, options.baseUrl])
useEffect(() => {
tokenRef.current = options.token
@@ -113,7 +116,7 @@ export function useTerminalSocket(options: UseTerminalSocketOptions): {
return
}
const socket = io('/terminal', {
const socket = io(`${baseUrlRef.current}/terminal`, {
auth: { token },
path: '/socket.io/',
reconnection: true,
+1
View File
@@ -4,6 +4,7 @@ import type { ApiClient } from '@/api/client'
type AppContextValue = {
api: ApiClient
token: string
baseUrl: string
}
const AppContext = createContext<AppContextValue | null>(null)
+3 -2
View File
@@ -51,7 +51,7 @@ const QUICK_INPUTS = [
export default function TerminalPage() {
const { sessionId } = useParams({ from: '/sessions/$sessionId/terminal' })
const { api, token } = useAppContext()
const { api, token, baseUrl } = useAppContext()
const goBack = useAppGoBack()
const { session } = useSession(api, sessionId)
const terminalId = useMemo(() => {
@@ -77,7 +77,8 @@ export default function TerminalPage() {
} = useTerminalSocket({
token,
sessionId,
terminalId
terminalId,
baseUrl
})
useEffect(() => {