@pluv/client 0.40.1 → 0.41.0

package/src/PluvRoom.ts

@@ -12,6 +12,7 @@ import type {
     InferIOOutput,
     InputZodLike,
     JsonObject,
+    OptionalProps,
 } from "@pluv/types";
 import { AbstractRoom } from "./AbstractRoom";
 import type { AbstractStorageStore } from "./AbstractStorageStore";
@@ -57,6 +58,7 @@ const ORIGIN_INITIALIZED = "$initialized";
 const ORIGIN_STORAGE_UPDATED = "$storageUpdated";
 
 declare global {
+    // eslint-disable-next-line no-var
     var process: {
         env: {
             [key: string]: string | undefined;
@@ -199,7 +201,7 @@ export class PluvRoom<
         heartbeat: null,
     };
     private readonly _listeners: InternalListeners;
-    private readonly _otherNotifier = new OtherNotifier<TIO>();
+    private readonly _otherNotifier = new OtherNotifier<TIO, TPresence>();
     private readonly _publicKey: PublicKey<TMetadata> | null = null;
     private readonly _reconnectTimeoutMs: ReconnectTimeoutMs;
     private readonly _router: PluvRouter<TIO, TPresence, TStorage, TEvents>;
@@ -387,8 +389,8 @@ export class PluvRoom<
 
             authToken = await this._getAuthorization(this.id, params);
 
-            authToken && url.searchParams.set("token", encodeURIComponent(authToken));
-            publicKey && url.searchParams.set("public_key", encodeURIComponent(publicKey));
+            if (authToken) url.searchParams.set("token", encodeURIComponent(authToken));
+            if (publicKey) url.searchParams.set("public_key", encodeURIComponent(publicKey));
 
             webSocket = new WebSocket(url.toString());
         } catch (err) {
@@ -510,8 +512,15 @@ export class PluvRoom<
         return this._crdtManager.doc.toJson(type);
     }
 
-    public other = (connectionId: string, callback: OtherNotifierSubscriptionCallback<TIO>): (() => void) => {
-        return this._otherNotifier.subscribe(connectionId, callback);
+    public other = (
+        connectionId: string,
+        callback: OtherNotifierSubscriptionCallback<TIO, TPresence>,
+    ): (() => void) => {
+        const clientId = this._usersManager.getClientId(connectionId);
+
+        if (!clientId) return () => undefined;
+
+        return this._otherNotifier.subscribe(clientId, callback);
     };
 
     public redo = (): void => {
@@ -572,7 +581,7 @@ export class PluvRoom<
         const myself = this._usersManager.myself ?? null;
 
         this._stateNotifier.subjects["my-presence"].next(myPresence);
-        !!myself && this._stateNotifier.subjects["myself"].next(myself);
+        if (!!myself) this._stateNotifier.subjects.myself.next(myself);
 
         this.broadcast(
             "$updatePresence" as keyof InferIOInput<MergeEvents<TEvents, TIO>>,
@@ -652,7 +661,7 @@ export class PluvRoom<
         this._clearTimeout(this._timeouts.pong);
         this._detachWindowListeners();
         this._usersManager.removeMyself();
-        this._usersManager.removeUsers();
+        this._usersManager.clearConnections();
         this._otherNotifier.clear();
         this._stateNotifier.subjects.myself.next(null);
         this._stateNotifier.subjects.others.next([]);
@@ -799,13 +808,19 @@ export class PluvRoom<
         // Should not reach here
         if (!this._state.webSocket) throw new Error("Could not find WebSocket");
 
-        this._usersManager.removeUser(connectionId);
-
+        const clientId = this._usersManager.getClientId(connectionId);
+        const deleted = this._usersManager.deleteConnection(connectionId);
         const others = this._usersManager.getOthers();
 
         this._stateNotifier.subjects.others.next(others);
-        this._otherNotifier.subject(connectionId).next(null);
-        this._otherNotifier.subjects.delete(connectionId);
+
+        /**
+         * @description A single user can have multiple connections. So we're checking that there
+         * isn't a remaining connection before choosing to delete that user for other connected
+         * participants.
+         * @date April 16, 2025
+         */
+        if (!deleted?.remaining && !!clientId) this._otherNotifier.delete(clientId);
     }
 
     private _handlePresenceUpdatedMessage(message: IOEventMessage<TIO>): void {
@@ -816,7 +831,6 @@ export class PluvRoom<
         if (!this._state.webSocket) throw new Error("Could not find WebSocket");
 
         const data = message.data as BaseIOEventRecord<InferIOAuthorize<TIO>>["$presenceUpdated"];
-
         const myself = this._usersManager.myself ?? null;
 
         /**
@@ -824,17 +838,30 @@ export class PluvRoom<
          * @description We're going to have the user's own presence be patched only via local calls
          * to this.updateMyPresence. So we'll not update the user's presence in this handler to
          * avoid weird update delays to the user's own presence.
+         *
+         * However, we will patch the user's own presence if the user has updated their own
+         * presence via another connection that is not this one (e.g. if the user has opened
+         * another connection in another browser tab/window somewhere).
          * @date April 2, 2025
          */
         if (myself?.connectionId === connectionId) return;
 
-        this._usersManager.patchPresence(connectionId, data.presence as TPresence);
+        const updated = this._usersManager.patchPresence(connectionId, data.presence as TPresence);
+        const myClientId = !!myself ? this._usersManager.getClientId(myself) : null;
+        const clientId = this._usersManager.getClientId(connectionId);
+
+        if (!!clientId && myClientId === clientId) {
+            this._stateNotifier.subjects["my-presence"].next(updated);
+            this._stateNotifier.subjects.myself.next(this._usersManager.myself);
+
+            return;
+        }
 
         const other = this._usersManager.getOther(connectionId);
         const others = this._usersManager.getOthers();
 
-        this._otherNotifier.subject(connectionId).next(other);
-        this._stateNotifier.subjects["others"].next(others);
+        if (!!clientId) this._otherNotifier.subject(clientId).next(other);
+        this._stateNotifier.subjects.others.next(others);
     }
 
     private _handleReceiveOthers(message: IOEventMessage<TIO>): void {
@@ -847,27 +874,36 @@ export class PluvRoom<
         Object.keys(data.others).forEach((connectionId) => {
             const { presence, user } = data.others[connectionId];
 
-            this._usersManager.setUser(connectionId, user);
+            const result = this._usersManager.addConnection({
+                connectionId,
+                presence: (presence ?? undefined) as TPresence,
+                user,
+            });
 
-            const other = this._usersManager.getOther(connectionId);
+            if (!!presence) this._usersManager.patchPresence(connectionId, presence as TPresence);
+            if (result.isMyself) return;
 
-            !!presence && this._usersManager.patchPresence(connectionId, presence as TPresence);
+            const clientId = result.clientId;
+            const other = this._usersManager.getOther(connectionId);
 
-            this._otherNotifier.subject(connectionId).next(other);
+            this._otherNotifier.subject(clientId).next(other);
         });
 
         const others = this._usersManager.getOthers();
 
-        this._stateNotifier.subjects["others"].next(others);
+        this._stateNotifier.subjects.others.next(others);
     }
 
     private _handleRegisteredMessage(message: IOEventMessage<TIO>): void {
-        const { connectionId, user } = message;
+        const { connectionId } = message;
+        const user = message.user as Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>;
 
         if (!connectionId) return;
         // Should not reach here
         if (!this._state.webSocket) throw new Error("Could not find WebSocket");
 
+        const data = message.data as BaseIOEventRecord<InferIOAuthorize<TIO>>["$registered"];
+
         this._updateState((oldState) => {
             oldState.connection.count += 1;
             oldState.connection.id = connectionId;
@@ -876,13 +912,18 @@ export class PluvRoom<
             return oldState;
         });
 
-        this._usersManager.setMyself(connectionId, user as Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>);
+        const userInfo: OptionalProps<UserInfo<TIO, TPresence>, "presence"> = {
+            connectionId,
+            presence: (data.presence as TPresence | null) ?? undefined,
+            user,
+        };
+        this._usersManager.setMyself(userInfo);
 
         const presence = this._usersManager.myPresence;
         const myself = this._usersManager.myself ?? null;
 
         this._stateNotifier.subjects["my-presence"].next(presence);
-        this._stateNotifier.subjects["myself"].next(myself);
+        this._stateNotifier.subjects.myself.next(myself);
 
         const update = this._state.connection.count > 1 ? (this._crdtManager.doc.getEncodedState() ?? null) : null;
 
@@ -972,20 +1013,25 @@ export class PluvRoom<
         if (!this._usersManager.myself) return;
 
         const data = message.data as BaseIOEventRecord<InferIOAuthorize<TIO>>["$userJoined"];
-
         const myself = this._usersManager.myself;
 
         if (myself.connectionId === connectionId) {
             this._sendMessage({ type: "$getOthers", data: {} });
+            return;
         }
 
-        this._usersManager.setUser(connectionId, data.user, data.presence as TPresence);
+        const result = this._usersManager.addConnection({
+            connectionId,
+            presence: data.presence as TPresence,
+            user: data.user,
+        });
 
+        const clientId = result?.clientId ?? null;
         const other = this._usersManager.getOther(connectionId);
         const others = this._usersManager.getOthers();
 
-        this._otherNotifier.subject(connectionId).next(other);
-        this._stateNotifier.subjects["others"].next(others);
+        if (!!clientId) this._otherNotifier.subject(clientId).next(other);
+        this._stateNotifier.subjects.others.next(others);
     }
 
     private _heartbeat(): void {
@@ -1002,10 +1048,8 @@ export class PluvRoom<
     }
 
     private _logDebug(...data: any[]): void {
-        // eslint-disable-next-line turbo/no-undeclared-env-vars
         if ((process as unknown as any)?.env?.NODE_ENV === "production") return;
-
-        this._debug && console.log(...data);
+        if (this._debug) console.log(...data);
     }
 
     private _observeCrdt(): void {
@@ -1050,7 +1094,7 @@ export class PluvRoom<
 
     private async _onClose(event: CloseEvent): Promise<void> {
         this._logDebug("WebSocket closed");
-        !!event.reason && this._logDebug(event.reason);
+        if (!!event.reason) this._logDebug(event.reason);
 
         const shouldRetry = [
             // Going away: Client/server is shutting down or navigating
@@ -1067,11 +1111,6 @@ export class PluvRoom<
             1014,
         ].some((okToRetryCode) => event.code === okToRetryCode);
 
-        this._closeWs();
-
-        if (!shouldRetry) this._clearTimeout(this._timeouts.reconnect);
-        else this._pollReconnect();
-
         this._updateState((oldState) => {
             oldState.authorization.token = null;
             oldState.connection.state = shouldRetry ? ConnectionState.Unavailable : ConnectionState.Closed;
@@ -1079,6 +1118,14 @@ export class PluvRoom<
 
             return oldState;
         });
+
+        if (shouldRetry) {
+            await this._reconnect();
+            return;
+        }
+
+        this._closeWs();
+        this._clearTimeout(this._timeouts.reconnect);
     }
 
     /**

package/src/UsersManager.ts

@@ -1,4 +1,5 @@
-import type { Id, InferIOAuthorize, InferIOAuthorizeUser, InputZodLike, IOLike, JsonObject } from "@pluv/types";
+import type { InputZodLike, IOLike, JsonObject, OptionalProps } from "@pluv/types";
+import { MAX_PRESENCE_SIZE_BYTES } from "./constants";
 import type { UserInfo } from "./types";
 
 export type Presence = Record<string, unknown>;
@@ -8,7 +9,25 @@ export type UsersManagerConfig<TPresence extends JsonObject = {}> = {
     presence?: InputZodLike<TPresence>;
 };
 
+export type AddConnectionResult<TIO extends IOLike, TPresence extends JsonObject = {}> = {
+    clientId: string;
+    data: UserInfo<TIO, TPresence>;
+    isMyself: boolean;
+    remaining: number;
+};
+
+export type DeleteConnectionResult<TIO extends IOLike, TPresence extends JsonObject = {}> = {
+    clientId: string;
+    data: UserInfo<TIO, TPresence>;
+    remaining: number;
+};
+
 export class UsersManager<TIO extends IOLike, TPresence extends JsonObject = {}> {
+    private _idMap = {
+        fromConnectionId: new Map<[connectionId: string][0], [clientId: string][0]>(),
+        fromClientId: new Map<[clientId: string][0], Set<[connectionId: string][0]>>(),
+    };
+
     private _initialPresence: TPresence;
     /**
      * @description This presence can be updated while the user is not
@@ -19,7 +38,7 @@ export class UsersManager<TIO extends IOLike, TPresence extends JsonObject = {}>
      * @description This is only set when the user is connected.
      */
     private _myself: UserInfo<TIO, TPresence> | null = null;
-    private _others = new Map<string, UserInfo<TIO, TPresence>>();
+    private _others = new Map<[clientId: string][0], UserInfo<TIO, TPresence>>();
     private _presence: InputZodLike<TPresence> | null = null;
 
     constructor(config: UsersManagerConfig<TPresence>) {
@@ -38,102 +57,239 @@ export class UsersManager<TIO extends IOLike, TPresence extends JsonObject = {}>
         return this._myself;
     }
 
-    public clear(): void {
+    public addConnection(
+        userInfo: OptionalProps<UserInfo<TIO, TPresence>, "presence">,
+    ): AddConnectionResult<TIO, TPresence> {
+        const data: UserInfo<TIO, TPresence> = {
+            ...userInfo,
+            presence: userInfo.presence ?? this._initialPresence,
+        };
+
+        const myClientId = !!this._myself ? this.getClientId(this._myself) : null;
+        const clientId = this.getClientId(data);
+        const remaining = this._setConnectionId(userInfo.connectionId, clientId).size;
+
+        if (myClientId === clientId) {
+            const result: AddConnectionResult<TIO, TPresence> = {
+                clientId,
+                data,
+                isMyself: true,
+                remaining,
+            };
+
+            return result;
+        }
+
+        const other = this._others.get(clientId);
+
+        /**
+         * !HACK
+         * @description Don't override the other user, so that we ensure the user's presence isn't
+         * overwritten by whatever incoming connection.
+         * @date April 16, 2025
+         */
+        if (!other) this._others.set(clientId, data);
+
+        const result: AddConnectionResult<TIO, TPresence> = {
+            clientId,
+            data,
+            isMyself: false,
+            remaining,
+        };
+
+        return result;
+    }
+
+    public clearConnections(): void {
+        this.removeMyself();
         this._others.clear();
+        this._idMap.fromClientId.clear();
+        this._idMap.fromConnectionId.clear();
+    }
+
+    public deleteConnection(connectionId: string): DeleteConnectionResult<TIO, TPresence> | null {
+        const clientId = this.getClientId(connectionId);
+
+        this._deleteConnectionId(connectionId);
+
+        // We expect that a clientId should always exist here, but we'll just check this anyways
+        if (!clientId) return null;
+
+        const userInfo = this._others.get(clientId) ?? null;
+
+        // We also expect this should always exist here, but we'll just check this anyways
+        if (!userInfo) return null;
+
+        const remaining = this._getConnectionIds(clientId)?.size ?? 0;
+        const result: DeleteConnectionResult<TIO, TPresence> = { clientId, remaining, data: userInfo };
+
+        /**
+         * @description A user may have multiple websocket connections open. If one connection is
+         * dropped, the user may still be connected via another websocket (e.g. on anther browser
+         * tab). In this case, we just want to remove the connection mapping for the connection
+         * that is dropped, but keep the remaining connections and the user.
+         * @date April 16, 2025
+         */
+        if (!remaining) this._others.delete(clientId);
+
+        return result;
+    }
+
+    /**
+     * @description The client id is either the user's id (if authorized) or the connection id
+     * otherwise. This is so that, despite having multiple connections, the user will only have one
+     * presence to all other users.
+     * @date April 16, 2025
+     */
+    public getClientId(connectionId: string): string | null;
+    public getClientId(userInfo: UserInfo<TIO, TPresence>): string;
+    public getClientId(input: string | UserInfo<TIO, TPresence>): string | null {
+        if (typeof input !== "string") {
+            const userInfo = input;
+            const connectionId = userInfo.connectionId;
+            const userId = userInfo.user?.id ?? null;
+
+            return userId ?? connectionId;
+        }
+
+        const connectionId = input;
+
+        if (this._myself?.connectionId === connectionId) {
+            return this.getClientId(this._myself);
+        }
+
+        const clientId = this._idMap.fromConnectionId.get(connectionId) ?? null;
+
+        return clientId;
     }
 
     public getOther(connectionId: string): UserInfo<TIO, TPresence> | null {
-        return this._others.get(connectionId) ?? null;
+        const clientId = this.getClientId(connectionId);
+
+        if (!clientId) return null;
+
+        return this._others.get(clientId) ?? null;
     }
 
     public getOthers(): readonly UserInfo<TIO, TPresence>[] {
         return Array.from(this._others.values());
     }
 
-    public patchPresence(connectionId: string, patch: Partial<TPresence>): void {
-        if (this._myself?.connectionId === connectionId) {
-            this.updateMyPresence(patch);
+    public patchPresence(connectionId: string, patch: Partial<TPresence>): TPresence | null {
+        const clientId = this.getClientId(connectionId);
+        const myClientId = !!this._myself ? this.getClientId(this._myself) : null;
 
-            return;
-        }
+        if (!clientId) return null;
+        if (myClientId === clientId) return this.updateMyPresence(patch);
 
-        const other = this._others.get(connectionId);
+        const other = this._others.get(clientId);
 
-        if (!other) return;
+        if (!other) return null;
 
-        const presence = {
-            ...other.presence,
-            ...patch,
-        } as TPresence;
+        const presence = { ...other.presence, ...patch } as TPresence;
+        const validated = this._presence ? this._presence.parse(presence) : presence;
 
-        this._presence?.parse(presence);
+        this._others.set(clientId, { ...other, presence: validated });
 
-        this._others.set(connectionId, { ...other, presence });
+        return validated;
     }
 
     public removeMyself(): void {
+        if (!this._myself) return;
+
+        const connectionId = this._myself.connectionId;
+
+        this._deleteConnectionId(connectionId);
         this._myself = null;
     }
 
-    public removeUser(connectionId: string): void {
-        this._others.delete(connectionId);
-    }
+    public setMyself(userInfo: OptionalProps<UserInfo<TIO, TPresence>, "presence">): void {
+        const connectionId = userInfo.connectionId;
+        const presence = userInfo.presence ?? this._initialPresence;
 
-    public removeUsers(): void {
-        this._others.clear();
-    }
+        this._myself = { ...userInfo, presence };
+        this._myPresence = presence;
 
-    public setMyself(connectionId: string, user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>): void {
-        this._myself = {
-            connectionId,
-            presence: this._initialPresence,
-            user,
-        };
+        const clientId = this.getClientId(this._myself);
 
-        this._myPresence = this._initialPresence;
+        this._setConnectionId(connectionId, clientId);
     }
 
     public setPresence(connectionId: string, presence: TPresence): void {
-        if (this._myself?.connectionId === connectionId) {
+        const clientId = this.getClientId(connectionId);
+        const myClientId = !!this._myself ? this.getClientId(this._myself) : null;
+
+        if (!clientId) return;
+
+        if (myClientId === clientId) {
+            if (!this._myself) return;
+
             this._myself.presence = presence;
             this._myPresence = presence;
 
             return;
         }
 
-        const other = this._others.get(connectionId);
+        const other = this._others.get(clientId);
 
         if (!other) return;
 
-        this._others.set(connectionId, { ...other, presence });
+        this._others.set(clientId, { ...other, presence });
+    }
+
+    /**
+     * @description This method need not care about being connected.
+     */
+    public updateMyPresence(patch: Partial<TPresence>): TPresence {
+        const updated = { ...this._myPresence, ...patch };
+        const bytes = new TextEncoder().encode(JSON.stringify(updated)).length;
+
+        if (bytes > MAX_PRESENCE_SIZE_BYTES) {
+            throw new Error(
+                `Large presence. Presence must be at most 512 bytes. Current size: ${bytes.toLocaleString()}`,
+            );
+        }
+
+        this._myPresence = updated;
+
+        if (!this._myself) return updated;
+
+        this._myself.presence = updated;
+
+        return updated;
     }
 
-    public setUser(
-        connectionId: string,
-        user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>,
-        presence?: TPresence,
-    ): void {
-        if (this._myself?.connectionId === connectionId) return;
+    private _deleteConnectionId(connectionId: string): void {
+        const clientId = this.getClientId(connectionId);
+
+        this._idMap.fromConnectionId.delete(connectionId);
+
+        if (!clientId) return;
 
-        const other = this._others.get(connectionId);
+        const set = this._idMap.fromClientId.get(clientId) ?? null;
 
-        if (other) return;
+        if (!set) return;
 
-        this._others.set(connectionId, {
-            connectionId,
-            presence: presence ?? this._initialPresence,
-            user,
-        });
+        set.delete(connectionId);
+
+        if (!!set.size) return;
+
+        this._idMap.fromClientId.delete(clientId);
     }
 
-    /**
-     * @description This method need not care about being connected.
-     */
-    public updateMyPresence(patch: Partial<TPresence>): void {
-        this._myPresence = { ...this._myPresence, ...patch };
+    private _getConnectionIds(clientId: string): Set<[connectionId: string][0]> | null {
+        const set = this._idMap.fromClientId.get(clientId);
 
-        if (!this._myself) return;
+        return set ?? null;
+    }
+
+    private _setConnectionId(connectionId: string, clientId: string): Set<[connectionId: string][0]> {
+        const set = this._idMap.fromClientId.get(clientId) ?? new Set<string>();
+        const updated = set.add(connectionId);
+
+        this._idMap.fromConnectionId.set(connectionId, clientId);
+        this._idMap.fromClientId.set(clientId, updated);
 
-        this._myself.presence = this._myPresence;
+        return updated;
     }
 }

package/src/constants.ts

@@ -0,0 +1 @@
+export const MAX_PRESENCE_SIZE_BYTES = 512;

package/src/types.ts

@@ -13,7 +13,7 @@ import type { PluvClient } from "./PluvClient";
 
 export interface AuthorizationState<TIO extends IOLike> {
     token: string | null;
-    user: InferIOAuthorizeUser<InferIOAuthorize<TIO>> | null;
+    user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>> | null;
 }
 
 export type EventResolver<