@pluv/client 0.6.5 → 0.8.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/client@0.6.5 build /home/runner/work/pluv/pluv/packages/client
+> @pluv/client@0.8.0 build /home/runner/work/pluv/pluv/packages/client
 > tsup src/index.ts --format esm,cjs --dts
 
 CLI Building entry: src/index.ts
@@ -8,10 +8,10 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 34.41 KB
+ESM dist/index.mjs 35.24 KB
 ESM ⚡️ Build success in 95ms
-CJS dist/index.js 35.55 KB
+CJS dist/index.js 36.38 KB
 CJS ⚡️ Build success in 96ms
 DTS Build start
-DTS ⚡️ Build success in 3764ms
-DTS dist/index.d.ts 11.68 KB
+DTS ⚡️ Build success in 4360ms
+DTS dist/index.d.ts 11.75 KB

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @pluv/client
 
+## 0.8.0
+
+### Minor Changes
+
+- fde89cf: added defaults to the client to align it with createPluvClient by default
+
+### Patch Changes
+
+- 5bbfb98: fix not properly handling unauthorized checks
+- b85a232: bumped dependencies
+- Updated dependencies [b85a232]
+  - @pluv/crdt-yjs@0.3.8
+  - @pluv/types@0.2.0
+
+## 0.7.0
+
+### Minor Changes
+
+- ae679a8: updated offline presence to be set when reconnecting to a room
+
+### Patch Changes
+
+- 0dd847e: updated storage to be synced when reconnected to the room
+- bb2886b: fixed not reconnecting during heartbeat
+- 3518a83: bumped dependencies
+- Updated dependencies [0dd847e]
+- Updated dependencies [bb2886b]
+- Updated dependencies [ae679a8]
+- Updated dependencies [3518a83]
+  - @pluv/crdt-yjs@0.3.7
+  - @pluv/types@0.2.0
+
 ## 0.6.5
 
 ### Patch Changes

package/dist/index.d.ts

@@ -21,6 +21,7 @@ declare enum ConnectionState {
     Untouched = "Untouched"
 }
 interface WebSocketConnection {
+    count: number;
     id: string | null;
     state: ConnectionState;
 }
@@ -80,18 +81,18 @@ declare global {
         };
     };
 }
-type AuthEndpoint = string | ((room: string) => FetchOptions);
+type AuthEndpoint = string | ((room: string) => string | FetchOptions) | true;
 type WsEndpoint = string | ((room: string) => string);
-type FetchOptions = string | {
+type FetchOptions = {
     url: string;
     options?: RequestInit;
 };
 type RoomEndpoints<TIO extends IOLike> = {
-    wsEndpoint: WsEndpoint;
+    wsEndpoint?: WsEndpoint;
 } & (InferIOAuthorizeRequired<InferIOAuthorize<TIO>> extends true ? {
     authEndpoint: AuthEndpoint;
 } : {
-    authEndpoint?: AuthEndpoint;
+    authEndpoint?: undefined;
 });
 type PluvRoomDebug<TIO extends IOLike> = Id<{
     output: readonly (keyof InferIOOutput<TIO>)[];
@@ -143,6 +144,7 @@ declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TS
     private _detachWindowListeners;
     private _detachWsListeners;
     private _getAuthorization;
+    private _getAuthFetchOptions;
     private _getWsEndpoint;
     private _handleExit;
     private _handlePresenceUpdatedMessage;
@@ -197,7 +199,7 @@ declare class PluvClient<TIO extends IOLike = IOLike> {
     private _logDebug;
 }
 
-declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}> = IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
+declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}, {}, {}> = IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}, {}, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
 
 type MockedRoomEvents<TIO extends IOLike> = Partial<{
     [P in keyof InferIOInput<TIO>]: (data: Id<InferIOInput<TIO>[P]>) => Partial<InferIOOutput<TIO>>;

package/dist/index.js

@@ -79,12 +79,12 @@ var import_crdt_yjs = require("@pluv/crdt-yjs");
 var CrdtManager = class {
   constructor(options = {}) {
     const { encodedState, initialStorage } = options;
-    const doc1 = encodedState ? (0, import_crdt_yjs.doc)().applyUpdate(encodedState) : null;
-    if (doc1 && !!Object.keys(doc1.toJSON()).length) {
-      this.doc = doc1;
+    const _doc = encodedState ? (0, import_crdt_yjs.doc)().applyUpdate(encodedState) : null;
+    if (_doc && !!Object.keys(_doc.toJSON()).length) {
+      this.doc = _doc;
       return;
     }
-    doc1 == null ? void 0 : doc1.destroy();
+    _doc == null ? void 0 : _doc.destroy();
     this.doc = (0, import_crdt_yjs.doc)(initialStorage == null ? void 0 : initialStorage());
   }
   destroy() {
@@ -257,7 +257,7 @@ var UsersManager = class {
       return;
     this._others.set(connectionId, __spreadProps(__spreadValues({}, other), { presence }));
   }
-  setUser(connectionId, user) {
+  setUser(connectionId, user, presence) {
     var _a;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId)
       return;
@@ -266,7 +266,7 @@ var UsersManager = class {
       return;
     this._others.set(connectionId, {
       connectionId,
-      presence: this._initialPresence,
+      presence: presence != null ? presence : this._initialPresence,
       user
     });
   }
@@ -311,6 +311,7 @@ var PluvRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        count: 0,
         id: null,
         state: "Untouched" /* Untouched */
       },
@@ -368,10 +369,7 @@ var PluvRoom = class extends AbstractRoom {
       );
     };
     this._debug = debug;
-    this._endpoints = {
-      authEndpoint,
-      wsEndpoint
-    };
+    this._endpoints = { authEndpoint, wsEndpoint };
     this._listeners = {
       onAuthorizationFail: (error) => {
         this._clearTimeout(this._timeouts.reconnect);
@@ -584,24 +582,50 @@ var PluvRoom = class extends AbstractRoom {
   }
   _getAuthorization(room) {
     return __async(this, null, function* () {
-      if (!this._endpoints.authEndpoint)
+      const fetchOptions = this._getAuthFetchOptions(room);
+      if (!fetchOptions)
         return null;
-      if (typeof this._endpoints.authEndpoint === "string") {
-        const token2 = yield fetch(this._endpoints.authEndpoint).then((res) => res.text()).then((text2) => text2.trim());
-        return token2;
+      const { url, options } = fetchOptions;
+      const res = yield fetch(url, options);
+      if (!res.ok || res.status !== 200) {
+        throw new Error("Room is unauthorized");
+      }
+      try {
+        return yield res.text().then((text2) => text2.trim());
+      } catch (err) {
+        throw new Error(
+          err instanceof Error ? err.message : "Room is unauthorized"
+        );
       }
-      const config = this._endpoints.authEndpoint(room);
-      const endpoint = typeof config === "string" ? config : config.url;
-      const options = typeof config === "string" ? void 0 : config.options;
-      const token = yield fetch(endpoint, options).then((res) => res.text()).then((text2) => text2.trim());
-      return token;
     });
   }
+  _getAuthFetchOptions(room) {
+    if (typeof this._endpoints.authEndpoint === "undefined")
+      return null;
+    if (this._endpoints.authEndpoint === true) {
+      return {
+        url: `/api/pluv/authorize?room=${room}`,
+        options: {}
+      };
+    }
+    if (typeof this._endpoints.authEndpoint === "string") {
+      return {
+        url: this._endpoints.authEndpoint,
+        options: {}
+      };
+    }
+    const result = this._endpoints.authEndpoint(room);
+    return typeof result === "string" ? { url: result, options: {} } : result;
+  }
   _getWsEndpoint(room) {
-    if (typeof this._endpoints.wsEndpoint === "string") {
-      return this._endpoints.wsEndpoint;
+    switch (typeof this._endpoints.wsEndpoint) {
+      case "undefined":
+        return `/api/pluv/room/${room}`;
+      case "string":
+        return this._endpoints.wsEndpoint;
+      default:
+        return this._endpoints.wsEndpoint(room);
     }
-    return this._endpoints.wsEndpoint(room);
   }
   _handleExit(message) {
     const { connectionId } = message;
@@ -661,13 +685,14 @@ var PluvRoom = class extends AbstractRoom {
     this._stateNotifier.subjects["others"].next(others);
   }
   _handleRegisteredMessage(message) {
-    var _a;
+    var _a, _b, _c;
     const { connectionId, user } = message;
     if (!connectionId)
       return;
     if (!this._state.webSocket)
       throw new Error("Could not find WebSocket");
     this._updateState((oldState) => {
+      oldState.connection.count += 1;
       oldState.connection.id = connectionId;
       oldState.authorization.user = user;
       return oldState;
@@ -676,11 +701,15 @@ var PluvRoom = class extends AbstractRoom {
       connectionId,
       user
     );
-    const myPresence = this._usersManager.myPresence;
+    const presence = this._usersManager.myPresence;
     const myself = (_a = this._usersManager.myself) != null ? _a : null;
-    this._stateNotifier.subjects["my-presence"].next(myPresence);
+    this._stateNotifier.subjects["my-presence"].next(presence);
     this._stateNotifier.subjects["myself"].next(myself);
-    this._sendMessage({ type: "$GET_OTHERS", data: {} });
+    const update = this._state.connection.count > 1 ? (_c = (_b = this._crdtManager) == null ? void 0 : _b.doc.encodeStateAsUpdate()) != null ? _c : null : null;
+    this._sendMessage({
+      type: "$INITIALIZE_SESSION",
+      data: { presence, update }
+    });
   }
   _handleStorageReceivedMessage(message) {
     var _a;
@@ -737,20 +766,21 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._usersManager.myself)
       return;
     const data = message.data;
-    this._usersManager.setUser(connectionId, data.user);
+    const myself = this._usersManager.myself;
+    if (myself.connectionId === connectionId) {
+      this._sendMessage({ type: "$GET_OTHERS", data: {} });
+    }
+    this._usersManager.setUser(
+      connectionId,
+      data.user,
+      data.presence
+    );
     const other = this._usersManager.getOther(connectionId);
     const others = this._usersManager.getOthers();
     this._otherNotifier.subject(connectionId).next(other);
     this._stateNotifier.subjects["others"].next(others);
   }
   _heartbeat() {
-    if (!this._state.webSocket)
-      return;
-    if (!this._state.connection.id)
-      return;
-    if (this._state.webSocket.readyState !== this._state.webSocket.OPEN) {
-      return;
-    }
     this._clearTimeout(this._timeouts.pong);
     this._timeouts.pong = setTimeout(
       this._reconnect.bind(this),
@@ -945,7 +975,7 @@ var PluvRoom = class extends AbstractRoom {
       this._closeWs();
       this._updateState((oldState) => {
         oldState.authorization.token = null;
-        oldState.connection.state = "Unavailable" /* Unavailable */;
+        oldState.connection.state = "Closed" /* Closed */;
         oldState.webSocket = null;
         return oldState;
       });
@@ -1062,6 +1092,7 @@ var MockedRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        count: 1,
         id: null,
         state: "Untouched" /* Untouched */
       },

package/dist/index.mjs

@@ -54,12 +54,12 @@ import { doc } from "@pluv/crdt-yjs";
 var CrdtManager = class {
   constructor(options = {}) {
     const { encodedState, initialStorage } = options;
-    const doc1 = encodedState ? doc().applyUpdate(encodedState) : null;
-    if (doc1 && !!Object.keys(doc1.toJSON()).length) {
-      this.doc = doc1;
+    const _doc = encodedState ? doc().applyUpdate(encodedState) : null;
+    if (_doc && !!Object.keys(_doc.toJSON()).length) {
+      this.doc = _doc;
       return;
     }
-    doc1 == null ? void 0 : doc1.destroy();
+    _doc == null ? void 0 : _doc.destroy();
     this.doc = doc(initialStorage == null ? void 0 : initialStorage());
   }
   destroy() {
@@ -232,7 +232,7 @@ var UsersManager = class {
       return;
     this._others.set(connectionId, __spreadProps(__spreadValues({}, other), { presence }));
   }
-  setUser(connectionId, user) {
+  setUser(connectionId, user, presence) {
     var _a;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId)
       return;
@@ -241,7 +241,7 @@ var UsersManager = class {
       return;
     this._others.set(connectionId, {
       connectionId,
-      presence: this._initialPresence,
+      presence: presence != null ? presence : this._initialPresence,
       user
     });
   }
@@ -286,6 +286,7 @@ var PluvRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        count: 0,
         id: null,
         state: "Untouched" /* Untouched */
       },
@@ -343,10 +344,7 @@ var PluvRoom = class extends AbstractRoom {
       );
     };
     this._debug = debug;
-    this._endpoints = {
-      authEndpoint,
-      wsEndpoint
-    };
+    this._endpoints = { authEndpoint, wsEndpoint };
     this._listeners = {
       onAuthorizationFail: (error) => {
         this._clearTimeout(this._timeouts.reconnect);
@@ -559,24 +557,50 @@ var PluvRoom = class extends AbstractRoom {
   }
   _getAuthorization(room) {
     return __async(this, null, function* () {
-      if (!this._endpoints.authEndpoint)
+      const fetchOptions = this._getAuthFetchOptions(room);
+      if (!fetchOptions)
         return null;
-      if (typeof this._endpoints.authEndpoint === "string") {
-        const token2 = yield fetch(this._endpoints.authEndpoint).then((res) => res.text()).then((text2) => text2.trim());
-        return token2;
+      const { url, options } = fetchOptions;
+      const res = yield fetch(url, options);
+      if (!res.ok || res.status !== 200) {
+        throw new Error("Room is unauthorized");
+      }
+      try {
+        return yield res.text().then((text2) => text2.trim());
+      } catch (err) {
+        throw new Error(
+          err instanceof Error ? err.message : "Room is unauthorized"
+        );
       }
-      const config = this._endpoints.authEndpoint(room);
-      const endpoint = typeof config === "string" ? config : config.url;
-      const options = typeof config === "string" ? void 0 : config.options;
-      const token = yield fetch(endpoint, options).then((res) => res.text()).then((text2) => text2.trim());
-      return token;
     });
   }
+  _getAuthFetchOptions(room) {
+    if (typeof this._endpoints.authEndpoint === "undefined")
+      return null;
+    if (this._endpoints.authEndpoint === true) {
+      return {
+        url: `/api/pluv/authorize?room=${room}`,
+        options: {}
+      };
+    }
+    if (typeof this._endpoints.authEndpoint === "string") {
+      return {
+        url: this._endpoints.authEndpoint,
+        options: {}
+      };
+    }
+    const result = this._endpoints.authEndpoint(room);
+    return typeof result === "string" ? { url: result, options: {} } : result;
+  }
   _getWsEndpoint(room) {
-    if (typeof this._endpoints.wsEndpoint === "string") {
-      return this._endpoints.wsEndpoint;
+    switch (typeof this._endpoints.wsEndpoint) {
+      case "undefined":
+        return `/api/pluv/room/${room}`;
+      case "string":
+        return this._endpoints.wsEndpoint;
+      default:
+        return this._endpoints.wsEndpoint(room);
     }
-    return this._endpoints.wsEndpoint(room);
   }
   _handleExit(message) {
     const { connectionId } = message;
@@ -636,13 +660,14 @@ var PluvRoom = class extends AbstractRoom {
     this._stateNotifier.subjects["others"].next(others);
   }
   _handleRegisteredMessage(message) {
-    var _a;
+    var _a, _b, _c;
     const { connectionId, user } = message;
     if (!connectionId)
       return;
     if (!this._state.webSocket)
       throw new Error("Could not find WebSocket");
     this._updateState((oldState) => {
+      oldState.connection.count += 1;
       oldState.connection.id = connectionId;
       oldState.authorization.user = user;
       return oldState;
@@ -651,11 +676,15 @@ var PluvRoom = class extends AbstractRoom {
       connectionId,
       user
     );
-    const myPresence = this._usersManager.myPresence;
+    const presence = this._usersManager.myPresence;
     const myself = (_a = this._usersManager.myself) != null ? _a : null;
-    this._stateNotifier.subjects["my-presence"].next(myPresence);
+    this._stateNotifier.subjects["my-presence"].next(presence);
     this._stateNotifier.subjects["myself"].next(myself);
-    this._sendMessage({ type: "$GET_OTHERS", data: {} });
+    const update = this._state.connection.count > 1 ? (_c = (_b = this._crdtManager) == null ? void 0 : _b.doc.encodeStateAsUpdate()) != null ? _c : null : null;
+    this._sendMessage({
+      type: "$INITIALIZE_SESSION",
+      data: { presence, update }
+    });
   }
   _handleStorageReceivedMessage(message) {
     var _a;
@@ -712,20 +741,21 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._usersManager.myself)
       return;
     const data = message.data;
-    this._usersManager.setUser(connectionId, data.user);
+    const myself = this._usersManager.myself;
+    if (myself.connectionId === connectionId) {
+      this._sendMessage({ type: "$GET_OTHERS", data: {} });
+    }
+    this._usersManager.setUser(
+      connectionId,
+      data.user,
+      data.presence
+    );
     const other = this._usersManager.getOther(connectionId);
     const others = this._usersManager.getOthers();
     this._otherNotifier.subject(connectionId).next(other);
     this._stateNotifier.subjects["others"].next(others);
   }
   _heartbeat() {
-    if (!this._state.webSocket)
-      return;
-    if (!this._state.connection.id)
-      return;
-    if (this._state.webSocket.readyState !== this._state.webSocket.OPEN) {
-      return;
-    }
     this._clearTimeout(this._timeouts.pong);
     this._timeouts.pong = setTimeout(
       this._reconnect.bind(this),
@@ -920,7 +950,7 @@ var PluvRoom = class extends AbstractRoom {
       this._closeWs();
       this._updateState((oldState) => {
         oldState.authorization.token = null;
-        oldState.connection.state = "Unavailable" /* Unavailable */;
+        oldState.connection.state = "Closed" /* Closed */;
         oldState.webSocket = null;
         return oldState;
       });
@@ -1037,6 +1067,7 @@ var MockedRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        count: 1,
         id: null,
         state: "Untouched" /* Untouched */
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "0.6.5",
+  "version": "0.8.0",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -17,9 +17,9 @@
     "access": "public"
   },
   "dependencies": {
-    "wonka": "^6.3.1",
-    "@pluv/crdt-yjs": "^0.3.6",
-    "@pluv/types": "^0.1.6"
+    "wonka": "^6.3.2",
+    "@pluv/crdt-yjs": "^0.3.8",
+    "@pluv/types": "^0.2.0"
   },
   "peerDependencies": {
     "yjs": "^13.0.0"
@@ -27,9 +27,9 @@
   "devDependencies": {
     "tsup": "^6.7.0",
     "typescript": "^5.0.4",
-    "yjs": "^13.5.52",
+    "yjs": "^13.6.1",
     "@pluv/tsconfig": "^0.1.6",
-    "eslint-config-pluv": "^0.1.10"
+    "eslint-config-pluv": "^0.1.12"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",

package/src/CrdtManager.ts

@@ -15,17 +15,17 @@ export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
     constructor(options: CrdtManagerOptions<TStorage> = {}) {
         const { encodedState, initialStorage } = options;
 
-        const doc1 = encodedState
+        const _doc = encodedState
             ? doc<TStorage>().applyUpdate(encodedState)
             : null;
 
-        if (doc1 && !!Object.keys(doc1.toJSON()).length) {
-            this.doc = doc1;
+        if (_doc && !!Object.keys(_doc.toJSON()).length) {
+            this.doc = _doc;
 
             return;
         }
 
-        doc1?.destroy();
+        _doc?.destroy();
 
         this.doc = doc<TStorage>(initialStorage?.());
     }

package/src/MockedRoom.ts

@@ -61,6 +61,7 @@ export class MockedRoom<
             user: null,
         },
         connection: {
+            count: 1,
             id: null,
             state: ConnectionState.Untouched,
         },

package/src/PluvClient.ts

@@ -5,6 +5,7 @@ import type {
     RoomEndpoints,
     PluvRoomOptions,
     WsEndpoint,
+    RoomConfig,
 } from "./PluvRoom";
 import { PluvRoom } from "./PluvRoom";
 
@@ -13,9 +14,9 @@ export type PluvClientOptions<TIO extends IOLike> = RoomEndpoints<TIO> & {
 };
 
 export class PluvClient<TIO extends IOLike = IOLike> {
-    private _authEndpoint: AuthEndpoint;
+    private _authEndpoint: AuthEndpoint | undefined;
     private _debug: boolean;
-    private _wsEndpoint: WsEndpoint;
+    private _wsEndpoint: WsEndpoint | undefined;
 
     private _rooms = new Map<string, PluvRoom<TIO, any, any>>();
 
@@ -45,7 +46,7 @@ export class PluvClient<TIO extends IOLike = IOLike> {
             initialStorage: options.initialStorage,
             onAuthorizationFail: options.onAuthorizationFail,
             wsEndpoint: this._wsEndpoint,
-        });
+        } as RoomConfig<TIO, TPresence, TStorage>);
 
         this._rooms.set(room, newRoom);
 

package/src/PluvRoom.ts

@@ -1,4 +1,4 @@
-import { doc, InferYjsSharedTypeJson } from "@pluv/crdt-yjs";
+import { InferYjsSharedTypeJson } from "@pluv/crdt-yjs";
 import type {
     BaseIOEventRecord,
     EventMessage,
@@ -70,21 +70,19 @@ interface TimeoutIds {
     reconnect: number | null;
 }
 
-export type AuthEndpoint = string | ((room: string) => FetchOptions);
+export type AuthEndpoint =
+    | string
+    | ((room: string) => string | FetchOptions)
+    | true;
 export type WsEndpoint = string | ((room: string) => string);
 
-export interface RoomConfigOptions {
-    authEndpoint?: AuthEndpoint;
-    wsEndpoint: WsEndpoint;
-}
-
-type FetchOptions = string | { url: string; options?: RequestInit };
+type FetchOptions = { url: string; options?: RequestInit };
 
 export type RoomEndpoints<TIO extends IOLike> = {
-    wsEndpoint: WsEndpoint;
+    wsEndpoint?: WsEndpoint;
 } & (InferIOAuthorizeRequired<InferIOAuthorize<TIO>> extends true
     ? { authEndpoint: AuthEndpoint }
-    : { authEndpoint?: AuthEndpoint });
+    : { authEndpoint?: undefined });
 
 interface InternalListeners {
     onAuthorizationFail: (error: Error) => void;
@@ -134,6 +132,7 @@ export class PluvRoom<
             user: null,
         },
         connection: {
+            count: 0,
             id: null,
             state: ConnectionState.Untouched,
         },
@@ -166,12 +165,7 @@ export class PluvRoom<
 
         this._debug = debug;
 
-        this._endpoints = {
-            authEndpoint: authEndpoint as
-                | string
-                | ((room: string) => FetchOptions),
-            wsEndpoint,
-        };
+        this._endpoints = { authEndpoint, wsEndpoint } as RoomEndpoints<TIO>;
 
         this._listeners = {
             onAuthorizationFail: (error) => {
@@ -493,33 +487,60 @@ export class PluvRoom<
     }
 
     private async _getAuthorization(room: string): Promise<string | null> {
-        if (!this._endpoints.authEndpoint) return null;
+        const fetchOptions = this._getAuthFetchOptions(room);
 
-        if (typeof this._endpoints.authEndpoint === "string") {
-            const token = await fetch(this._endpoints.authEndpoint)
-                .then((res) => res.text())
-                .then((text) => text.trim());
+        if (!fetchOptions) return null;
 
-            return token;
+        const { url, options } = fetchOptions;
+
+        const res = await fetch(url, options);
+
+        if (!res.ok || res.status !== 200) {
+            throw new Error("Room is unauthorized");
         }
 
-        const config = this._endpoints.authEndpoint(room);
-        const endpoint = typeof config === "string" ? config : config.url;
-        const options = typeof config === "string" ? undefined : config.options;
+        try {
+            return await res.text().then((text) => text.trim());
+        } catch (err) {
+            throw new Error(
+                err instanceof Error ? err.message : "Room is unauthorized"
+            );
+        }
+    }
 
-        const token = await fetch(endpoint, options)
-            .then((res) => res.text())
-            .then((text) => text.trim());
+    private _getAuthFetchOptions(room: string): FetchOptions | null {
+        if (typeof this._endpoints.authEndpoint === "undefined") return null;
 
-        return token;
+        if (this._endpoints.authEndpoint === true) {
+            return {
+                url: `/api/pluv/authorize?room=${room}`,
+                options: {},
+            };
+        }
+
+        if (typeof this._endpoints.authEndpoint === "string") {
+            return {
+                url: this._endpoints.authEndpoint,
+                options: {},
+            };
+        }
+
+        const result = this._endpoints.authEndpoint(room);
+
+        return typeof result === "string"
+            ? { url: result, options: {} }
+            : result;
     }
 
     private _getWsEndpoint(room: string): string {
-        if (typeof this._endpoints.wsEndpoint === "string") {
-            return this._endpoints.wsEndpoint;
+        switch (typeof this._endpoints.wsEndpoint) {
+            case "undefined":
+                return `/api/pluv/room/${room}`;
+            case "string":
+                return this._endpoints.wsEndpoint;
+            default:
+                return this._endpoints.wsEndpoint(room);
         }
-
-        return this._endpoints.wsEndpoint(room);
     }
 
     private _handleExit(message: IOEventMessage<TIO>): void {
@@ -611,6 +632,7 @@ export class PluvRoom<
         if (!this._state.webSocket) throw new Error("Could not find WebSocket");
 
         this._updateState((oldState) => {
+            oldState.connection.count += 1;
             oldState.connection.id = connectionId;
             oldState.authorization.user = user;
 
@@ -622,13 +644,21 @@ export class PluvRoom<
             user as Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>
         );
 
-        const myPresence = this._usersManager.myPresence;
+        const presence = this._usersManager.myPresence;
         const myself = this._usersManager.myself ?? null;
 
-        this._stateNotifier.subjects["my-presence"].next(myPresence);
+        this._stateNotifier.subjects["my-presence"].next(presence);
         this._stateNotifier.subjects["myself"].next(myself);
 
-        this._sendMessage({ type: "$GET_OTHERS", data: {} });
+        const update =
+            this._state.connection.count > 1
+                ? this._crdtManager?.doc.encodeStateAsUpdate() ?? null
+                : null;
+
+        this._sendMessage({
+            type: "$INITIALIZE_SESSION",
+            data: { presence, update },
+        });
     }
 
     private _handleStorageReceivedMessage(message: IOEventMessage<TIO>): void {
@@ -708,7 +738,17 @@ export class PluvRoom<
             InferIOAuthorize<TIO>
         >["$USER_JOINED"];
 
-        this._usersManager.setUser(connectionId, data.user);
+        const myself = this._usersManager.myself;
+
+        if (myself.connectionId === connectionId) {
+            this._sendMessage({ type: "$GET_OTHERS", data: {} });
+        }
+
+        this._usersManager.setUser(
+            connectionId,
+            data.user,
+            data.presence as TPresence
+        );
 
         const other = this._usersManager.getOther(connectionId);
         const others = this._usersManager.getOthers();
@@ -718,12 +758,6 @@ export class PluvRoom<
     }
 
     private _heartbeat(): void {
-        if (!this._state.webSocket) return;
-        if (!this._state.connection.id) return;
-        if (this._state.webSocket.readyState !== this._state.webSocket.OPEN) {
-            return;
-        }
-
         this._clearTimeout(this._timeouts.pong);
         this._timeouts.pong = setTimeout(
             this._reconnect.bind(this),
@@ -957,7 +991,7 @@ export class PluvRoom<
 
         this._updateState((oldState) => {
             oldState.authorization.token = null;
-            oldState.connection.state = ConnectionState.Unavailable;
+            oldState.connection.state = ConnectionState.Closed;
             oldState.webSocket = null;
 
             return oldState;

package/src/UsersManager.ts

@@ -128,7 +128,8 @@ export class UsersManager<
 
     public setUser(
         connectionId: string,
-        user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>
+        user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>,
+        presence?: TPresence
     ): void {
         if (this._myself?.connectionId === connectionId) return;
 
@@ -138,7 +139,7 @@ export class UsersManager<
 
         this._others.set(connectionId, {
             connectionId,
-            presence: this._initialPresence,
+            presence: presence ?? this._initialPresence,
             user,
         });
     }

package/src/types.ts

@@ -24,6 +24,7 @@ export interface InternalSubscriptions {
 }
 
 export interface WebSocketConnection {
+    count: number;
     id: string | null;
     state: ConnectionState;
 }