From d31c1e1435ec90dc862db24b326e3e42a21e72cf Mon Sep 17 00:00:00 2001
From: BrennanConroy <brecon@microsoft.com>
Date: Fri, 26 Mar 2021 15:47:02 -0700
Subject: [PATCH 1/2] [SignalR TS] Set keep alive timer in receive loop

---
 .../clients/ts/signalr/src/HubConnection.ts   | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/SignalR/clients/ts/signalr/src/HubConnection.ts b/src/SignalR/clients/ts/signalr/src/HubConnection.ts
index 2e68ff465359..6a4612b28666 100644
--- a/src/SignalR/clients/ts/signalr/src/HubConnection.ts
+++ b/src/SignalR/clients/ts/signalr/src/HubConnection.ts
@@ -55,6 +55,7 @@ export class HubConnection {
     private _connectionStarted: boolean;
     private _startPromise?: Promise<void>;
     private _stopPromise?: Promise<void>;
+    private _nextKeepAlive: number = 0;
 
     // The type of these a) doesn't matter and b) varies when building in browser and node contexts
     // Since we're building the WebPack bundle directly from the TypeScript, this matters (previously
@@ -604,24 +605,39 @@ export class HubConnection {
             return;
         }
 
+        // Set the time we want the next keep alive to be sent
+        // Timer will be setup on next message receive
+        this._nextKeepAlive = new Date().getTime() + this.keepAliveIntervalInMilliseconds;
+
         this._cleanupPingTimer();
-        this._pingServerHandle = setTimeout(async () => {
-            if (this._connectionState === HubConnectionState.Connected) {
-                try {
-                    await this._sendMessage(this._cachedPingMessage);
-                } catch {
-                    // We don't care about the error. It should be seen elsewhere in the client.
-                    // The connection is probably in a bad or closed state now, cleanup the timer so it stops triggering
-                    this._cleanupPingTimer();
-                }
-            }
-        }, this.keepAliveIntervalInMilliseconds);
     }
 
     private _resetTimeoutPeriod() {
         if (!this.connection.features || !this.connection.features.inherentKeepAlive) {
             // Set the timeout timer
             this._timeoutHandle = setTimeout(() => this.serverTimeout(), this.serverTimeoutInMilliseconds);
+
+            // Set keepAlive timer if there isn't one
+            if (this._pingServerHandle === undefined)
+            {
+                let nextPing = this._nextKeepAlive - new Date().getTime();
+                if (nextPing < 0) {
+                    nextPing = 0;
+                }
+
+                // The timer needs to be set from a networking callback to avoid Chrome timer throttling from causing timers to run once a minute
+                this._pingServerHandle = setTimeout(async () => {
+                    if (this._connectionState === HubConnectionState.Connected) {
+                        try {
+                            await this._sendMessage(this._cachedPingMessage);
+                        } catch {
+                            // We don't care about the error. It should be seen elsewhere in the client.
+                            // The connection is probably in a bad or closed state now, cleanup the timer so it stops triggering
+                            this._cleanupPingTimer();
+                        }
+                    }
+                }, nextPing);
+            }
         }
     }
 
@@ -813,6 +829,7 @@ export class HubConnection {
     private _cleanupPingTimer(): void {
         if (this._pingServerHandle) {
             clearTimeout(this._pingServerHandle);
+            this._pingServerHandle = undefined;
         }
     }
 

From 8bb6546fde460e19b38ee14f40a9ce7973fea04a Mon Sep 17 00:00:00 2001
From: BrennanConroy <brecon@microsoft.com>
Date: Thu, 8 Apr 2021 11:32:59 -0700
Subject: [PATCH 2/2] fixup

---
 src/SignalR/clients/ts/signalr/src/HubConnection.ts      | 2 ++
 .../clients/ts/signalr/tests/HubConnection.test.ts       | 9 ++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/SignalR/clients/ts/signalr/src/HubConnection.ts b/src/SignalR/clients/ts/signalr/src/HubConnection.ts
index 6a4612b28666..4cf02d87b746 100644
--- a/src/SignalR/clients/ts/signalr/src/HubConnection.ts
+++ b/src/SignalR/clients/ts/signalr/src/HubConnection.ts
@@ -75,6 +75,8 @@ export class HubConnection {
      *
      * The default value is 15,000 milliseconds (15 seconds).
      * Allows the server to detect hard disconnects (like when a client unplugs their computer).
+     * The ping will happen at most as often as the server pings.
+     * If the server pings every 5 seconds, a value lower than 5 will ping every 5 seconds.
      */
     public keepAliveIntervalInMilliseconds: number;
 
diff --git a/src/SignalR/clients/ts/signalr/tests/HubConnection.test.ts b/src/SignalR/clients/ts/signalr/tests/HubConnection.test.ts
index 598daf538531..ccbebd27ccb5 100644
--- a/src/SignalR/clients/ts/signalr/tests/HubConnection.test.ts
+++ b/src/SignalR/clients/ts/signalr/tests/HubConnection.test.ts
@@ -109,7 +109,7 @@ describe("HubConnection", () => {
     });
 
     describe("ping", () => {
-        it("automatically sends multiple pings", async () => {
+        it("sends pings when receiving pings", async () => {
             await VerifyLogger.run(async (logger) => {
                 const connection = new TestConnection();
                 const hubConnection = createHubConnection(connection, logger);
@@ -118,8 +118,15 @@ describe("HubConnection", () => {
 
                 try {
                     await hubConnection.start();
+
+                    const pingInterval = setInterval(async () => {
+                        await connection.receive({ type: MessageType.Ping });
+                    }, 5);
+
                     await delayUntil(500);
 
+                    clearInterval(pingInterval);
+
                     const numPings = connection.sentData.filter((s) => JSON.parse(s).type === MessageType.Ping).length;
                     expect(numPings).toBeGreaterThanOrEqual(2);
                 } finally {