brackt/app/hooks/useDraftSocket.ts

62 lines
1.7 KiB
TypeScript
Raw Normal View History

import { useEffect, useRef, useState } from "react";
import { io, Socket } from "socket.io-client";
interface UseDraftSocketReturn {
socket: Socket | null;
isConnected: 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);
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);
// Join the draft room with optional teamId
socket.emit("join-draft", seasonId, teamId);
});
socket.on("disconnect", () => {
console.log("Disconnected from Socket.IO");
setIsConnected(false);
});
socket.on("connect_error", (error) => {
console.error("Socket.IO connection error:", error);
});
// 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, on, off };
}