95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { io, Socket } from "socket.io-client";
|
|
|
|
interface UseDraftSocketReturn {
|
|
socket: Socket | null;
|
|
isConnected: boolean;
|
|
connectionError: string | null;
|
|
isReconnecting: boolean;
|
|
on: (event: string, callback: (...args: any[]) => void) => void;
|
|
off: (event: string, callback?: (...args: any[]) => void) => void;
|
|
}
|
|
|
|
export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocketReturn {
|
|
const socketRef = useRef<Socket | null>(null);
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
const [connectionError, setConnectionError] = useState<string | null>(null);
|
|
const [isReconnecting, setIsReconnecting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Connect to Socket.IO server
|
|
const socket = io({
|
|
path: "/socket.io",
|
|
transports: ["websocket", "polling"],
|
|
});
|
|
|
|
socketRef.current = socket;
|
|
|
|
socket.on("connect", () => {
|
|
console.log("Connected to Socket.IO:", socket.id);
|
|
setIsConnected(true);
|
|
setConnectionError(null);
|
|
setIsReconnecting(false);
|
|
// Join the draft room with optional teamId
|
|
socket.emit("join-draft", seasonId, teamId);
|
|
});
|
|
|
|
socket.on("disconnect", (reason) => {
|
|
console.log("Disconnected from Socket.IO:", reason);
|
|
setIsConnected(false);
|
|
if (reason === "io server disconnect") {
|
|
// Server disconnected the socket, need to manually reconnect
|
|
setConnectionError("Server disconnected. Please refresh the page.");
|
|
} else {
|
|
// Client disconnected or network issue, will auto-reconnect
|
|
setIsReconnecting(true);
|
|
}
|
|
});
|
|
|
|
socket.on("connect_error", (error) => {
|
|
console.error("Socket.IO connection error:", error);
|
|
setConnectionError(error.message || "Failed to connect to draft server");
|
|
setIsReconnecting(false);
|
|
});
|
|
|
|
socket.io.on("reconnect_attempt", () => {
|
|
console.log("Attempting to reconnect...");
|
|
setIsReconnecting(true);
|
|
setConnectionError(null);
|
|
});
|
|
|
|
socket.io.on("reconnect_failed", () => {
|
|
console.error("Reconnection failed");
|
|
setConnectionError("Failed to reconnect. Please refresh the page.");
|
|
setIsReconnecting(false);
|
|
});
|
|
|
|
// Cleanup on unmount
|
|
return () => {
|
|
if (socket) {
|
|
console.log("Leaving draft room:", seasonId);
|
|
socket.emit("leave-draft", seasonId);
|
|
socket.disconnect();
|
|
}
|
|
};
|
|
}, [seasonId, teamId]);
|
|
|
|
// Helper to subscribe to events
|
|
const on = (event: string, callback: (...args: any[]) => void) => {
|
|
socketRef.current?.on(event, callback);
|
|
};
|
|
|
|
// Helper to unsubscribe from events
|
|
const off = (event: string, callback?: (...args: any[]) => void) => {
|
|
socketRef.current?.off(event, callback);
|
|
};
|
|
|
|
return {
|
|
socket: socketRef.current,
|
|
isConnected,
|
|
connectionError,
|
|
isReconnecting,
|
|
on,
|
|
off
|
|
};
|
|
}
|