refactor: Use dedicated WebSocket server for torch sync
- Add torch WebSocket server on port 4106 - Remove HTTP polling, use WebSocket for instant sync - Torch state changes broadcast immediately to all clients - Auto-reconnect on disconnect - Add port 4106 to kill-ports script
This commit is contained in:
@@ -50,6 +50,9 @@ export const endpoints = {
|
||||
// WebMCP HTTP API (for token requests)
|
||||
webmcpHttp: buildHttpUrl('/mcp', 4102),
|
||||
|
||||
// Torch WebSocket (multi-browser sync)
|
||||
torch: buildWsUrl('/ws/torch', 4106),
|
||||
|
||||
// API base URL (Vite proxy handles /api in dev)
|
||||
api: '/api'
|
||||
}
|
||||
|
||||
@@ -2,205 +2,145 @@ import { useTorchStore } from '../stores/torch'
|
||||
import { getWebMCP, autoConnect } from './webmcp'
|
||||
import { endpoints } from '../config/endpoints'
|
||||
|
||||
const API_BASE = endpoints.api
|
||||
|
||||
let pollingInterval: number | null = null
|
||||
let torchWs: WebSocket | null = null
|
||||
let clientId: string | null = null
|
||||
let reconnectTimeout: number | null = null
|
||||
|
||||
/**
|
||||
* Register this browser as a torch client
|
||||
* Connect to torch WebSocket server
|
||||
*/
|
||||
export async function registerClient(): Promise<string | null> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/torch/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
function connectToTorchServer(): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (torchWs?.readyState === WebSocket.OPEN) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
console.log('[Torch] Connecting to server...')
|
||||
torchWs = new WebSocket(endpoints.torch)
|
||||
|
||||
torchWs.onopen = () => {
|
||||
console.log('[Torch] Connected to server')
|
||||
// Register this client
|
||||
torchWs?.send(JSON.stringify({
|
||||
type: 'register',
|
||||
userAgent: navigator.userAgent,
|
||||
hostname: window.location.hostname
|
||||
})
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
console.error('[Torch] Failed to register:', res.status)
|
||||
return null
|
||||
}))
|
||||
resolve()
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
clientId = data.id
|
||||
|
||||
const torchStore = useTorchStore()
|
||||
torchStore.setClientId(data.id)
|
||||
|
||||
console.log(`[Torch] Registered as ${data.id}, hasTorch: ${data.hasTorch}`)
|
||||
|
||||
// If we have the torch, connect to MCP
|
||||
if (data.hasTorch) {
|
||||
torchStore.setTorchState(data.id)
|
||||
await connectToMCP()
|
||||
torchWs.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data)
|
||||
handleMessage(data)
|
||||
} catch (e) {
|
||||
console.error('[Torch] Invalid message:', e)
|
||||
}
|
||||
}
|
||||
|
||||
return data.id
|
||||
} catch (e) {
|
||||
console.error('[Torch] Error registering:', e)
|
||||
return null
|
||||
}
|
||||
torchWs.onclose = () => {
|
||||
console.log('[Torch] Disconnected from server')
|
||||
torchWs = null
|
||||
|
||||
// Reconnect after delay
|
||||
if (!reconnectTimeout) {
|
||||
reconnectTimeout = window.setTimeout(() => {
|
||||
reconnectTimeout = null
|
||||
connectToTorchServer()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
torchWs.onerror = (e) => {
|
||||
console.error('[Torch] WebSocket error:', e)
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister this browser
|
||||
* Handle messages from torch server
|
||||
*/
|
||||
export async function unregisterClient(): Promise<void> {
|
||||
if (!clientId) return
|
||||
async function handleMessage(data: any) {
|
||||
const torchStore = useTorchStore()
|
||||
|
||||
try {
|
||||
await fetch(`${API_BASE}/torch/client/${clientId}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
console.log('[Torch] Unregistered')
|
||||
} catch (e) {
|
||||
console.error('[Torch] Error unregistering:', e)
|
||||
switch (data.type) {
|
||||
case 'registered': {
|
||||
clientId = data.id
|
||||
torchStore.setClientId(data.id)
|
||||
console.log(`[Torch] Registered as ${data.id}, hasTorch: ${data.hasTorch}`)
|
||||
|
||||
if (data.hasTorch) {
|
||||
torchStore.setTorchState(data.id)
|
||||
await connectToMCP()
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'torch-update': {
|
||||
const hadTorch = torchStore.hasTorch
|
||||
const hasTorchNow = data.holderId === clientId
|
||||
|
||||
torchStore.setClients(data.clients)
|
||||
torchStore.setTorchState(data.holderId)
|
||||
|
||||
if (hadTorch && !hasTorchNow) {
|
||||
console.log('[Torch] Lost torch, disconnecting from MCP')
|
||||
disconnectFromMCP()
|
||||
} else if (!hadTorch && hasTorchNow) {
|
||||
console.log('[Torch] Got torch, connecting to MCP')
|
||||
await connectToMCP()
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'granted': {
|
||||
console.log('[Torch] Torch granted!')
|
||||
torchStore.setRequesting(false)
|
||||
break
|
||||
}
|
||||
|
||||
case 'released': {
|
||||
console.log('[Torch] Torch released')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
clientId = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Request the torch
|
||||
*/
|
||||
export async function requestTorch(): Promise<boolean> {
|
||||
if (!clientId) {
|
||||
console.error('[Torch] Not registered')
|
||||
if (!torchWs || torchWs.readyState !== WebSocket.OPEN) {
|
||||
console.error('[Torch] Not connected to server')
|
||||
return false
|
||||
}
|
||||
|
||||
const torchStore = useTorchStore()
|
||||
torchStore.setRequesting(true)
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/torch/request`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ clientId })
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
console.error('[Torch] Failed to request:', res.status)
|
||||
torchStore.setRequesting(false)
|
||||
return false
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
console.log('[Torch] Torch granted!')
|
||||
|
||||
// Update state and connect to MCP
|
||||
torchStore.setTorchState(clientId)
|
||||
torchStore.setRequesting(false)
|
||||
await connectToMCP()
|
||||
|
||||
return true
|
||||
} catch (e) {
|
||||
console.error('[Torch] Error requesting:', e)
|
||||
torchStore.setRequesting(false)
|
||||
return false
|
||||
}
|
||||
torchWs.send(JSON.stringify({ type: 'request' }))
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Release the torch
|
||||
*/
|
||||
export async function releaseTorch(): Promise<boolean> {
|
||||
if (!clientId) {
|
||||
console.error('[Torch] Not registered')
|
||||
if (!torchWs || torchWs.readyState !== WebSocket.OPEN) {
|
||||
console.error('[Torch] Not connected to server')
|
||||
return false
|
||||
}
|
||||
|
||||
const torchStore = useTorchStore()
|
||||
|
||||
if (!torchStore.hasTorch) {
|
||||
console.warn('[Torch] Cannot release - do not have torch')
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/torch/release`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ clientId })
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
console.error('[Torch] Failed to release:', res.status)
|
||||
return false
|
||||
}
|
||||
|
||||
console.log('[Torch] Torch released')
|
||||
|
||||
// Update state and disconnect from MCP
|
||||
torchStore.setTorchState(null)
|
||||
disconnectFromMCP()
|
||||
|
||||
return true
|
||||
} catch (e) {
|
||||
console.error('[Torch] Error releasing:', e)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch current torch state from server
|
||||
*/
|
||||
export async function fetchTorchState(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/torch`)
|
||||
if (!res.ok) return
|
||||
|
||||
const data = await res.json()
|
||||
const torchStore = useTorchStore()
|
||||
|
||||
torchStore.setClients(data.clients)
|
||||
|
||||
// Check if torch holder changed
|
||||
const hadTorch = torchStore.hasTorch
|
||||
const hasTorchNow = data.holderId === clientId
|
||||
|
||||
if (hadTorch && !hasTorchNow) {
|
||||
// We lost the torch - disconnect
|
||||
console.log('[Torch] Lost torch, disconnecting from MCP')
|
||||
torchStore.setTorchState(data.holderId)
|
||||
disconnectFromMCP()
|
||||
} else if (!hadTorch && hasTorchNow) {
|
||||
// We got the torch - connect
|
||||
console.log('[Torch] Got torch, connecting to MCP')
|
||||
torchStore.setTorchState(data.holderId)
|
||||
await connectToMCP()
|
||||
} else {
|
||||
torchStore.setTorchState(data.holderId)
|
||||
}
|
||||
} catch (e) {
|
||||
// Silently ignore polling errors
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Start polling for torch state changes
|
||||
*/
|
||||
export function startTorchPolling(intervalMs: number = 2000) {
|
||||
if (pollingInterval) return
|
||||
|
||||
console.log('[Torch] Starting polling...')
|
||||
pollingInterval = window.setInterval(fetchTorchState, intervalMs)
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop polling
|
||||
*/
|
||||
export function stopTorchPolling() {
|
||||
if (pollingInterval) {
|
||||
window.clearInterval(pollingInterval)
|
||||
pollingInterval = null
|
||||
console.log('[Torch] Polling stopped')
|
||||
}
|
||||
torchWs.send(JSON.stringify({ type: 'release' }))
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -244,26 +184,28 @@ function disconnectFromMCP(): void {
|
||||
* Initialize torch system
|
||||
*/
|
||||
export async function initTorch(): Promise<void> {
|
||||
// Register this client
|
||||
await registerClient()
|
||||
|
||||
// Start polling for state changes
|
||||
startTorchPolling()
|
||||
await connectToTorchServer()
|
||||
|
||||
// Cleanup on page unload
|
||||
window.addEventListener('beforeunload', () => {
|
||||
stopTorchPolling()
|
||||
// Note: unregisterClient is async, may not complete before unload
|
||||
// Server should handle stale clients via timeout
|
||||
if (reconnectTimeout) {
|
||||
clearTimeout(reconnectTimeout)
|
||||
}
|
||||
torchWs?.close()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup torch system
|
||||
*/
|
||||
export async function destroyTorch(): Promise<void> {
|
||||
stopTorchPolling()
|
||||
await unregisterClient()
|
||||
export function destroyTorch(): void {
|
||||
if (reconnectTimeout) {
|
||||
clearTimeout(reconnectTimeout)
|
||||
reconnectTimeout = null
|
||||
}
|
||||
torchWs?.close()
|
||||
torchWs = null
|
||||
clientId = null
|
||||
|
||||
const torchStore = useTorchStore()
|
||||
torchStore.reset()
|
||||
|
||||
Reference in New Issue
Block a user