@pluv/client 0.38.14 → 0.39.0

package/dist/index.js

@@ -438,7 +438,9 @@ var debounce = (fn, options) => {
 var ADD_TO_STORAGE_STATE_DEBOUNCE_MS = 1e3;
 var HEARTBEAT_INTERVAL_MS = 1e4;
 var PONG_TIMEOUT_MS = 2e3;
-var RECONNECT_TIMEOUT_MS = 3e4;
+var RECONNECT_TIMEOUT_MS = 5e3;
+var MIN_RECONNECT_TIMEOUT_MS = 1e3;
+var MAX_RECONNECT_TIMEOUT_MS = 6e4;
 var ORIGIN_INITIALIZED = "$initialized";
 var ORIGIN_STORAGE_UPDATED = "$storageUpdated";
 var DEFAULT_PLUV_CLIENT_ADDON = (input) => ({
@@ -456,6 +458,7 @@ var PluvRoom = class extends AbstractRoom {
       onAuthorizationFail,
       presence,
       publicKey,
+      reconnectTimeoutMs = RECONNECT_TIMEOUT_MS,
       router,
       wsEndpoint
     } = options;
@@ -465,7 +468,6 @@ var PluvRoom = class extends AbstractRoom {
     this._intervals = {
       heartbeat: null
     };
-    this._metadata = {};
     this._otherNotifier = new OtherNotifier();
     this._publicKey = null;
     this._stateNotifier = new StateNotifier();
@@ -476,12 +478,14 @@ var PluvRoom = class extends AbstractRoom {
       pong: null,
       reconnect: null
     };
+    this._lastMetadata = null;
     this._state = {
       authorization: {
         token: null,
         user: null
       },
       connection: {
+        attempts: 0,
         count: 0,
         id: null,
         state: "Untouched" /* Untouched */
@@ -620,18 +624,14 @@ var PluvRoom = class extends AbstractRoom {
     };
     const addon = this._getAddon(addons);
     const { storage } = __spreadValues(__spreadValues({}, DEFAULT_PLUV_CLIENT_ADDON({ room: this })), addon({ room: this }));
+    this.metadata = metadata;
     this._debug = debug;
     this._endpoints = { authEndpoint, wsEndpoint };
+    this._reconnectTimeoutMs = reconnectTimeoutMs;
     this._storageStore = storage;
-    if (typeof metadata !== "undefined") this._metadata = metadata;
     if (!!publicKey) this._publicKey = publicKey;
     this._listeners = {
       onAuthorizationFail: (error) => {
-        this._clearTimeout(this._timeouts.reconnect);
-        this._timeouts.reconnect = setTimeout(
-          this._reconnect.bind(this),
-          RECONNECT_TIMEOUT_MS
-        );
         onAuthorizationFail == null ? void 0 : onAuthorizationFail(error);
       }
     };
@@ -645,11 +645,13 @@ var PluvRoom = class extends AbstractRoom {
   get webSocket() {
     return this._state.webSocket;
   }
-  connect() {
+  connect(...args) {
     return __async(this, null, function* () {
-      if (!this._endpoints.wsEndpoint) {
-        throw new Error("Must provide an wsEndpoint.");
-      }
+      var _a;
+      const params = (_a = args[0]) != null ? _a : {};
+      const metadata = params.metadata;
+      this._setMetadata(metadata);
+      if (!this._endpoints.wsEndpoint) throw new Error("Must provide a wsEndpoint.");
       const canConnect = ["Closed" /* Closed */, "Untouched" /* Untouched */].some(
         (state) => this._state.connection.state === state
       );
@@ -661,21 +663,27 @@ var PluvRoom = class extends AbstractRoom {
       });
       yield this._storageStore.initialize();
       yield this._applyStorageStore();
-      const url = new URL(this._getWsEndpoint(this.id));
+      const url = new URL(this._getWsEndpoint(this.id, params));
       let authToken = null;
       let webSocket;
       try {
-        const publicKey = this._getPublicKey();
-        authToken = yield this._getAuthorization(this.id);
+        const publicKey = this._getPublicKey(params);
+        authToken = yield this._getAuthorization(this.id, params);
         authToken && url.searchParams.set("token", encodeURIComponent(authToken));
         publicKey && url.searchParams.set("public_key", encodeURIComponent(publicKey));
         webSocket = new WebSocket(url.toString());
       } catch (err) {
+        this._updateState((oldState) => {
+          oldState.connection.attempts += 1;
+          return oldState;
+        });
         yield this._storageStore.destroy();
-        this._onAuthorizationFail(err);
+        this._pollReconnect();
+        yield Promise.resolve(this._onAuthorizationFail(err));
         return;
       }
       this._updateState((oldState) => {
+        oldState.connection.attempts = 0;
         oldState.authorization.token = authToken;
         oldState.webSocket = webSocket;
         return oldState;
@@ -686,16 +694,21 @@ var PluvRoom = class extends AbstractRoom {
   }
   disconnect() {
     return __async(this, null, function* () {
-      if (!this._endpoints.wsEndpoint) {
-        throw new Error("Must provide an wsEndpoint.");
-      }
+      if (!this._endpoints.wsEndpoint) throw new Error("Must provide a wsEndpoint.");
       if (!this._state.webSocket) return;
       const canDisconnect = ["Connecting" /* Connecting */, "Open" /* Open */].some(
         (state) => this._state.connection.state === state
       );
       if (!canDisconnect) return;
-      this._clearInterval(this._intervals.heartbeat);
       this._closeWs();
+      this._clearInterval(this._intervals.heartbeat);
+      this._clearTimeout(this._timeouts.reconnect);
+      this._updateState((oldState) => {
+        oldState.authorization.token = null;
+        oldState.connection.state = "Closed" /* Closed */;
+        oldState.webSocket = null;
+        return oldState;
+      });
       yield this._storageStore.destroy();
       this._crdtManager.destroy();
       this._stateNotifier.subjects["my-presence"].next(null);
@@ -732,9 +745,11 @@ var PluvRoom = class extends AbstractRoom {
     if (typeof window === "undefined") return;
     if (typeof document === "undefined") return;
     this._windowListeners = {
+      onNavigatorOffline: this._onNavigatorOffline.bind(this),
       onNavigatorOnline: this._onNavigatorOnline.bind(this),
       onVisibilityChange: this._onVisibilityChange.bind(this)
     };
+    window.addEventListener("offline", this._windowListeners.onNavigatorOffline);
     window.addEventListener("online", this._windowListeners.onNavigatorOnline);
     document.addEventListener("visibilitychange", this._windowListeners.onVisibilityChange);
   }
@@ -760,24 +775,17 @@ var PluvRoom = class extends AbstractRoom {
     clearTimeout(timeout);
   }
   _closeWs() {
-    var _a, _b;
-    if (!this._state.webSocket) return;
+    var _a, _b, _c;
     (_b = (_a = this._subscriptions).observeCrdt) == null ? void 0 : _b.call(_a);
+    this._clearInterval(this._intervals.heartbeat);
     this._clearTimeout(this._timeouts.pong);
-    this._clearTimeout(this._timeouts.reconnect);
     this._detachWindowListeners();
     this._usersManager.removeMyself();
     this._usersManager.removeUsers();
     this._otherNotifier.clear();
     this._stateNotifier.subjects.myself.next(null);
     this._stateNotifier.subjects.others.next([]);
-    const canClose = [WebSocket.CONNECTING, WebSocket.OPEN].some(
-      (readyState) => {
-        var _a2;
-        return readyState === ((_a2 = this._state.webSocket) == null ? void 0 : _a2.readyState);
-      }
-    );
-    if (canClose) this._state.webSocket.close();
+    (_c = this._state.webSocket) == null ? void 0 : _c.close();
     this._detachWsListeners();
   }
   _detachWindowListeners() {
@@ -808,7 +816,8 @@ var PluvRoom = class extends AbstractRoom {
     );
     this._crdtNotifier.rootSubject.next(storageRoot);
   }
-  _getAuthFetchOptions(room) {
+  _getAuthFetchOptions(room, params) {
+    const metadata = params.metadata;
     if (typeof this._endpoints.authEndpoint === "undefined") return null;
     if (this._endpoints.authEndpoint === true) {
       return {
@@ -822,18 +831,16 @@ var PluvRoom = class extends AbstractRoom {
         options: {}
       };
     }
-    const result = this._endpoints.authEndpoint({ metadata: this._metadata, room });
+    const result = this._endpoints.authEndpoint({ metadata, room });
     return typeof result === "string" ? { url: result, options: {} } : result;
   }
-  _getAuthorization(room) {
+  _getAuthorization(room, params) {
     return __async(this, null, function* () {
-      const fetchOptions = this._getAuthFetchOptions(room);
+      const fetchOptions = this._getAuthFetchOptions(room, params);
       if (!fetchOptions) return null;
       const { url, options } = fetchOptions;
       const res = yield fetch(url, options);
-      if (!res.ok || res.status !== 200) {
-        throw new Error("Room is unauthorized");
-      }
+      if (!res.ok || res.status !== 200) throw new Error("Room is unauthorized");
       try {
         return yield res.text().then((text) => text.trim());
       } catch (err) {
@@ -841,19 +848,21 @@ var PluvRoom = class extends AbstractRoom {
       }
     });
   }
-  _getPublicKey() {
+  _getPublicKey(params) {
+    const metadata = params.metadata;
     if (!this._publicKey) return null;
     if (typeof this._publicKey === "string") return this._publicKey;
-    return this._publicKey({ metadata: this._metadata });
+    return this._publicKey({ metadata });
   }
-  _getWsEndpoint(room) {
+  _getWsEndpoint(room, params) {
+    const metadata = params.metadata;
     switch (typeof this._endpoints.wsEndpoint) {
       case "undefined":
-        return !!this._getPublicKey() ? `wss://rooms.pluv.io/api/room/${room}` : `/api/pluv/room/${room}`;
+        return !!this._getPublicKey(params) ? `wss://rooms.pluv.io/api/room/${room}` : `/api/pluv/room/${room}`;
       case "string":
         return this._endpoints.wsEndpoint;
       default:
-        return this._endpoints.wsEndpoint({ metadata: this._metadata, room });
+        return this._endpoints.wsEndpoint({ metadata, room });
     }
   }
   _handleExit(message) {
@@ -1020,23 +1029,30 @@ var PluvRoom = class extends AbstractRoom {
       return oldState;
     });
   }
-  /**
-   * TODO
-   * @description Determine if ws was closed with a code for closing without retries.
-   * Otherwise, attempt to retry again with incremental backoff
-   * @author leedavidcs
-   * @date August 19, 2022
-   */
   _onClose(event) {
     return __async(this, null, function* () {
       this._logDebug("WebSocket closed");
       !!event.reason && this._logDebug(event.reason);
-      this._clearInterval(this._intervals.heartbeat);
-      this._clearTimeout(this._timeouts.pong);
-      this._stateNotifier.subjects["myself"].next(null);
+      const shouldRetry = [
+        // Going away: Client/server is shutting down or navigating
+        1001,
+        // Abnormal closure: Usually network error
+        1006,
+        // Internal error: may be a larger problem, but try reconnecting for now
+        1011,
+        // Service restart: Server restarted
+        1012,
+        // Try again later: server overloaded
+        1013,
+        // Bad gateway
+        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 = "Closed" /* Closed */;
+        oldState.connection.state = shouldRetry ? "Unavailable" /* Unavailable */ : "Closed" /* Closed */;
         oldState.webSocket = null;
         return oldState;
       });
@@ -1045,7 +1061,6 @@ var PluvRoom = class extends AbstractRoom {
   /**
    * TODO
    * @description Handle websocket errors in a meaningful way, should they occur
-   * @author leedavidcs
    * @date August 19, 2022
    */
   _onError() {
@@ -1104,11 +1119,18 @@ var PluvRoom = class extends AbstractRoom {
     this._clearInterval(this._intervals.heartbeat);
     this._intervals.heartbeat = setInterval(this._heartbeat.bind(this), HEARTBEAT_INTERVAL_MS);
   }
+  _onNavigatorOffline() {
+    return __async(this, null, function* () {
+      if (this._state.connection.state === "Closed" /* Closed */) return;
+      this._updateState((oldState) => {
+        oldState.connection.state = "Unavailable" /* Unavailable */;
+        return oldState;
+      });
+    });
+  }
   _onNavigatorOnline() {
     return __async(this, null, function* () {
-      if (this._state.connection.state !== "Unavailable" /* Unavailable */) {
-        return;
-      }
+      if (this._state.connection.state !== "Unavailable" /* Unavailable */) return;
       yield this._reconnect();
     });
   }
@@ -1140,6 +1162,12 @@ var PluvRoom = class extends AbstractRoom {
       return null;
     }
   }
+  _pollReconnect() {
+    this._clearTimeout(this._timeouts.reconnect);
+    const timeoutMs = typeof this._reconnectTimeoutMs === "number" ? this._reconnectTimeoutMs : this._reconnectTimeoutMs({ attempts: this._state.connection.attempts });
+    const clampedMs = Math.max(Math.min(MIN_RECONNECT_TIMEOUT_MS, timeoutMs), MAX_RECONNECT_TIMEOUT_MS);
+    this._timeouts.reconnect = setTimeout(this._reconnect.bind(this), clampedMs);
+  }
   _reconnect() {
     return __async(this, null, function* () {
       if (!this._endpoints.wsEndpoint) {
@@ -1147,13 +1175,9 @@ var PluvRoom = class extends AbstractRoom {
       }
       if (!this._state.webSocket) return;
       this._closeWs();
-      this._updateState((oldState) => {
-        oldState.authorization.token = null;
-        oldState.connection.state = "Closed" /* Closed */;
-        oldState.webSocket = null;
-        return oldState;
-      });
-      yield this.connect();
+      const metadata = this._lastMetadata;
+      const params = typeof metadata === "undefined" ? [] : [{ metadata }];
+      yield this.connect(...params);
     });
   }
   _sendMessage(data) {
@@ -1174,6 +1198,9 @@ var PluvRoom = class extends AbstractRoom {
     const message = typeof data === "string" ? data : JSON.stringify(data);
     webSocket.send(message);
   }
+  _setMetadata(metadata) {
+    return this.metadata ? this.metadata.parse(metadata) : metadata;
+  }
   _updateState(updater) {
     let authorization;
     try {
@@ -1203,17 +1230,17 @@ var PluvClient = class {
       var _a;
       const oldRoom = this.getRoom(room);
       if (oldRoom) return oldRoom;
-      const metadata = this._metadata ? this._metadata.parse(options.metadata) : options.metadata;
       const newRoom = new PluvRoom(room, {
         addons: options.addons,
         authEndpoint: this._authEndpoint,
         debug: options.debug,
         initialPresence: options.initialPresence,
         initialStorage: this._initialStorage,
-        metadata,
+        metadata: this.metadata,
         onAuthorizationFail: options.onAuthorizationFail,
         presence: this._presence,
         publicKey: (_a = this._publicKey) != null ? _a : void 0,
+        reconnectTimeoutMs: options.reconnectTimeoutMs,
         router: options.router,
         wsEndpoint: this._wsEndpoint
       });
@@ -1221,11 +1248,11 @@ var PluvClient = class {
       this._logDebug(`New room was created: ${room}`);
       return newRoom;
     };
-    this.enter = (room) => __async(this, null, function* () {
+    this.enter = (room, ...args) => __async(this, null, function* () {
       const toEnter = typeof room === "string" ? this.getRoom(room) : room;
       if (!toEnter) throw new Error(`Could not find room: ${room}.`);
       this._rooms.set(toEnter.id, toEnter);
-      yield toEnter.connect();
+      yield toEnter.connect(...args);
       this._logDebug(`Entered room: ${room}`);
       return toEnter;
     });
@@ -1244,10 +1271,10 @@ var PluvClient = class {
       this._logDebug(`Left and deleted room: ${room}`);
     });
     const { authEndpoint, debug = false, initialStorage, metadata, presence, publicKey, wsEndpoint } = options;
+    this.metadata = metadata;
     this._authEndpoint = authEndpoint;
     this._debug = debug;
     this._initialStorage = initialStorage;
-    this._metadata = metadata;
     this._presence = presence;
     this._wsEndpoint = wsEndpoint;
     if (!!publicKey) this._publicKey = publicKey;
@@ -1296,6 +1323,7 @@ var MockedRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        attempts: 0,
         count: 1,
         id: null,
         state: "Untouched" /* Untouched */