37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { createContext, useContext, useEffect, useRef, type ReactNode } from 'react';
|
|
import { io, type Socket } from 'socket.io-client';
|
|
|
|
const SocketContext = createContext<Socket | null>(null);
|
|
|
|
// 같은 네트워크 팀원도 접속 가능: 백엔드 주소를 현재 페이지 호스트에서 자동 감지
|
|
const SOCKET_URL =
|
|
import.meta.env.VITE_SOCKET_URL ||
|
|
`${window.location.protocol}//${window.location.hostname}:4000`;
|
|
|
|
export function SocketProvider({ children }: { children: ReactNode }) {
|
|
const socketRef = useRef<Socket | null>(null);
|
|
|
|
useEffect(() => {
|
|
const socket = io(SOCKET_URL, { transports: ['websocket'] });
|
|
socketRef.current = socket;
|
|
|
|
socket.on('connect', () => console.log('[Socket] Connected'));
|
|
socket.on('disconnect', () => console.log('[Socket] Disconnected'));
|
|
|
|
return () => {
|
|
socket.disconnect();
|
|
socketRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<SocketContext.Provider value={socketRef.current}>
|
|
{children}
|
|
</SocketContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useSocket(): Socket | null {
|
|
return useContext(SocketContext);
|
|
}
|