import { useState, useEffect, useRef } from 'react'; export function useWebSocket() { const [ws, setWs] = useState(null); const [messages, setMessages] = useState([]); const [isConnected, setIsConnected] = useState(false); const reconnectTimeoutRef = useRef(null); useEffect(() => { connect(); return () => { if (reconnectTimeoutRef.current) { clearTimeout(reconnectTimeoutRef.current); } if (ws) { ws.close(); } }; }, []); // Keep dependency array but add proper cleanup const connect = async () => { try { const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true'; // Construct WebSocket URL let wsUrl; if (isPlatform) { // Platform mode: Use same domain as the page (goes through proxy) const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; wsUrl = `${protocol}//${window.location.host}/ws`; } else { // OSS mode: Connect to same host:port that served the page const token = localStorage.getItem('auth-token'); if (!token) { console.warn('No authentication token found for WebSocket connection'); return; } const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; wsUrl = `${protocol}//${window.location.host}/ws?token=${encodeURIComponent(token)}`; } const websocket = new WebSocket(wsUrl); websocket.onopen = () => { setIsConnected(true); setWs(websocket); }; websocket.onmessage = (event) => { try { const data = JSON.parse(event.data); setMessages(prev => [...prev, data]); } catch (error) { console.error('Error parsing WebSocket message:', error); } }; websocket.onclose = () => { setIsConnected(false); setWs(null); // Attempt to reconnect after 3 seconds reconnectTimeoutRef.current = setTimeout(() => { connect(); }, 3000); }; websocket.onerror = (error) => { console.error('WebSocket error:', error); }; } catch (error) { console.error('Error creating WebSocket connection:', error); } }; const sendMessage = (message) => { if (ws && isConnected) { ws.send(JSON.stringify(message)); } else { console.warn('WebSocket not connected'); } }; return { ws, sendMessage, messages, isConnected }; }