fixing(websocket): empty token parameter in WebSocket URL; WS connection issues

Author: coderomm

apps/collabydraw/app/api/auth/signup.ts

@@ -8,8 +8,10 @@ import { RoomSharingDialog } from "./RoomSharingDialog";
 import { usePathname } from "next/navigation";
 import { CollaborationAdDialog } from "./CollaborationAdDialog";
 import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import { RoomParticipants } from "@repo/common/types";
 
-export default function CollaborationStartBtn({ slug, participantsCount }: { slug?: string, participantsCount?: number }) {
+export default function CollaborationStartBtn({ slug, participants }: { slug?: string, participants?: RoomParticipants[] }) {
     const pathname = usePathname();
     const [isOpen, setIsOpen] = useState(false);
     const { data: session } = useSession();
@@ -18,10 +20,32 @@ export default function CollaborationStartBtn({ slug, participantsCount }: { slu
 
     return (
         <div className="Start_Room_Session transition-transform duration-500 ease-in-out flex items-center justify-end">
+            <div className="UserList__wrapper flex w-full justify-end items-center">
+                <div className="UserList p-1 flex flex-wrap justify-end  items-center gap-[.625rem]">
+                    <TooltipProvider delayDuration={0}>
+                        <div className="flex space-x-2">
+                            {participants?.map((participant) => (
+                                <Tooltip key={participant.userId}>
+                                    <TooltipTrigger asChild>
+                                        <div style={{ backgroundColor: getClientColor(participant) }} className={`w-7 h-7 rounded-full flex items-center justify-center cursor-pointer`}>
+                                            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">
+                                                {participant.userName.charAt(0)}
+                                            </span>
+                                        </div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {participant.userName}
+                                    </TooltipContent>
+                                </Tooltip>
+                            ))}
+                        </div>
+                    </TooltipProvider>
+                </div>
+            </div>
             <Button type="button" onClick={() => setIsOpen(true)}
                 className={cn("excalidraw-button collab-button relative w-auto py-3 px-4 rounded-md text-[.875rem] font-semibold shadow-none active:scale-[.98]", roomSlug ? "bg-[#0fb884] dark:bg-[#0fb884] hover:bg-[#0fb884]" : "bg-color-primary hover:bg-brand-hover active:bg-brand-active")}
-                title="Live collaboration...">Share {roomSlug && participantsCount && participantsCount > 0 && (
-                    <div className="CollabButton-collaborators text-[.6rem] text-[#2b8a3e] bg-[#b2f2bb] font-bold font-assistant rounded-[50%] p-1 min-w-4 min-h-4 w-4 h-4 flex items-center justify-center absolute bottom-[-5px] right-[-5px]">{participantsCount}</div>
+                title="Live collaboration...">Share {roomSlug && participants && participants.length > 0 && (
+                    <div className="CollabButton-collaborators text-[.6rem] text-[#2b8a3e] bg-[#b2f2bb] font-bold font-assistant rounded-[50%] p-1 min-w-4 min-h-4 w-4 h-4 flex items-center justify-center absolute bottom-[-5px] right-[-5px]">{participants.length}</div>
                 )}</Button>
 
             {session?.user && session?.user.id ? (
@@ -35,4 +59,26 @@ export default function CollaborationStartBtn({ slug, participantsCount }: { slu
             )}
         </div>
     )
-}
+}
+
+function hashToInteger(id: string) {
+    let hash = 0;
+    if (!id) return hash;
+
+    for (let i = 0; i < id.length; i++) {
+        const char = id.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+    }
+    return hash;
+}
+
+export const getClientColor = (collaborator: { userId: string; userName: string; }) => {
+    if (!collaborator?.userId) return "hsl(0, 0%, 83%)";
+
+    const hash = Math.abs(hashToInteger(collaborator?.userId));
+    const hue = (hash % 36) * 10;
+    const saturation = 90;
+    const lightness = 75;
+
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+};

apps/collabydraw/app/api/createRoom/route.ts

@@ -38,6 +38,8 @@ export function SignUpForm() {
                     return
                 }
 
+                console.log('signUp Result = ', signUpResult);
+
                 const signInResult = await signIn("credentials", {
                     email: values.email,
                     password: values.password,
@@ -48,7 +50,7 @@ export function SignUpForm() {
                     toast.error(signInResult.error);
                     return;
                 }
-
+                console.log('signIn Result = ', signInResult);
                 toast.success("Account created successfully")
                 router.push("/");
             } catch (error) {

apps/collabydraw/app/api/room/create/route.ts

@@ -307,7 +307,7 @@ export function CanvasSheet({ roomName, roomId, userId, userName }: { roomName:
                     onToolSelect={setActiveTool}
                 />
                 {matches && (
-                    <CollaborationStart participantsCount={participants.length} slug={roomName} />
+                    <CollaborationStart participants={participants} slug={roomName} />
                 )}
             </div>
 

apps/collabydraw/app/api/room/join/route.ts

@@ -2,6 +2,10 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { RoomParticipants, WS_DATA_TYPE, WebSocketChatMessage, WebSocketMessage } from '@repo/common/types';
+import { useSession } from 'next-auth/react';
+
+const WS_URL = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:8080';
+const MAX_RECONNECT_ATTEMPTS = 5;
 
 export function useWebSocket(roomId: string, roomName: string, userId: string, userName: string) {
     const [isConnected, setIsConnected] = useState(false);
@@ -10,23 +14,31 @@ export function useWebSocket(roomId: string, roomName: string, userId: string, u
     const socketRef = useRef<WebSocket | null>(null);
     const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
     const reconnectAttemptsRef = useRef(0);
-    const MAX_RECONNECT_ATTEMPTS = 5;
     const paramsRef = useRef({ roomId, roomName, userId, userName });
+    const { data: session, status } = useSession();
 
     useEffect(() => {
         paramsRef.current = { roomId, roomName, userId, userName };
     }, [roomId, roomName, userId, userName]);
 
     const connectWebSocket = useCallback(() => {
-        if (socketRef.current?.readyState === WebSocket.OPEN) {
+        if (status === "loading") {
             return;
         }
         if (socketRef.current?.readyState === WebSocket.OPEN) {
+            return;
+        }
+        if (socketRef.current?.readyState === WebSocket.CONNECTING) {
             socketRef.current.close();
         }
 
         try {
-            const ws = new WebSocket(`ws://localhost:8080`);
+            let wsUrl = WS_URL;
+            if (status === "authenticated" && session?.accessToken) {
+                wsUrl = `${WS_URL}?token=${encodeURIComponent(session.accessToken)}`;
+            }
+
+            const ws = new WebSocket(wsUrl);
 
             const handleOpen = () => {
                 setIsConnected(true);
@@ -120,9 +132,12 @@ export function useWebSocket(roomId: string, roomName: string, userId: string, u
         } catch (error) {
             console.error('Failed to create WebSocket connection:', error);
         }
-    }, []);
+    }, [session, status]);
 
     useEffect(() => {
+        if (status !== "loading") {
+            connectWebSocket();
+        }
         connectWebSocket();
 
         return () => {
@@ -138,7 +153,7 @@ export function useWebSocket(roomId: string, roomName: string, userId: string, u
                 socketRef.current.close(1000, 'Component unmounted');
             }
         };
-    }, [connectWebSocket]);
+    }, [connectWebSocket, status]);
 
     const sendMessage = useCallback((content: string) => {
         if (!content?.trim()) {

apps/collabydraw/app/api/user/route.ts

@@ -62,7 +62,7 @@ export const authOptions: NextAuthOptions = {
       token.accessToken = jwt.sign(
         { id: token.id, email: token.email },
         process.env.NEXTAUTH_SECRET || "",
-        { expiresIn: "3d" }
+        { expiresIn: "7d" }
       );
       return token;
     },