59 lines
1.1 KiB
TypeScript
59 lines
1.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import {
|
||
|
|
createContext,
|
||
|
|
useContext,
|
||
|
|
useEffect,
|
||
|
|
useState
|
||
|
|
} from "react";
|
||
|
|
import { io as ClientIO } from "socket.io-client";
|
||
|
|
|
||
|
|
type SocketContextType = {
|
||
|
|
socket: any | null;
|
||
|
|
isConnected: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
const SocketContext = createContext<SocketContextType>({
|
||
|
|
socket: null,
|
||
|
|
isConnected: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
export const useSocket = () => {
|
||
|
|
return useContext(SocketContext);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const SocketProvider = ({
|
||
|
|
children
|
||
|
|
}: {
|
||
|
|
children: React.ReactNode
|
||
|
|
}) => {
|
||
|
|
const [socket, setSocket] = useState(null);
|
||
|
|
const [isConnected, setIsConnected] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const socketInstance = new (ClientIO as any)(process.env.NEXT_PUBLIC_SITE_URL!, {
|
||
|
|
path: "/api/socket/io",
|
||
|
|
addTrailingSlash: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
socketInstance.on("connect", () => {
|
||
|
|
setIsConnected(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
socketInstance.on("disconnect", () => {
|
||
|
|
setIsConnected(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
setSocket(socketInstance);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
socketInstance.disconnect();
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SocketContext.Provider value={{ socket, isConnected }}>
|
||
|
|
{children}
|
||
|
|
</SocketContext.Provider>
|
||
|
|
)
|
||
|
|
}
|