Client reconnects when state's available on the server

Author: pranavkm

src/Components/Browser.JS/src/Boot.Server.ts

@@ -6,16 +6,42 @@ import { OutOfProcessRenderBatch } from './Rendering/RenderBatch/OutOfProcessRen
 import { internalFunctions as uriHelperFunctions } from './Services/UriHelper';
 import { renderBatch } from './Rendering/Renderer';
 import { fetchBootConfigAsync, loadEmbeddedResourcesAsync } from './BootCommon';
+import { CircuitHandler } from './Platform/Circuits/CircuitHandler';
+import { AutoReconnectCircuitHandler } from './Platform/Circuits/AutoReconnectCircuitHandler';
 
-let connection : signalR.HubConnection;
+async function boot() {
+  const circuitHandlers: CircuitHandler[] = [ new AutoReconnectCircuitHandler() ];
+  window['Blazor'].circuitHandlers = circuitHandlers;
 
-function boot() {
   // In the background, start loading the boot config and any embedded resources
   const embeddedResourcesPromise = fetchBootConfigAsync().then(bootConfig => {
     return loadEmbeddedResourcesAsync(bootConfig);
   });
 
-  connection = new signalR.HubConnectionBuilder()
+  const initialConnection = await initializeConnection(circuitHandlers);
+
+  // Ensure any embedded resources have been loaded before starting the app
+  await embeddedResourcesPromise;
+  const circuitId = await initialConnection.invoke<string>(
+    'StartCircuit',
+    uriHelperFunctions.getLocationHref(),
+    uriHelperFunctions.getBaseURI()
+  );
+
+  window['Blazor'].reconnect = async () => {
+    const reconnection = await initializeConnection(circuitHandlers);
+    if (!await reconnection.invoke<Boolean>('ConnectCircuit', circuitId)) {
+      throw new Error('Failed to reconnect to the server. The supplied circuitId is invalid.');
+    }
+
+    circuitHandlers.forEach(h => h.onConnectionUp && h.onConnectionUp());
+  };
+
+  circuitHandlers.forEach(h => h.onConnectionUp && h.onConnectionUp());
+}
+
+async function initializeConnection(circuitHandlers: CircuitHandler[]): Promise<signalR.HubConnection> {
+  const connection = new signalR.HubConnectionBuilder()
     .withUrl('_blazor')
     .withHubProtocol(new MessagePackHubProtocol())
     .configureLogging(signalR.LogLevel.Information)
@@ -33,40 +59,31 @@ function boot() {
     }
   });
 
-  connection.on('JS.Error', unhandledError);
-
-  connection.start()
-    .then(async () => {
-      DotNet.attachDispatcher({
-        beginInvokeDotNetFromJS: (callId, assemblyName, methodIdentifier, dotNetObjectId, argsJson) => {
-          connection.send('BeginInvokeDotNetFromJS', callId ? callId.toString() : null, assemblyName, methodIdentifier, dotNetObjectId || 0, argsJson);
-        }
-      });
-
-      // Ensure any embedded resources have been loaded before starting the app
-      await embeddedResourcesPromise;
-
-      connection.send(
-        'StartCircuit',
-        uriHelperFunctions.getLocationHref(),
-        uriHelperFunctions.getBaseURI()
-      );
-    })
-    .catch(unhandledError);
-
-  // Temporary undocumented API to help with https://github.com/aspnet/Blazor/issues/1339
-  // This will be replaced once we implement proper connection management (reconnects, etc.)
-  window['Blazor'].onServerConnectionClose = connection.onclose.bind(connection);
+  connection.onclose(error => circuitHandlers.forEach(h => h.onConnectionDown && h.onConnectionDown(error)));
+  connection.on('JS.Error', error => unhandledError(connection, error));
+
+  window['Blazor']._internal.forceCloseConnection = () => connection.stop();
+
+  try {
+    await connection.start();
+  } catch (ex) {
+    unhandledError(connection, ex);
+  }
+
+  DotNet.attachDispatcher({
+    beginInvokeDotNetFromJS: (callId, assemblyName, methodIdentifier, dotNetObjectId, argsJson) => {
+      connection.send('BeginInvokeDotNetFromJS', callId ? callId.toString() : null, assemblyName, methodIdentifier, dotNetObjectId || 0, argsJson);
+    }
+  });
+
+  return connection;
 }
 
-function unhandledError(err) {
+function unhandledError(connection: signalR.HubConnection, err: Error) {
   console.error(err);
 
   // Disconnect on errors.
   //
-  // TODO: it would be nice to have some kind of experience for what happens when you're
-  // trying to interact with an app that's disconnected.
-  //
   // Trying to call methods on the connection after its been closed will throw.
   if (connection) {
     connection.stop();

src/Components/Browser.JS/src/Platform/Circuits/AutoReconnectCircuitHandler.ts

@@ -0,0 +1,35 @@
+import { CircuitHandler } from './CircuitHandler';
+export class AutoReconnectCircuitHandler implements CircuitHandler {
+  modal: HTMLDivElement;
+  message: Text;
+  isConnected: boolean | null;
+
+  constructor(private maxRetries: number = 5, private retryInterval: number = 3000) {
+    this.modal = document.createElement('div');
+    this.modal.className = 'modal';
+    this.message = document.createTextNode('');
+    this.modal.appendChild(this.message);
+    document.addEventListener('DOMContentLoaded', () => document.body.appendChild(this.modal));
+    this.isConnected = null;
+  }
+  onConnectionUp() {
+    this.modal.style.display = 'none';
+  }
+  async onConnectionDown() {
+    this.message.textContent = 'Attempting to reconnect to the server...';
+
+    this.modal.style.display = 'block';
+    const delay = () => new Promise((resolve) => setTimeout(resolve, this.retryInterval));
+    for (let i = 0; i < this.maxRetries; i++) {
+      await delay();
+      try {
+        await window['Blazor'].reconnect();
+        break;
+      } catch (err) {
+        console.error(err);
+      }
+    }
+
+    this.message.textContent = 'Failed to connect to server.';
+  }
+}

src/Components/Browser.JS/src/Platform/Circuits/CircuitHandler.ts

@@ -0,0 +1,10 @@
+export interface CircuitHandler {
+    /** Invoked when a server connection is established or re-established after a connection failure.
+     */
+    onConnectionUp?() : void;
+
+    /** Invoked when a server connection is dropped.
+     * @param {Error} error Optionally argument containing the error that caused the connection to close (if any).
+     */
+    onConnectionDown?(error?: Error): void;
+}

src/Components/Browser.JS/src/components.server.css

@@ -0,0 +1,14 @@
+.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  overflow: hidden;
+  background-color: #fff;
+  opacity: 0.8;
+  text-align: center;
+  font-weight: bold;
+}

src/Components/Server/src/Circuits/CircuitClientProxy.cs

@@ -0,0 +1,53 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using System;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.SignalR;
+
+namespace Microsoft.AspNetCore.Components.Server.Circuits
+{
+    internal class CircuitClientProxy : IClientProxy
+    {
+        public static readonly CircuitClientProxy OfflineClient = new CircuitClientProxy();
+
+        private CircuitClientProxy()
+        {
+            Connected = false;
+        }
+
+        public CircuitClientProxy(IClientProxy clientProxy, string connectionId)
+        {
+            Transfer(clientProxy, connectionId);
+        }
+
+        public bool Connected { get; private set; }
+
+        public string ConnectionId { get; private set; }
+
+        public IClientProxy Client { get; private set; }
+
+        public void Transfer(IClientProxy clientProxy, string connectionId)
+        {
+            Client = clientProxy ?? throw new ArgumentNullException(nameof(clientProxy));
+            ConnectionId = connectionId ?? throw new ArgumentNullException(nameof(connectionId));
+            Connected = true;
+        }
+
+        public void SetDisconnected()
+        {
+            Connected = false;
+        }
+
+        public Task SendCoreAsync(string method, object[] args, CancellationToken cancellationToken = default)
+        {
+            if (Client == null)
+            {
+                throw new InvalidOperationException($"{nameof(SendCoreAsync)} cannot be invoked with an offline client.");
+            }
+
+            return Client.SendCoreAsync(method, args, cancellationToken);
+        }
+    }
+}

src/Components/Server/src/Circuits/CircuitFactory.cs

@@ -2,15 +2,14 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
 using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.SignalR;
 
 namespace Microsoft.AspNetCore.Components.Server.Circuits
 {
     internal abstract class CircuitFactory
     {
         public abstract CircuitHost CreateCircuitHost(
             HttpContext httpContext,
-            IClientProxy client,
+            CircuitClientProxy client,
             string uriAbsolute,
             string baseUriAbsolute);
     }

src/Components/Server/src/Circuits/CircuitHandler.cs

@@ -67,9 +67,13 @@ public abstract class CircuitHandler
         /// <param name="circuit">The <see cref="Circuit"/>.</param>
         /// <param name="cancellationToken">The <see cref="CancellationToken"/>.</param>
         /// <returns><see cref="Task"/> that represents the asynchronous execution operation.</returns>
+        /// <remarks>
+        /// While <see cref="OnConnectionUpAsync(Circuit, CancellationToken)"/> is always invoked when a client
+        /// connects to the server, <see cref="OnConnectionDownAsync(Circuit, CancellationToken)"/> may not be invoked
+        /// if a client reconnects prior to the server identifying a client disconnect.
+        /// </remarks>
         public virtual Task OnConnectionDownAsync(Circuit circuit, CancellationToken cancellationToken) => Task.CompletedTask;
 
-
         /// <summary>
         /// Invoked when a new circuit is being discarded.
         /// </summary>