http-request-manager 18.5.18 → 18.5.19

package/fesm2022/http-request-manager.mjs

@@ -2869,6 +2869,8 @@ class HTTPManagerStateService extends ComponentStore {
         this.userAction$ = this.userAction.asObservable();
         this.wsConnection = false;
         this.wsOptions = WSOptions.adapt();
+        // Expose raw WS connection status directly to UI
+        this.connectionStatus$ = this.httpManagerService.connectionStatus$;
         // WebSocket
         this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(
         // tap((wsOptions) => { debugger
@@ -3227,7 +3229,8 @@ class HTTPManagerStateService extends ComponentStore {
         this.databaseOptions = database;
         this.maxRetries = this.apiOptions.ws?.retry?.times || 3;
         this.retryDelay = (this.apiOptions.ws?.retry?.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
-        this.wsNextRetry = new BehaviorSubject(this.retryDelay);
+        // Start next retry countdown at 0 to avoid showing 5000 pre-connection
+        this.wsNextRetry = new BehaviorSubject(0);
         this.wsNextRetry$ = this.wsNextRetry.asObservable();
         this.setApiRequestOptions(apiOptions, dataType, database);
         if (this.databaseOptions && this.databaseOptions.table) {
@@ -3262,8 +3265,8 @@ class HTTPManagerStateService extends ComponentStore {
                 console.error('WSOptions invalid: wsServer is missing or empty');
                 return;
             }
-            // Setup connection status monitoring
-            this.connectionStatus$ = this.setupConnectionStatus();
+            // Setup connection status monitoring (internal subscription to drive retry counters)
+            this.setupConnectionStatus().subscribe();
             // Make initial connection attempt
             console.log('🔄 Initial WebSocket connection attempt...');
             this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
@@ -3293,6 +3296,9 @@ class HTTPManagerStateService extends ComponentStore {
             if (!this.shouldRetry)
                 return of(false);
             const countdownEnder$ = new Subject();
+            // Immediately reflect upcoming retry delay in seconds on UI
+            const seconds = this.retryDelay / 1000;
+            this.wsNextRetry.next(seconds);
             return timer(0, this.retryDelay)
                 .pipe(take(this.maxRetries), tap(i => {
                 const attempt = i + 1;
@@ -4375,7 +4381,8 @@ class RequestManagerWsDemoComponent {
     //   })
     // );
     ngOnInit() {
-        //   this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        // Initialize WS connection and retry driver
+        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path", wsChannel: "wsChannel" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <!-- <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging> -->\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path", "wsChannel"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications" }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }