diff --git a/src/excalidraw-app/collab/Collab.tsx b/src/excalidraw-app/collab/Collab.tsx index 1743b503b..f83eead1f 100644 --- a/src/excalidraw-app/collab/Collab.tsx +++ b/src/excalidraw-app/collab/Collab.tsx @@ -698,6 +698,21 @@ class Collab extends PureComponent { }); 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 { } 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; }; diff --git a/src/excalidraw-app/collab/Portal.tsx b/src/excalidraw-app/collab/Portal.tsx index 1d494d75e..02f7e5fad 100644 --- a/src/excalidraw-app/collab/Portal.tsx +++ b/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; diff --git a/src/excalidraw-app/data/index.ts b/src/excalidraw-app/data/index.ts index 39efc24c4..342dd0aa0 100644 --- a/src/excalidraw-app/data/index.ts +++ b/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 =