feat: storing shapes data in memory to send it to new user joining

Author: coderomm

apps/collabydraw/.env.example

@@ -1,4 +1,4 @@
 DATABASE_URL='postgresql://postgres:your_secure_password@localhost:5432/CollabyDraw'
-NEXTAUTH_URL="http://localhost:3000"
-WS_URL="ws://localhost:8080"
+NEXT_PUBLIC_BASE_URL="http://localhost:3000"
+NEXT_PUBLIC_WS_URL="ws://localhost:8080"
 JWT_SECRET=your_secret_here

apps/collabydraw/canvas-engine/CanvasEngine.ts

@@ -150,6 +150,17 @@ export class CanvasEngine {
   }
 
   private connectWebSocket() {
+    if (
+      this.socket &&
+      (this.socket.readyState === WebSocket.CONNECTING ||
+        this.socket.readyState === WebSocket.OPEN)
+    ) {
+      console.log("Connection already exists, not creating a new one");
+      return;
+    }
+
+    console.log(`Connecting to WebSocket with sessionId: ${this.token}`);
+
     const url = `${WS_URL}?token=${encodeURIComponent(this.token!)}`;
     this.socket = new WebSocket(url);
 
@@ -188,6 +199,30 @@ export class CanvasEngine {
             }
             break;
 
+          case WsDataType.EXISTING_SHAPES:
+            if (Array.isArray(data.message) && data.message.length > 0) {
+              const decryptedShapes = await Promise.all(
+                data.message.map(async (shape) => {
+                  if (shape.message) {
+                    const decrypted = await decryptData(
+                      shape.message,
+                      this.encryptionKey!
+                    );
+                    return JSON.parse(decrypted);
+                  }
+                  return null;
+                })
+              );
+              console.log("decryptedShapes = ", decryptedShapes);
+
+              const validShapes = decryptedShapes.filter((s) => s !== null);
+              if (validShapes.length > 0) {
+                this.updateShapes(validShapes);
+                this.notifyShapeCountChange();
+              }
+            }
+            break;
+
           case WsDataType.DRAW:
           case WsDataType.UPDATE:
             if (data.userId !== this.userId && data.message) {
@@ -197,6 +232,7 @@ export class CanvasEngine {
               );
               const shape = JSON.parse(decrypted);
               this.updateShapes([shape]);
+              this.notifyShapeCountChange();
             }
             break;
 
@@ -215,7 +251,7 @@ export class CanvasEngine {
       this.isConnected = false;
       this.onConnectionChange?.(false);
       console.warn("WebSocket closed:", e);
-      setTimeout(() => this.connectWebSocket(), 1000);
+      setTimeout(() => this.connectWebSocket(), 2000);
     };
 
     this.socket.onerror = (err) => {
@@ -1383,7 +1419,8 @@ export class CanvasEngine {
       );
 
       if (rounded === "round") {
-        const r = Math.min(normalizedWidth, normalizedHeight) * ROUND_RADIUS_FACTOR;
+        const r =
+          Math.min(normalizedWidth, normalizedHeight) * ROUND_RADIUS_FACTOR;
 
         this.roughCanvas.path(
           `M ${posX + r} ${posY} 

apps/collabydraw/utils/index.ts

@@ -0,0 +1,14 @@
+import { v4 as uuidv4 } from "uuid";
+
+export const getOrCreateSessionId = (): string => {
+  const key = "__collab_session_id";
+  if (typeof window === "undefined") {
+    return uuidv4();
+  }
+  let sessionId = sessionStorage.getItem(key);
+  if (!sessionId) {
+    sessionId = uuidv4();
+    sessionStorage.setItem(key, sessionId);
+  }
+  return sessionId;
+};