File size: 2,898 Bytes
d8bad25 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import { useState, useEffect, useRef, useCallback } from 'react';
export const useWebSocket = (url) => {
const [data, setData] = useState(null);
const [connected, setConnected] = useState(false);
const ws = useRef(null);
const reconnectTimer = useRef(null);
const mountedRef = useRef(true);
const reconnectDelay = useRef(1000);
const connect = useCallback(() => {
if (!mountedRef.current) return;
// Clean up any existing connection
if (ws.current) {
ws.current.onopen = null;
ws.current.onclose = null;
ws.current.onmessage = null;
ws.current.onerror = null;
if (ws.current.readyState === WebSocket.OPEN || ws.current.readyState === WebSocket.CONNECTING) {
ws.current.close();
}
}
console.log('[WS] Connecting to', url);
ws.current = new WebSocket(url);
ws.current.onopen = () => {
if (!mountedRef.current) return;
console.log('[WS] Connected');
setConnected(true);
reconnectDelay.current = 1000; // Reset backoff on success
};
ws.current.onclose = (event) => {
if (!mountedRef.current) return;
console.log('[WS] Disconnected, code:', event.code);
setConnected(false);
// Auto-reconnect with exponential backoff
const delay = reconnectDelay.current;
reconnectDelay.current = Math.min(delay * 2, 10000);
console.log(`[WS] Reconnecting in ${delay}ms...`);
reconnectTimer.current = setTimeout(() => {
if (mountedRef.current) connect();
}, delay);
};
ws.current.onmessage = (event) => {
try {
const message = JSON.parse(event.data);
setData(message);
} catch (err) {
console.error('[WS] Parse Error', err);
}
};
ws.current.onerror = (err) => {
console.error('[WS] Error', err);
};
}, [url]);
useEffect(() => {
mountedRef.current = true;
connect();
return () => {
mountedRef.current = false;
clearTimeout(reconnectTimer.current);
if (ws.current) {
ws.current.onopen = null;
ws.current.onclose = null;
ws.current.onmessage = null;
ws.current.onerror = null;
ws.current.close();
}
};
}, [connect]);
const sendMessage = useCallback((msg) => {
if (ws.current && ws.current.readyState === WebSocket.OPEN) {
ws.current.send(JSON.stringify(msg));
}
}, []);
return { connected, data, sendMessage };
};
|