@trpc/client 11.0.0-rc.528 → 11.0.0-rc.530

package/dist/bundle-analysis.json

@@ -1,20 +1,20 @@
 {
-  "bundleSize": 52387,
-  "bundleOrigSize": 69892,
-  "bundleReduction": 25.05,
+  "bundleSize": 54079,
+  "bundleOrigSize": 71745,
+  "bundleReduction": 24.62,
   "modules": [
     {
       "id": "/src/links/wsLink.ts",
-      "size": 13436,
-      "origSize": 15060,
+      "size": 15128,
+      "origSize": 16913,
       "renderedExports": [
         "createWSClient",
         "wsLink"
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 25.65,
-      "reduction": 10.78
+      "percent": 27.97,
+      "reduction": 10.55
     },
     {
       "id": "/src/links/httpBatchStreamLink.ts",
@@ -25,7 +25,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 11.19,
+      "percent": 10.84,
       "reduction": 3.51
     },
     {
@@ -37,7 +37,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 10.42,
+      "percent": 10.09,
       "reduction": 18.48
     },
     {
@@ -56,12 +56,12 @@
       ],
       "removedExports": [],
       "dependents": [
-        "/src/links/httpLink.ts",
         "/src/links/httpBatchLink.ts",
+        "/src/links/httpLink.ts",
         "/src/links/httpBatchStreamLink.ts",
         "/src/links/httpSubscriptionLink.ts"
       ],
-      "percent": 8.52,
+      "percent": 8.26,
       "reduction": 32.82
     },
     {
@@ -76,7 +76,7 @@
         "/src/links/httpBatchLink.ts",
         "/src/links/httpBatchStreamLink.ts"
       ],
-      "percent": 7.8,
+      "percent": 7.55,
       "reduction": 5.64
     },
     {
@@ -88,7 +88,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 7.49,
+      "percent": 7.26,
       "reduction": 4.69
     },
     {
@@ -100,7 +100,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 7.26,
+      "percent": 7.04,
       "reduction": 9.86
     },
     {
@@ -112,7 +112,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 6.08,
+      "percent": 5.89,
       "reduction": 14.15
     },
     {
@@ -127,7 +127,7 @@
         "/src/createTRPCUntypedClient.ts",
         "/src/createTRPCClient.ts"
       ],
-      "percent": 4.13,
+      "percent": 4,
       "reduction": 47.6
     },
     {
@@ -140,14 +140,14 @@
       "removedExports": [],
       "dependents": [
         "/src/index.ts",
-        "/src/links/httpLink.ts",
         "/src/links/httpBatchLink.ts",
+        "/src/links/httpLink.ts",
         "/src/links/wsLink.ts",
         "/src/links/httpBatchStreamLink.ts",
         "/src/links/httpSubscriptionLink.ts",
         "/src/internals/TRPCUntypedClient.ts"
       ],
-      "percent": 3.7,
+      "percent": 3.59,
       "reduction": 45.43
     },
     {
@@ -164,7 +164,7 @@
       "dependents": [
         "/src/index.ts"
       ],
-      "percent": 2.27,
+      "percent": 2.19,
       "reduction": 73.19
     },
     {
@@ -179,7 +179,7 @@
         "/src/links/splitLink.ts",
         "/src/internals/TRPCUntypedClient.ts"
       ],
-      "percent": 1.32,
+      "percent": 1.28,
       "reduction": 32.75
     },
     {
@@ -191,7 +191,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 1.16,
+      "percent": 1.13,
       "reduction": 44.95
     },
     {
@@ -205,7 +205,7 @@
       "dependents": [
         "/src/unstable-internals.ts"
       ],
-      "percent": 1.08,
+      "percent": 1.04,
       "reduction": 66.75
     },
     {
@@ -220,7 +220,7 @@
         "/src/index.ts",
         "/src/links/internals/httpUtils.ts"
       ],
-      "percent": 0.82,
+      "percent": 0.79,
       "reduction": 33.54
     },
     {
@@ -234,7 +234,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 0.63,
+      "percent": 0.61,
       "reduction": 15.17
     },
     {
@@ -249,7 +249,7 @@
         "/src/links/wsLink.ts",
         "/src/links/httpSubscriptionLink.ts"
       ],
-      "percent": 0.3,
+      "percent": 0.29,
       "reduction": 81.71
     },
     {
@@ -263,7 +263,7 @@
       "dependents": [
         "/src/index.ts"
       ],
-      "percent": 0.19,
+      "percent": 0.18,
       "reduction": 82.58
     },
     {

package/dist/links/wsLink.d.ts

@@ -46,6 +46,25 @@ export interface WebSocketClientOptions extends UrlOptionsWithConnectionParams {
          */
         closeMs: number;
     };
+    /**
+     * Send ping messages to the server and kill the connection if no pong message is returned
+     */
+    keepAlive?: {
+        /**
+         * @default false
+         */
+        enabled: boolean;
+        /**
+         * Send a ping message every this many milliseconds
+         * @default 5_000
+         */
+        intervalMs?: number;
+        /**
+         * Close the WebSocket after this many milliseconds if the server does not respond
+         * @default 1_000
+         */
+        pongTimeoutMs?: number;
+    };
 }
 export declare function createWSClient(opts: WebSocketClientOptions): {
     close: () => void;

package/dist/links/wsLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wsLink.d.ts","sourceRoot":"","sources":["../../src/links/wsLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAMhB,mBAAmB,EACpB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAInD,KAAK,gBAAgB,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,IAAI,mBAAmB,CAC7E,OAAO,EACP,gBAAgB,CAAC,OAAO,CAAC,CAC1B,CAAC;AAEF,KAAK,kBAAkB,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,IAAI,QAAQ,CACpE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,EAClC,eAAe,CAAC,OAAO,CAAC,CACzB,CAAC;AAEF,QAAA,MAAM,kBAAkB,iBAAkB,MAAM,WACoB,CAAC;AAErE,MAAM,WAAW,sBAAuB,SAAQ,8BAA8B;IAC5E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,SAAS,CAAC;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,IAAI,CAAC,EAAE;QACL;;;WAGG;QACH,OAAO,EAAE,OAAO,CAAC;QACjB;;;WAGG;QACH,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAOD,wBAAgB,cAAc,CAAC,IAAI,EAAE,sBAAsB;;oBAqUlC;QACrB,EAAE,EAAE,SAAS,CAAC;QACd,SAAS,yCAAa;QACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;KACjC,KAAG,aAAa;;YAxRX,MAAM;;eAGC,MAAM;YACT,SAAS;;eAGN,QAAQ;YACX,SAAS;;eAGN,YAAY;aACd,SAAS;;IA+UlB;;OAEG;;EAGN;AACD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAEpE,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,SAAS,IAAI;IAC5D,MAAM,EAAE,mBAAmB,CAAC;CAC7B,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AASlD;;GAEG;AACH,wBAAgB,MAAM,CAAC,OAAO,SAAS,SAAS,EAC9C,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAClC,QAAQ,CAAC,OAAO,CAAC,CA+CnB"}
+{"version":3,"file":"wsLink.d.ts","sourceRoot":"","sources":["../../src/links/wsLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAMhB,mBAAmB,EACpB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAInD,KAAK,gBAAgB,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,IAAI,mBAAmB,CAC7E,OAAO,EACP,gBAAgB,CAAC,OAAO,CAAC,CAC1B,CAAC;AAEF,KAAK,kBAAkB,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,IAAI,QAAQ,CACpE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,EAClC,eAAe,CAAC,OAAO,CAAC,CACzB,CAAC;AAEF,QAAA,MAAM,kBAAkB,iBAAkB,MAAM,WACoB,CAAC;AAErE,MAAM,WAAW,sBAAuB,SAAQ,8BAA8B;IAC5E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,SAAS,CAAC;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,IAAI,CAAC,EAAE;QACL;;;WAGG;QACH,OAAO,EAAE,OAAO,CAAC;QACjB;;;WAGG;QACH,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,SAAS,CAAC,EAAE;QACV;;WAEG;QACH,OAAO,EAAE,OAAO,CAAC;QACjB;;;WAGG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;;WAGG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH;AAOD,wBAAgB,cAAc,CAAC,IAAI,EAAE,sBAAsB;;oBAuXlC;QACrB,EAAE,EAAE,SAAS,CAAC;QACd,SAAS,yCAAa;QACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;KACjC,KAAG,aAAa;;YA1UX,MAAM;;eAGC,MAAM;YACT,SAAS;;eAGN,QAAQ;YACX,SAAS;;eAGN,YAAY;aACd,SAAS;;IAiYlB;;OAEG;;EAGN;AACD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAEpE,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,SAAS,IAAI;IAC5D,MAAM,EAAE,mBAAmB,CAAC;CAC7B,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AASlD;;GAEG;AACH,wBAAgB,MAAM,CAAC,OAAO,SAAS,SAAS,EAC9C,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAClC,QAAQ,CAAC,OAAO,CAAC,CA+CnB"}

package/dist/links/wsLink.js

@@ -120,12 +120,16 @@ function createWSClient(opts) {
         }, lazyOpts.closeMs);
     };
     function createConnection() {
+        let pingTimeout;
+        let pongTimeout;
         const self = {
             id: ++connectionIndex,
             state: 'connecting'
         };
         clearTimeout(lazyDisconnectTimer);
         const onCloseOrError = ()=>{
+            clearTimeout(pingTimeout);
+            clearTimeout(pongTimeout);
             if (self.state === 'closed') {
                 return;
             }
@@ -149,6 +153,15 @@ function createWSClient(opts) {
                 }
             }
         };
+        const onClose = (code)=>{
+            const wasOpen = self.state === 'open';
+            onCloseOrError();
+            if (wasOpen) {
+                opts.onClose?.({
+                    code
+                });
+            }
+        };
         const onError = (evt)=>{
             onCloseOrError();
             opts.onError?.(evt);
@@ -165,17 +178,44 @@ function createWSClient(opts) {
             clearTimeout(connectTimer);
             connectTimer = undefined;
             ws.addEventListener('open', ()=>{
-                run(async ()=>{
-                    /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
+                async function sendConnectionParams() {
+                    if (!opts.connectionParams) {
+                        return;
+                    }
+                    const connectMsg = {
+                        method: 'connectionParams',
+                        data: await urlWithConnectionParams.resultOf(opts.connectionParams)
+                    };
+                    ws.send(JSON.stringify(connectMsg));
+                }
+                function handleKeepAlive() {
+                    if (!opts.keepAlive?.enabled) {
                         return;
                     }
-                    if (opts.connectionParams) {
-                        const connectMsg = {
-                            method: 'connectionParams',
-                            data: await urlWithConnectionParams.resultOf(opts.connectionParams)
+                    const { pongTimeoutMs =1000 , intervalMs =5000  } = opts.keepAlive;
+                    function sendPing() {
+                        ws.send('PING');
+                        pongTimeout = setTimeout(()=>{
+                            ws.close(3001);
+                            onClose(3001);
+                        }, pongTimeoutMs);
+                        const onMessage = (msg)=>{
+                            if (msg.data === 'PONG') {
+                                clearTimeout(pongTimeout);
+                                pingTimeout = setTimeout(sendPing, intervalMs);
+                            }
+                            ws.removeEventListener('message', onMessage);
                         };
-                        ws.send(JSON.stringify(connectMsg));
+                        ws.addEventListener('message', onMessage);
+                    }
+                    pingTimeout = setTimeout(sendPing, intervalMs);
+                }
+                run(async ()=>{
+                    /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
+                        return;
                     }
+                    await sendConnectionParams();
+                    handleKeepAlive();
                     connectAttempt = 0;
                     self.state = 'open';
                     opts.onOpen?.();
@@ -224,6 +264,9 @@ function createWSClient(opts) {
                 }
             };
             ws.addEventListener('message', ({ data  })=>{
+                if (data === 'PONG') {
+                    return;
+                }
                 startLazyDisconnectTimer();
                 const msg = JSON.parse(data);
                 if ('method' in msg) {

package/dist/links/wsLink.mjs

@@ -118,12 +118,16 @@ function createWSClient(opts) {
         }, lazyOpts.closeMs);
     };
     function createConnection() {
+        let pingTimeout;
+        let pongTimeout;
         const self = {
             id: ++connectionIndex,
             state: 'connecting'
         };
         clearTimeout(lazyDisconnectTimer);
         const onCloseOrError = ()=>{
+            clearTimeout(pingTimeout);
+            clearTimeout(pongTimeout);
             if (self.state === 'closed') {
                 return;
             }
@@ -147,6 +151,15 @@ function createWSClient(opts) {
                 }
             }
         };
+        const onClose = (code)=>{
+            const wasOpen = self.state === 'open';
+            onCloseOrError();
+            if (wasOpen) {
+                opts.onClose?.({
+                    code
+                });
+            }
+        };
         const onError = (evt)=>{
             onCloseOrError();
             opts.onError?.(evt);
@@ -163,17 +176,44 @@ function createWSClient(opts) {
             clearTimeout(connectTimer);
             connectTimer = undefined;
             ws.addEventListener('open', ()=>{
-                run(async ()=>{
-                    /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
+                async function sendConnectionParams() {
+                    if (!opts.connectionParams) {
+                        return;
+                    }
+                    const connectMsg = {
+                        method: 'connectionParams',
+                        data: await resultOf(opts.connectionParams)
+                    };
+                    ws.send(JSON.stringify(connectMsg));
+                }
+                function handleKeepAlive() {
+                    if (!opts.keepAlive?.enabled) {
                         return;
                     }
-                    if (opts.connectionParams) {
-                        const connectMsg = {
-                            method: 'connectionParams',
-                            data: await resultOf(opts.connectionParams)
+                    const { pongTimeoutMs =1000 , intervalMs =5000  } = opts.keepAlive;
+                    function sendPing() {
+                        ws.send('PING');
+                        pongTimeout = setTimeout(()=>{
+                            ws.close(3001);
+                            onClose(3001);
+                        }, pongTimeoutMs);
+                        const onMessage = (msg)=>{
+                            if (msg.data === 'PONG') {
+                                clearTimeout(pongTimeout);
+                                pingTimeout = setTimeout(sendPing, intervalMs);
+                            }
+                            ws.removeEventListener('message', onMessage);
                         };
-                        ws.send(JSON.stringify(connectMsg));
+                        ws.addEventListener('message', onMessage);
+                    }
+                    pingTimeout = setTimeout(sendPing, intervalMs);
+                }
+                run(async ()=>{
+                    /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
+                        return;
                     }
+                    await sendConnectionParams();
+                    handleKeepAlive();
                     connectAttempt = 0;
                     self.state = 'open';
                     opts.onOpen?.();
@@ -222,6 +262,9 @@ function createWSClient(opts) {
                 }
             };
             ws.addEventListener('message', ({ data  })=>{
+                if (data === 'PONG') {
+                    return;
+                }
                 startLazyDisconnectTimer();
                 const msg = JSON.parse(data);
                 if ('method' in msg) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "11.0.0-rc.528+32e6b1285",
+  "version": "11.0.0-rc.530+d1e8f33f6",
   "description": "The tRPC client library",
   "author": "KATT",
   "license": "MIT",
@@ -76,10 +76,10 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@trpc/server": "11.0.0-rc.528+32e6b1285"
+    "@trpc/server": "11.0.0-rc.530+d1e8f33f6"
   },
   "devDependencies": {
-    "@trpc/server": "11.0.0-rc.528+32e6b1285",
+    "@trpc/server": "11.0.0-rc.530+d1e8f33f6",
     "@types/isomorphic-fetch": "^0.0.39",
     "@types/node": "^20.10.0",
     "eslint": "^8.57.0",
@@ -96,5 +96,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "32e6b1285dd844776d323ae23fbea638312d676e"
+  "gitHead": "d1e8f33f6bc6104003f4a0d4030c6cf306e6dec2"
 }

package/src/links/wsLink.ts

@@ -74,6 +74,25 @@ export interface WebSocketClientOptions extends UrlOptionsWithConnectionParams {
      */
     closeMs: number;
   };
+  /**
+   * Send ping messages to the server and kill the connection if no pong message is returned
+   */
+  keepAlive?: {
+    /**
+     * @default false
+     */
+    enabled: boolean;
+    /**
+     * Send a ping message every this many milliseconds
+     * @default 5_000
+     */
+    intervalMs?: number;
+    /**
+     * Close the WebSocket after this many milliseconds if the server does not respond
+     * @default 1_000
+     */
+    pongTimeoutMs?: number;
+  };
 }
 
 type LazyOptions = Required<NonNullable<WebSocketClientOptions['lazy']>>;
@@ -244,6 +263,8 @@ export function createWSClient(opts: WebSocketClientOptions) {
   };
 
   function createConnection(): Connection {
+    let pingTimeout: ReturnType<typeof setTimeout> | undefined;
+    let pongTimeout: ReturnType<typeof setTimeout> | undefined;
     const self: Connection = {
       id: ++connectionIndex,
       state: 'connecting',
@@ -252,6 +273,9 @@ export function createWSClient(opts: WebSocketClientOptions) {
     clearTimeout(lazyDisconnectTimer);
 
     const onCloseOrError = () => {
+      clearTimeout(pingTimeout);
+      clearTimeout(pongTimeout);
+
       if (self.state === 'closed') {
         return;
       }
@@ -283,6 +307,15 @@ export function createWSClient(opts: WebSocketClientOptions) {
       }
     };
 
+    const onClose = (code: number) => {
+      const wasOpen = self.state === 'open';
+      onCloseOrError();
+
+      if (wasOpen) {
+        opts.onClose?.({ code });
+      }
+    };
+
     const onError = (evt?: Event) => {
       onCloseOrError();
       opts.onError?.(evt);
@@ -302,19 +335,50 @@ export function createWSClient(opts: WebSocketClientOptions) {
       connectTimer = undefined;
 
       ws.addEventListener('open', () => {
+        async function sendConnectionParams() {
+          if (!opts.connectionParams) {
+            return;
+          }
+
+          const connectMsg: TRPCConnectionParamsMessage = {
+            method: 'connectionParams',
+            data: await resultOf(opts.connectionParams),
+          };
+
+          ws.send(JSON.stringify(connectMsg));
+        }
+        function handleKeepAlive() {
+          if (!opts.keepAlive?.enabled) {
+            return;
+          }
+          const { pongTimeoutMs = 1_000, intervalMs = 5_000 } = opts.keepAlive;
+
+          function sendPing() {
+            ws.send('PING');
+            pongTimeout = setTimeout(() => {
+              ws.close(3001);
+              onClose(3001);
+            }, pongTimeoutMs);
+            const onMessage = (msg: MessageEvent) => {
+              if (msg.data === 'PONG') {
+                clearTimeout(pongTimeout);
+                pingTimeout = setTimeout(sendPing, intervalMs);
+              }
+              ws.removeEventListener('message', onMessage);
+            };
+            ws.addEventListener('message', onMessage);
+          }
+          pingTimeout = setTimeout(sendPing, intervalMs);
+        }
         run(async () => {
           /* istanbul ignore next -- @preserve */
           if (activeConnection?.ws !== ws) {
             return;
           }
-          if (opts.connectionParams) {
-            const connectMsg: TRPCConnectionParamsMessage = {
-              method: 'connectionParams',
-              data: await resultOf(opts.connectionParams),
-            };
 
-            ws.send(JSON.stringify(connectMsg));
-          }
+          await sendConnectionParams();
+
+          handleKeepAlive();
 
           connectAttempt = 0;
           self.state = 'open';
@@ -378,7 +442,11 @@ export function createWSClient(opts: WebSocketClientOptions) {
           req.callbacks.complete();
         }
       };
+
       ws.addEventListener('message', ({ data }) => {
+        if (data === 'PONG') {
+          return;
+        }
         startLazyDisconnectTimer();
 
         const msg = JSON.parse(data) as TRPCClientIncomingMessage;
@@ -396,6 +464,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
 
       ws.addEventListener('close', ({ code }) => {
         const wasOpen = self.state === 'open';
+
         onCloseOrError();
 
         if (wasOpen) {