Withoutbytes · November 27, 2021 11:07 · Nov 27, 2021
diff --git a/useSocketIO.ts b/useSocketIO.ts
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { io, ManagerOptions, Socket, SocketOptions } from "socket.io-client";
+
+export const useSocketIO = (
+	uri?: string | Partial<ManagerOptions & SocketOptions>,
+	opts?: Partial<ManagerOptions & SocketOptions>
+): [Socket] => {
+	const [activeSocket, setActiveSocket] = useState<Socket>(null);
+
+	useEffect(() => {
+		const socket = io(uri, opts);
+
+		const onConnect = () => {
+			setActiveSocket(socket);
+		};
+
+		const onDisconnect = () => {
+			setActiveSocket(null);
+		};
+
+		socket.on("connect", onConnect);
+		socket.on("disconnect", onDisconnect);
+
+		return () => {
+			socket.removeListener("disconnect", onDisconnect);
+			socket.removeListener("connect", onConnect);
+			socket.disconnect();
+		};
+	}, []);
+
+	return [activeSocket];
+};
+
+export function useEventIO<TypeData>(
+	socket: Socket,
+	eventName: string
+): [TypeData, (...args: any[]) => void] {
+	const [lastEvent, setLastEvent] = useState<TypeData>(null);
+
+	const emit = (...args: any[]) => {
+		if (!socket) {
+			throw new Error("Socket is not defined");
+		}
+		socket.emit(eventName, ...args);
+	};
+
+	useEffect(() => {
+		if (!socket) return;
+		socket.on(eventName, setLastEvent);
+		return () => {
+			socket.removeListener(eventName, setLastEvent);
+		};
+	}, [socket]);
+
+	return [lastEvent, emit];
+}