Add socket service

client/src/services/socket.ts

@@ -0,0 +1,118 @@
+import type { WSMessage } from 'shared/types.ts'
+
+let ws: WebSocket | null = null
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+let intentionalClose = false
+const pendingQueue: string[] = []
+
+const WS_URL = import.meta.env.VITE_WS_URL || (
+  window.location.protocol === 'https:'
+    ? `wss://server.caro5.test/ws`
+    : `ws://localhost:8888`
+)
+
+type MessageHandler = (msg: WSMessage) => void
+type ConnectionHandler = (status: 'connecting' | 'connected' | 'disconnected') => void
+const handlers = new Set<MessageHandler>()
+const reconnectHandlers = new Set<() => void>()
+const connectionHandlers = new Set<ConnectionHandler>()
+let connectionStatus: 'connecting' | 'connected' | 'disconnected' = 'disconnected'
+
+function ensureConnected(): void {
+  if (!intentionalClose) {
+    connect()
+  }
+}
+
+function flushQueue(): void {
+  while (pendingQueue.length && ws?.readyState === WebSocket.OPEN) {
+    ws.send(pendingQueue.shift()!)
+  }
+}
+
+function notifyConnection(): void {
+  connectionHandlers.forEach((fn) => fn(connectionStatus))
+}
+
+function connect(): void {
+  if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return
+
+  intentionalClose = false
+  connectionStatus = 'connecting'
+  notifyConnection()
+  ws = new WebSocket(WS_URL)
+
+  ws.onopen = () => {
+    console.log('[socket] connected')
+    connectionStatus = 'connected'
+    notifyConnection()
+    flushQueue()
+    reconnectHandlers.forEach((fn) => fn())
+  }
+
+  ws.onmessage = (event: MessageEvent) => {
+    try {
+      const msg = JSON.parse(event.data) as WSMessage
+      handlers.forEach((fn) => fn(msg))
+    } catch {
+      console.warn('[socket] failed to parse message')
+    }
+  }
+
+  ws.onclose = () => {
+    connectionStatus = 'disconnected'
+    notifyConnection()
+    ws = null
+    if (!intentionalClose) {
+      reconnectTimer = setTimeout(connect, 2000)
+    }
+  }
+
+  ws.onerror = () => {
+    ws?.close()
+  }
+}
+
+export function disconnect(): void {
+  intentionalClose = true
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+  handlers.clear()
+  pendingQueue.length = 0
+  ws?.close()
+  ws = null
+}
+
+export function sendMessage(type: string, payload: unknown = {}): void {
+  const data = JSON.stringify({ type, payload })
+  if (ws?.readyState === WebSocket.OPEN) {
+    ws.send(data)
+  } else {
+    ensureConnected()
+    pendingQueue.push(data)
+  }
+}
+
+export function onMessage(fn: MessageHandler): () => void {
+  handlers.add(fn)
+  ensureConnected()
+  return () => handlers.delete(fn)
+}
+
+export function onReconnect(fn: () => void): () => void {
+  reconnectHandlers.add(fn)
+  ensureConnected()
+  return () => reconnectHandlers.delete(fn)
+}
+
+export function onConnectionChange(fn: ConnectionHandler): () => void {
+  connectionHandlers.add(fn)
+  ensureConnected()
+  return () => connectionHandlers.delete(fn)
+}
+
+export function getConnectionStatus(): 'connecting' | 'connected' | 'disconnected' {
+  return connectionStatus
+}