feat: realtime heartbeat for react native

Author: loks0n

templates/react-native/src/client.ts.twig

@@ -49,7 +49,17 @@ type RealtimeRequestAuthenticate = {
 
 type Realtime = {
     socket?: WebSocket;
+
+    /**
+     * Timeout for reconnect operations.
+     */
     timeout?: number;
+
+    /**
+     * Heartbeat interval for the realtime connection.
+    */
+    heartbeat?: number;
+
     url?: string;
     lastMessage?: RealtimeResponse;
     channels: Set<string>;
@@ -63,6 +73,7 @@ type Realtime = {
     getTimeout: () => number;
     connect: () => void;
     createSocket: () => void;
+    createHeartbeat: () => void;
     cleanUp: (channels: string[]) => void;
     onMessage: (event: MessageEvent) => void;
 }
@@ -174,6 +185,7 @@ class Client {
     private realtime: Realtime = {
         socket: undefined,
         timeout: undefined,
+        heartbeat: undefined,
         url: '',
         channels: new Set(),
         subscriptions: new Map(),
@@ -199,6 +211,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;
@@ -237,6 +260,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 (