feat: add new socket message when user joins room

src/excalidraw-app/collab/Collab.tsx

@@ -698,6 +698,21 @@ class Collab extends PureComponent<Props, CollabState> {
             });
             break;
           }
+          case "USER_JOINED": {
+            const { username, userId, socketId } = decryptedData.payload;
+            const collaborators = upsertMap(
+              userId,
+              {
+                username,
+                userId,
+                socketId,
+              },
+              this.collaborators,
+            );
+            this.excalidrawAPI.updateScene({
+              collaborators: new Map(collaborators),
+            });
+          }
         }
       },
     );
@@ -766,6 +781,15 @@ class Collab extends PureComponent<Props, CollabState> {
     } else {
       this.portal.socketInitialized = true;
     }
+
+    if (this.portal.socket) {
+      this.portal.brodcastUserJoinedRoom({
+        username: this.state.username,
+        userId: this.state.userId,
+        socketId: this.portal.socket.id,
+      });
+    }
+
     return null;
   };
 

src/excalidraw-app/collab/Portal.tsx

@@ -229,6 +229,23 @@ class Portal {
       );
     }
   };
+
+  brodcastUserJoinedRoom = (payload: {
+    username: string;
+    userId: string;
+    socketId: string;
+  }) => {
+    if (this.socket) {
+      const data: SocketUpdateDataSource["USER_JOINED"] = {
+        type: "USER_JOINED",
+        payload,
+      };
+      return this._broadcastSocketData(
+        data as SocketUpdateData,
+        false, // volatile
+      );
+    }
+  };
 }
 
 export default Portal;

src/excalidraw-app/data/index.ts

@@ -123,6 +123,14 @@ export type SocketUpdateDataSource = {
       socketId: string;
     };
   };
+  USER_JOINED: {
+    type: "USER_JOINED";
+    payload: {
+      username: string;
+      userId: string;
+      socketId: string;
+    };
+  };
 };
 
 export type SocketUpdateDataIncoming =