Some small improvements

dotnet · May 22, 2024 · 4b49caa · 4b49caa
1 parent a1c05e6
commit 4b49caa
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 18 deletions.
diff --git a/src/Components/Web.JS/src/Platform/Circuits/CircuitStartOptions.ts b/src/Components/Web.JS/src/Platform/Circuits/CircuitStartOptions.ts
@@ -28,14 +28,19 @@ export function resolveOptions(userOptions?: Partial<CircuitStartOptions>): Circ
   // The spread operator can't be used for a deep merge, so do the same for subproperties
   if (userOptions && userOptions.reconnectionOptions) {
     result.reconnectionOptions = { ...defaultOptions.reconnectionOptions, ...userOptions.reconnectionOptions };
+
+    if (typeof(result.reconnectionOptions.retryIntervalMilliseconds) !== 'function' && result.reconnectionOptions.maxRetries === undefined) {
+      // For backwards compatibility, use default max retry count when a non-function retry interval is specified
+      result.reconnectionOptions.maxRetries = 8;
+    }
   }
 
   return result;
 }
 
 export interface ReconnectionOptions {
-  maxRetries: number;
-  retryIntervalMilliseconds: number | ((attempt: number) => number | undefined | null);
+  maxRetries?: number;
+  retryIntervalMilliseconds: number | ((previousAttempts: number, maxRetries?: number) => number | undefined | null);
   dialogId: string;
 }
 
@@ -49,13 +54,17 @@ export interface ReconnectionHandler {
   onConnectionUp(): void;
 }
 
-function computeDefaultRetryInterval(attempt: number): number {
-  if (attempt <= 10) {
+function computeDefaultRetryInterval(previousAttempts: number, maxRetries?: number): number | null {
+  if (maxRetries && previousAttempts >= maxRetries) {
+    return null;
+  }
+
+  if (previousAttempts < 10) {
     // Retry as quickly as possible for the first 10 tries
     return 0;
   }
 
-  if (attempt <= 20) {
+  if (previousAttempts < 20) {
     // Retry every 5 seconds for the next 10 tries
     return 5000;
   }
@@ -71,7 +80,6 @@ const defaultOptions: CircuitStartOptions = {
   initializers: undefined!,
   circuitHandlers: [],
   reconnectionOptions: {
-    maxRetries: Number.MAX_SAFE_INTEGER,
     retryIntervalMilliseconds: computeDefaultRetryInterval,
     dialogId: 'components-reconnect-modal',
   },

diff --git a/src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectionHandler.ts b/src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectionHandler.ts
@@ -27,7 +27,7 @@ export class DefaultReconnectionHandler implements ReconnectionHandler {
     if (!this._reconnectionDisplay) {
       const modal = document.getElementById(options.dialogId);
       this._reconnectionDisplay = modal
-        ? new UserSpecifiedDisplay(modal, options.maxRetries, document)
+        ? new UserSpecifiedDisplay(modal, document, options.maxRetries)
         : new DefaultReconnectDisplay(options.dialogId, document);
     }
 
@@ -63,12 +63,10 @@ class ReconnectionProcess {
   }
 
   async attemptPeriodicReconnection(options: ReconnectionOptions) {
-    for (let i = 0; i < options.maxRetries; i++) {
-      const currentAttempt = i + 1;
-
+    for (let i = 0; options.maxRetries === undefined || i < options.maxRetries; i++) {
       let retryInterval: number;
       if (typeof(options.retryIntervalMilliseconds) === 'function') {
-        const computedRetryInterval = options.retryIntervalMilliseconds(currentAttempt);
+        const computedRetryInterval = options.retryIntervalMilliseconds(i);
         if (computedRetryInterval === null || computedRetryInterval === undefined) {
           break;
         }
@@ -80,7 +78,7 @@ class ReconnectionProcess {
       }
 
       await this.runTimer(retryInterval, /* intervalMs */ 1000, remainingMs => {
-        this.reconnectDisplay.update(currentAttempt, Math.round(remainingMs / 1000));
+        this.reconnectDisplay.update(i + 1, Math.round(remainingMs / 1000));
       });
 
       if (this.isDisposed) {

diff --git a/src/Components/Web.JS/src/Platform/Circuits/UserSpecifiedDisplay.ts b/src/Components/Web.JS/src/Platform/Circuits/UserSpecifiedDisplay.ts
@@ -15,13 +15,17 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
 
   static readonly CurrentAttemptId = 'components-reconnect-current-attempt';
 
-  constructor(private dialog: HTMLElement, private readonly maxRetries: number, private readonly document: Document) {
+  static readonly SecondsToNextAttemptId = 'components-seconds-to-next-attempt';
+
+  constructor(private dialog: HTMLElement, private readonly document: Document, maxRetries?: number) {
     this.document = document;
 
-    const maxRetriesElement = this.document.getElementById(UserSpecifiedDisplay.MaxRetriesId);
+    if (maxRetries !== undefined) {
+      const maxRetriesElement = this.document.getElementById(UserSpecifiedDisplay.MaxRetriesId);
 
-    if (maxRetriesElement) {
-      maxRetriesElement.innerText = this.maxRetries.toString();
+      if (maxRetriesElement) {
+        maxRetriesElement.innerText = maxRetries.toString();
+      }
     }
   }
 
@@ -30,12 +34,18 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
     this.dialog.classList.add(UserSpecifiedDisplay.ShowClassName);
   }
 
-  update(currentAttempt: number): void {
+  update(currentAttempt: number, secondsToNextAttempt: number): void {
     const currentAttemptElement = this.document.getElementById(UserSpecifiedDisplay.CurrentAttemptId);
 
     if (currentAttemptElement) {
       currentAttemptElement.innerText = currentAttempt.toString();
     }
+
+    const secondsToNextAttemptElement = this.document.getElementById(UserSpecifiedDisplay.SecondsToNextAttemptId);
+
+    if (secondsToNextAttemptElement) {
+      secondsToNextAttemptElement.innerText = secondsToNextAttempt.toString();
+    }
   }
 
   hide(): void {

diff --git a/src/Components/test/testassets/Components.TestServer/Pages/_ServerHost.cshtml b/src/Components/test/testassets/Components.TestServer/Pages/_ServerHost.cshtml
@@ -50,7 +50,16 @@
         }
     </script>
 
-    <script src="_framework/blazor.server.js"></script>
+    <script src="_framework/blazor.server.js" autostart="false"></script>
+    <script>
+        Blazor.start({
+            reconnectionOptions: {
+                // It's easier to test the reconnection logic if we wait a bit
+                // before attempting to reconnect
+                retryIntervalMilliseconds: 5000,
+            },
+        });
+    </script>
     <script src="js/jsRootComponentInitializers.js"></script>
 
     <!-- Used by ExternalContentPackage -->

diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/App.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/App.razor
@@ -90,6 +90,8 @@
                 },
                 circuit: {
                     reconnectionOptions: {
+                        // It's easier to test the reconnection logic if we wait a bit
+                        // before attempting to reconnect
                         retryIntervalMilliseconds: 5000,
                     },
                 },