"use client" import { useEffect, useRef, useState } from "react" interface WebSocketMessage { type: string data?: any timestamp?: string } export function useWebSocket(onMessage?: (message: WebSocketMessage) => void) { const [isConnected, setIsConnected] = useState(false) const [lastMessage, setLastMessage] = useState(null) const ws = useRef(null) const reconnectTimeoutRef = useRef() const reconnectAttempts = useRef(0) const maxReconnectAttempts = 5 const connect = () => { try { // Use WSS for your HTTPS domain const wsUrl = "wss://shelter.ruff.co.il/api/websocket" ws.current = new WebSocket(wsUrl) ws.current.onopen = () => { console.log("WebSocket connected to shelter.ruff.co.il") setIsConnected(true) reconnectAttempts.current = 0 // Send ping to keep connection alive const pingInterval = setInterval(() => { if (ws.current?.readyState === WebSocket.OPEN) { ws.current.send(JSON.stringify({ type: "ping" })) } else { clearInterval(pingInterval) } }, 30000) } ws.current.onmessage = (event) => { try { const message: WebSocketMessage = JSON.parse(event.data) setLastMessage(message) if (onMessage) { onMessage(message) } } catch (err) { console.error("Error parsing WebSocket message:", err) } } ws.current.onclose = () => { console.log("WebSocket disconnected") setIsConnected(false) // Attempt to reconnect if (reconnectAttempts.current < maxReconnectAttempts) { reconnectAttempts.current++ const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.current), 30000) console.log(`Attempting to reconnect in ${delay}ms (attempt ${reconnectAttempts.current})`) reconnectTimeoutRef.current = setTimeout(() => { connect() }, delay) } } ws.current.onerror = (error) => { console.error("WebSocket error:", error) } } catch (err) { console.error("Error creating WebSocket connection:", err) } } useEffect(() => { connect() return () => { if (reconnectTimeoutRef.current) { clearTimeout(reconnectTimeoutRef.current) } if (ws.current) { ws.current.close() } } }, []) return { isConnected, lastMessage } }