feat: implement heartbeat

templates/web/src/client.ts.twig

@@ -19,9 +19,9 @@ type Headers = {
  */
 type RealtimeResponse = {
     /**
-     * Type of the response: 'error', 'event', 'connected', or 'response'.
+     * Type of the response: 'error', 'event', 'connected', 'pong', or 'response'.
      */
-    type: 'error' | 'event' | 'connected' | 'response';
+    type: 'error' | 'event' | 'connected' | 'response' | 'pong';
 
     /**
      * Data associated with the response based on the response type.
@@ -139,9 +139,14 @@ type Realtime = {
     socket?: WebSocket;
 
     /**
-     * Timeout duration for communication operations.
+     * Timeout for reconnect operations.
      */
-    timeout?: number;
+    timeout?: ReturnType<typeof setTimeout>;
+
+    /**
+     * Heartbeat interval for the realtime connection.
+    */
+    heartbeat?: ReturnType<typeof setTimeout>;
 
     /**
      * URL for establishing the WebSocket connection.
@@ -196,6 +201,11 @@ type Realtime = {
      */
     createSocket: () => void;
 
+    /**
+     * Function to create a new heartbeat interval.
+     */
+    createHeartbeat: () => void;
+
     /**
      * Function to clean up resources associated with specified channels.
      *
@@ -359,6 +369,7 @@ class Client {
     private realtime: Realtime = {
         socket: undefined,
         timeout: undefined,
+        heartbeat: undefined,
         url: '',
         channels: new Set(),
         subscriptions: new Map(),
@@ -384,6 +395,17 @@ class Client {
                     return 60_000;
             }
         },
+        createHeartbeat: () => {
+            if (this.realtime.heartbeat) {
+                clearTimeout(this.realtime.heartbeat);
+            }
+
+            this.realtime.heartbeat = window?.setInterval(() => {
+                this.realtime.socket?.send(JSON.stringify({
+                    type: 'ping'
+                }));
+            }, 20_000);
+        },
         createSocket: () => {
             if (this.realtime.channels.size < 1) {
                 this.realtime.reconnect = false;
@@ -417,6 +439,7 @@ class Client {
                 this.realtime.socket.addEventListener('message', this.realtime.onMessage);
                 this.realtime.socket.addEventListener('open', _event => {
                     this.realtime.reconnectAttempts = 0;
+                    this.realtime.createHeartbeat();
                 });
                 this.realtime.socket.addEventListener('close', event => {
                     if (
@@ -634,6 +657,21 @@ class Client {
         return response;
     }
 
+    async redirect(method: string, url: URL, headers: Headers = {}, params: Payload = {}): Promise<string> {
+        const { uri, options } = this.prepareRequest(method, url, headers, params);
+
+        const response = await fetch(uri, {
+            ...options,
+            redirect: 'manual'
+        });
+
+        if (response.status !== 301 && response.status !== 302) {
+            throw new {{spec.title | caseUcfirst}}Exception('Invalid redirect', response.status);
+        }
+
+        return response.headers.get('location') || '';
+    }
+
     async ping(): Promise<string> {
         return this.call('GET', new URL(this.config.endpoint + '/ping'));
     }