debug: Add debug logs to collab con

Excali-Studio · Nov 13, 2024 · d4a6d1c · d4a6d1c
1 parent b752803
commit d4a6d1c
Showing 1 changed file with 75 additions and 61 deletions.
diff --git a/src/hooks/useCollabSocket.ts b/src/hooks/useCollabSocket.ts
@@ -36,65 +36,6 @@ export function useCollabSocket(
 		new Map()
 	);
 
-	useEffect(() => {
-		if (!socket && excalidrawApi) {
-			function onInitRoom() {
-				if (socket) socket.emit('join-room', roomId);
-			}
-
-			function onClientBroadcast(encryptedData: ArrayBuffer) {
-				const rawDecodedData = new TextDecoder('utf-8').decode(
-					new Uint8Array(encryptedData)
-				);
-				const decodedData: SocketUpdateData = JSON.parse(rawDecodedData);
-
-				switch (decodedData.type) {
-					case WS_SUBTYPES.MOUSE_LOCATION: {
-						const { pointer, button, username, selectedElementIds } =
-							decodedData.payload;
-
-						const socketId: SocketUpdateDataSource['MOUSE_LOCATION']['payload']['socketId'] =
-							decodedData.payload.socketId;
-
-						updateCollaborator(socketId, {
-							pointer,
-							button,
-							selectedElementIds,
-							username,
-						});
-
-						break;
-					}
-					case WS_SUBTYPES.UPDATE: {
-						reconcileAndUpdateCanvas(decodedData.payload.elements);
-						break;
-					}
-					default: {
-						console.log(`UNHANDLED EVENT: ${decodedData.type}`);
-					}
-				}
-			}
-
-			const socket = socketIOClient(import.meta.env.VITE_APP_WS_SERVER_URL, {
-				transports: ['websocket', 'polling'],
-			});
-
-			setSocket(socket);
-
-			if (socket && excalidrawApi) {
-				socket.on('init-room', onInitRoom);
-				socket.on('client-broadcast', onClientBroadcast);
-			}
-
-			return () => {
-				socket?.close();
-				setSocket(undefined);
-				socket?.off('init-room', onInitRoom);
-				socket?.off('client-broadcast', onClientBroadcast);
-			};
-		}
-	}, [excalidrawApi]);
-
 	const broadcastSocketData = useCallback(
 		(data: SocketUpdateData, volatile: boolean = false) => {
 			if (socket && roomId) {
@@ -181,10 +122,14 @@ export function useCollabSocket(
 					true // volatile
 				);
 			} else {
-				console.error('Failed attempt to broadcast mouse location');
+				console.error('Failed attempt to broadcast mouse location', {
+					socket,
+					excalidrawApi,
+					socketId: socket?.id,
+				});
 			}
 		},
-		[broadcastSocketData, excalidrawApi, socket?.id, user?.displayName]
+		[broadcastSocketData, excalidrawApi, socket, user?.displayName]
 	);
 
 	const broadcastCanvas = useCallback(
@@ -216,5 +161,74 @@ export function useCollabSocket(
 		[broadcastSocketData, syncElementVersions]
 	);
 
+	useEffect(() => {
+		if (!socket && excalidrawApi) {
+			function onInitRoom() {
+				if (socket) socket.emit('join-room', roomId);
+			}
+
+			function onClientBroadcast(encryptedData: ArrayBuffer) {
+				const rawDecodedData = new TextDecoder('utf-8').decode(
+					new Uint8Array(encryptedData)
+				);
+				const decodedData: SocketUpdateData = JSON.parse(rawDecodedData);
+
+				switch (decodedData.type) {
+					case WS_SUBTYPES.MOUSE_LOCATION: {
+						const { pointer, button, username, selectedElementIds } =
+							decodedData.payload;
+
+						const socketId: SocketUpdateDataSource['MOUSE_LOCATION']['payload']['socketId'] =
+							decodedData.payload.socketId;
+
+						updateCollaborator(socketId, {
+							pointer,
+							button,
+							selectedElementIds,
+							username,
+						});
+
+						break;
+					}
+					case WS_SUBTYPES.UPDATE: {
+						reconcileAndUpdateCanvas(decodedData.payload.elements);
+						break;
+					}
+					default: {
+						console.log(`UNHANDLED EVENT: ${decodedData.type}`);
+					}
+				}
+			}
+
+			console.log('env ws url: ', import.meta.env.VITE_APP_WS_SERVER_URL);
+
+			const socket = socketIOClient(import.meta.env.VITE_APP_WS_SERVER_URL, {
+				transports: ['websocket', 'polling'],
+			});
+
+			console.log({ socket });
+
+			setSocket(socket);
+
+			if (socket && excalidrawApi) {
+				socket.on('init-room', onInitRoom);
+				socket.on('client-broadcast', onClientBroadcast);
+			}
+
+			return () => {
+				socket?.close();
+				setSocket(undefined);
+				socket?.off('init-room', onInitRoom);
+				socket?.off('client-broadcast', onClientBroadcast);
+			};
+		}
+	}, [
+		excalidrawApi,
+		reconcileAndUpdateCanvas,
+		roomId,
+		socket,
+		updateCollaborator,
+	]);
+
 	return { socket, broadcastMouseLocation, broadcastCanvas };
 }