Blame · use-collab-socket.ts

web/app/collab/hooks/use-collab-socket.tsblame

0b4b582	1	"use client";
0b4b582	2
0b4b582	3	import { useEffect, useRef, useState, useCallback } from "react";
0b4b582	4	import { io, type Socket } from "socket.io-client";
0b4b582	5	import { useAuth } from "@/lib/auth";
0b4b582	6
0b4b582	7	export interface CollabUser {
0b4b582	8	id: string;
0b4b582	9	name: string;
0b4b582	10	color: string;
0b4b582	11	cursor: { x: number; y: number } \| null;
0b4b582	12	activeTab: string \| null;
0b4b582	13	}
0b4b582	14
0b4b582	15	export interface CollabNote {
0b4b582	16	id: string;
0b4b582	17	diagramId: string;
0b4b582	18	diagramTitle?: string;
0b4b582	19	author: string;
0b4b582	20	text: string;
0b4b582	21	x?: number;
0b4b582	22	y?: number;
0b4b582	23	targetNode?: string \| null;
0b4b582	24	timestamp: string;
0b4b582	25	editedAt?: string;
0b4b582	26	}
0b4b582	27
0b4b582	28	interface UseCollabSocketOptions {
0b4b582	29	owner: string;
0b4b582	30	repo: string;
0b4b582	31	enabled?: boolean;
0b4b582	32	}
0b4b582	33
0b4b582	34	export function useCollabSocket({ owner, repo, enabled = true }: UseCollabSocketOptions) {
0b4b582	35	const { token } = useAuth();
0b4b582	36	const socketRef = useRef<Socket \| null>(null);
0b4b582	37	const [connected, setConnected] = useState(false);
0b4b582	38	const [users, setUsers] = useState<Record<string, CollabUser>>({});
0b4b582	39	const [notes, setNotes] = useState<Record<string, CollabNote[]>>({});
0b4b582	40
0b4b582	41	// Event callbacks — set by consumers
0b4b582	42	const onCursorUpdatedRef = useRef<((data: any) => void) \| null>(null);
0b4b582	43	const onCursorRemovedRef = useRef<((data: any) => void) \| null>(null);
0b4b582	44	const onDiagramCodeRef = useRef<((data: any) => void) \| null>(null);
0b4b582	45	const onYjsSyncRef = useRef<((data: any) => void) \| null>(null);
0b4b582	46	const onYjsUpdateRef = useRef<((data: any) => void) \| null>(null);
0b4b582	47
0b4b582	48	useEffect(() => {
0b4b582	49	if (!enabled \|\| !token \|\| !owner \|\| !repo) return;
0b4b582	50
0b4b582	51	// Socket.IO server runs as a co-located process. In production,
0b4b582	52	// Caddy routes /socket.io/* to the socket port on the same origin.
0b4b582	53	// In dev, use NEXT_PUBLIC_COLLAB_SOCKET_URL (e.g. http://localhost:3334).
0b4b582	54	const collabUrl =
0b4b582	55	process.env.NEXT_PUBLIC_COLLAB_SOCKET_URL \|\| window.location.origin;
0b4b582	56
0b4b582	57	const socket = io(`${collabUrl}/collab`, {
0b4b582	58	auth: { token },
0b4b582	59	transports: ["polling", "websocket"],
0b4b582	60	});
0b4b582	61
0b4b582	62	socketRef.current = socket;
0b4b582	63
0b4b582	64	socket.on("connect", () => {
0b4b582	65	setConnected(true);
0b4b582	66	socket.emit("join-room", { owner, repo });
0b4b582	67	});
0b4b582	68
0b4b582	69	socket.on("disconnect", () => setConnected(false));
0b4b582	70
0b4b582	71	socket.on("room-state", (data: { notes: Record<string, CollabNote[]>; users: Record<string, CollabUser> }) => {
0b4b582	72	setNotes(data.notes);
0b4b582	73	setUsers(data.users);
0b4b582	74	});
0b4b582	75
0b4b582	76	socket.on("users-updated", (data: Record<string, CollabUser>) => {
0b4b582	77	setUsers(data);
0b4b582	78	});
0b4b582	79
0b4b582	80	socket.on("note-added", (note: CollabNote) => {
0b4b582	81	setNotes((prev) => ({
0b4b582	82	...prev,
0b4b582	83	[note.diagramId]: [...(prev[note.diagramId] ?? []), note],
0b4b582	84	}));
0b4b582	85	});
0b4b582	86
0b4b582	87	socket.on("note-edited", ({ noteId, diagramId, text, editedAt }: { noteId: string; diagramId: string; text: string; editedAt: string }) => {
0b4b582	88	setNotes((prev) => ({
0b4b582	89	...prev,
0b4b582	90	[diagramId]: (prev[diagramId] ?? []).map((n) =>
0b4b582	91	n.id === noteId ? { ...n, text, editedAt } : n
0b4b582	92	),
0b4b582	93	}));
0b4b582	94	});
0b4b582	95
0b4b582	96	socket.on("note-deleted", ({ noteId, diagramId }: { noteId: string; diagramId: string }) => {
0b4b582	97	setNotes((prev) => ({
0b4b582	98	...prev,
0b4b582	99	[diagramId]: (prev[diagramId] ?? []).filter((n) => n.id !== noteId),
0b4b582	100	}));
0b4b582	101	});
0b4b582	102
0b4b582	103	socket.on("cursor-updated", (data: any) => onCursorUpdatedRef.current?.(data));
0b4b582	104	socket.on("cursor-removed", (data: any) => onCursorRemovedRef.current?.(data));
0b4b582	105	socket.on("diagram-code", (data: any) => onDiagramCodeRef.current?.(data));
0b4b582	106	socket.on("yjs-sync", (data: any) => onYjsSyncRef.current?.(data));
0b4b582	107	socket.on("yjs-update", (data: any) => onYjsUpdateRef.current?.(data));
0b4b582	108
0b4b582	109	return () => {
0b4b582	110	socket.disconnect();
0b4b582	111	socketRef.current = null;
0b4b582	112	setConnected(false);
0b4b582	113	};
0b4b582	114	}, [enabled, token, owner, repo]);
0b4b582	115
0b4b582	116	const emit = useCallback((event: string, data?: any) => {
0b4b582	117	socketRef.current?.emit(event, data);
0b4b582	118	}, []);
0b4b582	119
0b4b582	120	return {
0b4b582	121	socket: socketRef,
0b4b582	122	connected,
0b4b582	123	users,
0b4b582	124	notes,
0b4b582	125	emit,
0b4b582	126	onCursorUpdated: onCursorUpdatedRef,
0b4b582	127	onCursorRemoved: onCursorRemovedRef,
0b4b582	128	onDiagramCode: onDiagramCodeRef,
0b4b582	129	onYjsSync: onYjsSyncRef,
0b4b582	130	onYjsUpdate: onYjsUpdateRef,
0b4b582	131	};
0b4b582	132	}