Initial commit

frontend/src/hooks/useWebSocket.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState, useCallback } from 'react'
+import { config } from '../config'
+
+interface WebSocketMessage {
+    type: string
+    data: unknown
+}
+
+export const useWebSocket = (clientId: string) => {
+    const [socket, setSocket] = useState<WebSocket | null>(null)
+    const [messages, setMessages] = useState<WebSocketMessage[]>([])
+    const [connected, setConnected] = useState(false)
+
+    useEffect(() => {
+        const ws = new WebSocket(`${config.wsBaseUrl}/ws/${clientId}`)
+
+        ws.onopen = () => {
+            console.log('WebSocket connected')
+            setConnected(true)
+        }
+
+        ws.onmessage = (event) => {
+            try {
+                const message = JSON.parse(event.data) as WebSocketMessage
+                setMessages((prev: WebSocketMessage[]) => [...prev, message])
+            } catch (error) {
+                console.error('Failed to parse WebSocket message:', error)
+            }
+        }
+
+        ws.onerror = (error) => {
+            console.error('WebSocket error:', error)
+        }
+
+        ws.onclose = () => {
+            console.log('WebSocket disconnected')
+            setConnected(false)
+        }
+
+        setSocket(ws)
+
+        return () => {
+            ws.close()
+        }
+    }, [clientId])
+
+    const sendMessage = useCallback((message: string) => {
+        if (socket && connected) {
+            socket.send(message)
+        }
+    }, [socket, connected])
+
+    return { messages, connected, sendMessage }
+}