Merge pull request #2519 from appwrite/fix-realtime-logic

src/lib/components/backupRestoreBox.svelte

@@ -125,20 +125,18 @@
 
     onMount(() => {
         // fast path: don't subscribe if org is on a free plan or is self-hosted.
-        if (isSelfHosted || (isCloud && $organization.billingPlan === BillingPlan.FREE)) return;
+        if (isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE)) return;
 
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe('console', (response) => {
-                if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+        return realtime.forProject(page.params.region, 'console', (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
 
-                if (
-                    response.events.includes('archives.*') ||
-                    response.events.includes('restorations.*')
-                ) {
-                    updateOrAddItem(response.payload);
-                }
-            });
+            if (
+                response.events.includes('archives.*') ||
+                response.events.includes('restorations.*')
+            ) {
+                updateOrAddItem(response.payload);
+            }
+        });
     });
 </script>
 

src/lib/components/csvImportBox.svelte

@@ -2,8 +2,8 @@
     import { onMount } from 'svelte';
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { goto, invalidate } from '$app/navigation';
     import { getProjectId } from '$lib/helpers/project';
     import { addNotification } from '$lib/stores/notifications';
@@ -187,7 +187,7 @@
                 migrations.migrations.forEach(updateOrAddItem);
             });
 
-        return sdk.forConsoleIn(page.params.region).realtime.subscribe('console', (response) => {
+        return realtime.forConsole(page.params.region, 'console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;
             if (response.events.includes('migrations.*')) {
                 updateOrAddItem(response.payload as Payload);

src/lib/components/migrationBox.svelte

@@ -50,15 +50,14 @@
     })();
 
     onMount(() => {
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe<Models.Migration>(['console'], async (response) => {
-                if (!response.channels.includes(`projects.${getProjectId()}`)) return;
-                if (response.events.includes('migrations.*')) {
-                    if (response.payload.source === 'Backup') return;
-                    migration = response.payload;
-                }
-            });
+        return realtime.forProject(page.params.region, ['console'], async (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+            if (response.events.includes('migrations.*')) {
+                const payload = response.payload as Models.Migration;
+                if (payload.source === 'Backup') return;
+                migration = payload;
+            }
+        });
     });
 </script>
 

src/lib/stores/sdk.ts

@@ -42,7 +42,6 @@ import {
     SUBDOMAIN_TOR
 } from '$lib/constants';
 import { building } from '$app/environment';
-import { getProjectId } from '$lib/helpers/project';
 
 export function getApiEndpoint(region?: string): string {
     if (building) return '';
@@ -141,12 +140,32 @@ const sdkForProject = {
 };
 
 export const realtime = {
-    forProject(region: string, _projectId: string) {
+    forProject(
+        region: string,
+        channels: string | string[],
+        callback: AppwriteRealtimeResponseEvent
+    ) {
         const endpoint = getApiEndpoint(region);
         if (endpoint !== clientRealtime.config.endpoint) {
             clientRealtime.setEndpoint(endpoint);
         }
-        return clientRealtime;
+
+        // because uses a different client!
+        const realtime = new Realtime(clientRealtime);
+
+        return createRealtimeSubscription(realtime, channels, callback);
+    },
+
+    forConsole(
+        region: string,
+        channels: string | string[],
+        callback: AppwriteRealtimeResponseEvent
+    ): () => void {
+        const realtimeInstance = region
+            ? sdk.forConsoleIn(region).realtime
+            : sdk.forConsole.realtime;
+
+        return createRealtimeSubscription(realtimeInstance, channels, callback);
     }
 };
 
@@ -176,8 +195,8 @@ export const sdk = {
 };
 
 export enum RuleType {
-    DEPLOYMENT = 'deployment',
     API = 'api',
+    DEPLOYMENT = 'deployment',
     REDIRECT = 'redirect'
 }
 
@@ -191,11 +210,24 @@ export enum RuleTrigger {
     MANUAL = 'manual'
 }
 
-/**
- * Some type imports are broken on the SDK, this works correctly for the time being!
- */
-export type AppwriteRealtimeSubscription = Awaited<ReturnType<Realtime['subscribe']>>;
-
-export const createAdminClient = () => {
-    return new Client().setEndpoint(getApiEndpoint()).setMode('admin').setProject(getProjectId());
+export type RealtimeResponse = {
+    events: string[];
+    channels: string[];
+    timestamp: string;
+    payload: unknown;
 };
+
+export type AppwriteRealtimeResponseEvent = (response: RealtimeResponse) => void;
+
+function createRealtimeSubscription(
+    realtimeInstance: Realtime,
+    channels: string | string[],
+    callback: AppwriteRealtimeResponseEvent
+): () => void {
+    const channelsArray = Array.isArray(channels) ? channels : [channels];
+    const subscriptionPromise = realtimeInstance.subscribe(channelsArray, callback);
+
+    return () => {
+        subscriptionPromise.then((sub) => sub.close());
+    };
+}

src/routes/(console)/project-[region]-[project]/+layout.svelte

@@ -27,15 +27,13 @@
     import CsvImportBox from '$lib/components/csvImportBox.svelte';
 
     onMount(() => {
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe(['project', 'console'], (response) => {
-                if (response.events.includes('stats.connections')) {
-                    for (const [projectId, value] of Object.entries(response.payload)) {
-                        stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);
-                    }
+        return realtime.forProject(page.params.region, ['project', 'console'], (response) => {
+            if (response.events.includes('stats.connections')) {
+                for (const [projectId, value] of Object.entries(response.payload)) {
+                    stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);
                 }
-            });
+            }
+        });
     });
 
     $: $registerCommands([

src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte

@@ -161,19 +161,14 @@
     };
 
     onMount(() => {
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe(['project', 'console'], (response) => {
-                // fast path return.
-                if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+        return realtime.forProject(page.params.region, ['project', 'console'], (response) => {
+            // fast path return.
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
 
-                if (
-                    response.events.includes('archives.*') ||
-                    response.events.includes('policies.*')
-                ) {
-                    invalidate(Dependencies.BACKUPS);
-                }
-            });
+            if (response.events.includes('archives.*') || response.events.includes('policies.*')) {
+                invalidate(Dependencies.BACKUPS);
+            }
+        });
     });
 </script>
 

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte

@@ -20,7 +20,7 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { realtime, sdk } from '$lib/stores/sdk';
+    import { type RealtimeResponse, realtime, sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import {
         table,
@@ -66,7 +66,6 @@
 
     import IndexesSuggestions from '../(suggestions)/indexes.svelte';
     import { showIndexesSuggestions, tableColumnSuggestions } from '../(suggestions)';
-    import type { RealtimeResponseEvent } from '@appwrite.io/console';
 
     let editRow: EditRow;
     let editRelatedRow: EditRelatedRow;
@@ -83,35 +82,33 @@
      */
     let isWaterfallFromFaker = false;
 
-    let columnCreationHandler: ((response: RealtimeResponseEvent<unknown>) => void) | null = null;
+    let columnCreationHandler: ((response: RealtimeResponse) => void) | null = null;
 
     onMount(() => {
         expandTabs.set(preferences.getKey('tableHeaderExpanded', true));
 
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe(['project', 'console'], (response) => {
-                if (
-                    response.events.includes('databases.*.tables.*.columns.*') ||
-                    response.events.includes('databases.*.tables.*.indexes.*')
-                ) {
-                    if (isWaterfallFromFaker) {
-                        columnCreationHandler?.(response);
-                    }
-
-                    // don't invalidate when -
-                    // 1. from faker
-                    // 2. ai columns creation
-                    // 3. ai indexes creation
-                    if (
-                        !isWaterfallFromFaker &&
-                        !$showIndexesSuggestions &&
-                        !$tableColumnSuggestions.table
-                    ) {
-                        invalidate(Dependencies.TABLE);
-                    }
+        return realtime.forProject(page.params.region, ['project', 'console'], (response) => {
+            if (
+                response.events.includes('databases.*.tables.*.columns.*') ||
+                response.events.includes('databases.*.tables.*.indexes.*')
+            ) {
+                if (isWaterfallFromFaker) {
+                    columnCreationHandler?.(response);
                 }
-            });
+
+                // don't invalidate when -
+                // 1. from faker
+                // 2. ai columns creation
+                // 3. ai indexes creation
+                if (
+                    !isWaterfallFromFaker &&
+                    !$showIndexesSuggestions &&
+                    !$tableColumnSuggestions.table
+                ) {
+                    invalidate(Dependencies.TABLE);
+                }
+            }
+        });
     });
 
     // TODO: use route ids instead of pathname
@@ -268,7 +265,7 @@
         const availableColumns = new Set<string>();
         const waitPromise = new Promise<void>((resolve) => (resolvePromise = resolve));
 
-        columnCreationHandler = (response) => {
+        columnCreationHandler = (response: RealtimeResponse) => {
             const { events, payload } = response;
 
             if (

src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte

@@ -21,30 +21,29 @@
 
     onMount(() => {
         let previousStatus = null;
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe<Models.Deployment>('console', (message) => {
-                if (
-                    message.payload.status !== 'ready' &&
-                    previousStatus === message.payload.status
-                ) {
-                    return;
-                }
-                previousStatus = message.payload.status;
-                if (message.events.includes('functions.*.deployments.*.create')) {
-                    invalidate(Dependencies.DEPLOYMENTS);
-                    return;
-                }
-                if (message.events.includes('functions.*.deployments.*.update')) {
-                    invalidate(Dependencies.DEPLOYMENTS);
-                    invalidate(Dependencies.FUNCTION);
-                    return;
-                }
-                if (message.events.includes('functions.*.deployments.*.delete')) {
-                    invalidate(Dependencies.DEPLOYMENTS);
-                    return;
-                }
-            });
+        return realtime.forProject(page.params.region, 'console', (response) => {
+            const payload = response.payload as Models.Deployment;
+            if (payload.status !== 'ready' && previousStatus === payload.status) {
+                return;
+            }
+
+            previousStatus = payload.status;
+            if (response.events.includes('functions.*.deployments.*.create')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                return;
+            }
+
+            if (response.events.includes('functions.*.deployments.*.update')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                invalidate(Dependencies.FUNCTION);
+                return;
+            }
+
+            if (response.events.includes('functions.*.deployments.*.delete')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                return;
+            }
+        });
     });
 
     $: $registerCommands([

src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { type Models } from '@appwrite.io/console';
     import { page } from '$app/state';
@@ -44,24 +44,18 @@
     let showRedeploy = false;
 
     onMount(() => {
-        const unsubscribe = sdk.forConsole.client.subscribe<Models.Deployment>(
-            'console',
-            (message) => {
-                if (
-                    message.events.includes(
-                        `functions.${page.params.function}.deployments.${page.params.deployment}.update`
-                    )
-                ) {
-                    if (message.payload.status === 'ready') {
-                        invalidate(Dependencies.DEPLOYMENT);
-                    }
+        return realtime.forProject(page.params.region, 'console', (response) => {
+            if (
+                response.events.includes(
+                    `functions.${page.params.function}.deployments.${page.params.deployment}.update`
+                )
+            ) {
+                const payload = response.payload as Models.Deployment;
+                if (payload.status === 'ready') {
+                    invalidate(Dependencies.DEPLOYMENT);
                 }
             }
-        );
-
-        return () => {
-            unsubscribe();
-        };
+        });
     });
 
     export function badgeTypeDeployment(status: string) {

src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+layout.svelte

@@ -1,18 +1,16 @@
 <script>
-    import { invalidate } from '$app/navigation';
-    import { page } from '$app/state';
-    import { Dependencies } from '$lib/constants';
-    import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { realtime } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     onMount(() => {
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe('functions.*.executions', (response) => {
-                if (response.events.includes('functions.*.executions.*')) {
-                    invalidate(Dependencies.EXECUTIONS);
-                }
-            });
+        return realtime.forProject(page.params.region, 'functions.*.executions', (response) => {
+            if (response.events.includes('functions.*.executions.*')) {
+                invalidate(Dependencies.EXECUTIONS);
+            }
+        });
     });
 </script>
 

src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte

@@ -4,7 +4,7 @@
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { Container, ResponsiveContainerHeader } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { base } from '$app/paths';
@@ -12,11 +12,13 @@
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import Table from './table.svelte';
     import { columns } from './store';
+    import type { PageProps } from './$types';
+    import { page } from '$app/state';
 
-    export let data;
+    let { data }: PageProps = $props();
 
     onMount(() => {
-        return sdk.forConsole.realtime.subscribe('console', (response) => {
+        return realtime.forConsole(page.params.region, 'console', (response) => {
             if (response.events.includes('functions.*.executions.*')) {
                 invalidate(Dependencies.EXECUTIONS);
             }

src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte

@@ -17,7 +17,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -63,8 +63,10 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
                 message: 'Platform created.'
             });
 
-            invalidate(Dependencies.PROJECT);
-            invalidate(Dependencies.PLATFORMS);
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -81,20 +83,17 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
     }
 
     onMount(() => {
-        let subscription: AppwriteRealtimeSubscription;
-        sdk.forConsole.realtime
-            .subscribe('console', (response) => {
-                if (response.events.includes(`projects.${projectId}.ping`)) {
-                    connectionSuccessful = true;
-                    invalidate(Dependencies.ORGANIZATION);
-                    invalidate(Dependencies.PROJECT);
-                    subscription?.close();
-                }
-            })
-            .then((realtime) => (subscription = realtime));
+        const unsubscribe = realtime.forConsole(page.params.region, 'console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
 
         return () => {
-            subscription?.close();
+            unsubscribe();
             resetPlatformStore();
         };
     });

src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte

@@ -18,7 +18,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -72,8 +72,10 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
                 message: 'Platform created.'
             });
 
-            invalidate(Dependencies.PROJECT);
-            invalidate(Dependencies.PLATFORMS);
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -90,20 +92,17 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
     }
 
     onMount(() => {
-        let subscription: AppwriteRealtimeSubscription;
-        sdk.forConsole.realtime
-            .subscribe('console', (response) => {
-                if (response.events.includes(`projects.${projectId}.ping`)) {
-                    connectionSuccessful = true;
-                    invalidate(Dependencies.ORGANIZATION);
-                    invalidate(Dependencies.PROJECT);
-                    subscription?.close();
-                }
-            })
-            .then((realtime) => (subscription = realtime));
+        const unsubscribe = realtime.forConsole(page.params.region, 'console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
 
         return () => {
-            subscription?.close();
+            unsubscribe();
             resetPlatformStore();
         };
     });

src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte

@@ -18,7 +18,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -138,8 +138,10 @@
                 message: 'Platform created.'
             });
 
-            invalidate(Dependencies.PROJECT);
-            invalidate(Dependencies.PLATFORMS);
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -156,20 +158,17 @@
     }
 
     onMount(() => {
-        let subscription: AppwriteRealtimeSubscription;
-        sdk.forConsole.realtime
-            .subscribe('console', (response) => {
-                if (response.events.includes(`projects.${projectId}.ping`)) {
-                    connectionSuccessful = true;
-                    invalidate(Dependencies.ORGANIZATION);
-                    invalidate(Dependencies.PROJECT);
-                    subscription?.close();
-                }
-            })
-            .then((realtime) => (subscription = realtime));
+        const unsubscribe = realtime.forConsole(page.params.region, 'console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
 
         return () => {
-            subscription?.close();
+            unsubscribe();
             resetPlatformStore();
         };
     });

src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte

@@ -18,7 +18,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -99,8 +99,10 @@ EXPO_PUBLIC_APPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.p
                 message: 'Platform created.'
             });
 
-            invalidate(Dependencies.PROJECT);
-            invalidate(Dependencies.PLATFORMS);
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -117,20 +119,17 @@ EXPO_PUBLIC_APPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.p
     }
 
     onMount(() => {
-        let subscription: AppwriteRealtimeSubscription;
-        sdk.forConsole.realtime
-            .subscribe('console', (response) => {
-                if (response.events.includes(`projects.${projectId}.ping`)) {
-                    connectionSuccessful = true;
-                    invalidate(Dependencies.ORGANIZATION);
-                    invalidate(Dependencies.PROJECT);
-                    subscription?.close();
-                }
-            })
-            .then((realtime) => (subscription = realtime));
+        const unsubscribe = realtime.forConsole(page.params.region, 'console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
 
         return () => {
-            subscription?.close();
+            unsubscribe();
             resetPlatformStore();
         };
     });

src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte

@@ -28,7 +28,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -184,8 +184,10 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                 message: 'Platform created.'
             });
 
-            invalidate(Dependencies.PROJECT);
-            invalidate(Dependencies.PLATFORMS);
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -202,21 +204,18 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
     }
 
     onMount(() => {
-        let subscription: AppwriteRealtimeSubscription;
-        sdk.forConsole.realtime
-            .subscribe('console', (response) => {
-                if (response.events.includes(`projects.${projectId}.ping`)) {
-                    connectionSuccessful = true;
-                    invalidate(Dependencies.ORGANIZATION);
-                    invalidate(Dependencies.PROJECT);
-                    subscription?.close();
-                }
-            })
-            .then((realtime) => (subscription = realtime));
+        const unsubscribe = realtime.forConsole(page.params.region, 'console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`)) {
+                connectionSuccessful = true;
+                invalidate(Dependencies.ORGANIZATION);
+                invalidate(Dependencies.PROJECT);
+                unsubscribe();
+            }
+        });
 
         return () => {
+            unsubscribe();
             resetPlatformStore();
-            subscription?.close();
         };
     });
 </script>

src/routes/(console)/project-[region]-[project]/settings/migrations/+page.svelte

@@ -38,13 +38,11 @@
     let migration: Models.Migration = null;
 
     onMount(() => {
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe(['project', 'console'], (response) => {
-                if (response.events.includes('migrations.*')) {
-                    invalidate(Dependencies.MIGRATIONS);
-                }
-            });
+        return realtime.forProject(page.params.region, ['project', 'console'], (response) => {
+            if (response.events.includes('migrations.*')) {
+                invalidate(Dependencies.MIGRATIONS);
+            }
+        });
     });
 
     $: $registerCommands([

src/routes/(console)/project-[region]-[project]/sites/+page.svelte

@@ -25,7 +25,8 @@
     import { onMount } from 'svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
+    import { page } from '$app/state';
 
     export let data;
 
@@ -49,7 +50,7 @@
     $updateCommandGroupRanks({ sites: 1000 });
 
     onMount(() => {
-        return sdk.forConsole.realtime.subscribe('console', (response) => {
+        return realtime.forConsole(page.params.region, 'console', (response) => {
             if (response.events.includes('sites.*')) {
                 invalidate(Dependencies.SITES);
             }

src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte

@@ -7,42 +7,36 @@
     import Aside from '../aside.svelte';
     import Logs from '../../(components)/logs.svelte';
     import { Copy, SvgIcon } from '$lib/components';
-    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
     import { onMount } from 'svelte';
     import { getFrameworkIcon } from '$lib/stores/sites';
+    import type { Models } from '@appwrite.io/console';
 
     let { data } = $props();
 
     let deployment = $state(data.deployment);
 
     onMount(() => {
-        let subscription: AppwriteRealtimeSubscription;
-        sdk.forConsoleIn(page.params.region)
-            .realtime.subscribe('console', async (response) => {
-                if (
-                    response.events.includes(
-                        `sites.${data.site.$id}.deployments.${data.deployment.$id}.update`
-                    )
-                ) {
-                    deployment = response.payload;
-                    if (response.payload.status === 'ready') {
-                        const resolvedUrl = resolve(
-                            '/(console)/project-[region]-[project]/sites/create-site/finish',
-                            {
-                                region: page.params.region,
-                                project: page.params.project
-                            }
-                        );
-                        await goto(`${resolvedUrl}?site=${data.site.$id}`);
-                    }
+        return realtime.forConsole(page.params.region, 'console', async (response) => {
+            if (
+                response.events.includes(
+                    `sites.${data.site.$id}.deployments.${data.deployment.$id}.update`
+                )
+            ) {
+                deployment = response.payload as Models.Deployment;
+                if (deployment.status === 'ready') {
+                    const resolvedUrl = resolve(
+                        '/(console)/project-[region]-[project]/sites/create-site/finish',
+                        {
+                            region: page.params.region,
+                            project: page.params.project
+                        }
+                    );
+                    await goto(`${resolvedUrl}?site=${data.site.$id}`);
                 }
-            })
-            .then((realtime) => (subscription = realtime));
-
-        return () => {
-            subscription?.close();
-        };
+            }
+        });
     });
 </script>
 

src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte

@@ -7,19 +7,21 @@
     import { Button } from '$lib/elements/forms';
     import InstantRollbackDomain from './instantRollbackModal.svelte';
     import { app } from '$lib/stores/app';
-    import { sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { onMount } from 'svelte';
     import { page } from '$app/state';
     import { base } from '$app/paths';
+    import type { PageProps } from './$types';
     import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
 
-    export let data;
-    let showRollback = false;
+    let { data }: PageProps = $props();
+
+    let showRollback = $state(false);
 
     onMount(() => {
-        return sdk.forConsole.realtime.subscribe('console', (response) => {
+        return realtime.forConsole(page.params.region, 'console', (response) => {
             if (response.events.includes(`sites.${page.params.site}.deployments.*`)) {
                 invalidate(Dependencies.SITE);
             }

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { page } from '$app/state';
-    import { sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { invalidate, goto } from '$app/navigation';
     import { registerCommands } from '$lib/commandCenter';
@@ -13,11 +13,14 @@
 
     onMount(() => {
         let previousStatus: string = null;
-        return sdk.forConsole.realtime.subscribe<Models.Deployment>('console', (message) => {
-            if (message.payload.status !== 'ready' && previousStatus === message.payload.status) {
+        return realtime.forConsole(page.params.region, 'console', (message) => {
+            const payload = message.payload as Models.Deployment;
+            if (payload.status !== 'ready' && previousStatus === payload.status) {
                 return;
             }
-            previousStatus = message.payload.status;
+
+            previousStatus = payload.status;
+
             if (message.events.includes('sites.*.deployments.*.create')) {
                 invalidate(Dependencies.DEPLOYMENTS);
 

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte

@@ -13,7 +13,7 @@
     import DeploymentMetrics from './deploymentMetrics.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import CreateCliModal from './createCliModal.svelte';
@@ -32,11 +32,7 @@
     let showAlert = true;
 
     onMount(() => {
-        if (page.url.searchParams.has('createDeployment')) {
-            showConnectRepo = true;
-        }
-
-        return sdk.forConsole.realtime.subscribe('console', (response) => {
+        return realtime.forConsole(page.params.region, 'console', (response) => {
             if (response.events.includes('sites.*.deployments.*')) {
                 invalidate(Dependencies.DEPLOYMENTS);
             }

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import SiteCard from '../../../(components)/siteCard.svelte';
     import Logs, { badgeTypeDeployment } from '../../../(components)/logs.svelte';
@@ -31,22 +31,15 @@
     let showCancel = $state(false);
 
     onMount(() => {
-        let subscription: AppwriteRealtimeSubscription;
-        sdk.forConsoleIn(page.params.region)
-            .realtime.subscribe('console', async (response) => {
-                if (
-                    response.events.includes(
-                        `sites.${page.params.site}.deployments.${page.params.deployment}.update`
-                    )
-                ) {
-                    await invalidate(Dependencies.DEPLOYMENT);
-                }
-            })
-            .then((realtime) => (subscription = realtime));
-
-        return () => {
-            subscription?.close();
-        };
+        return realtime.forConsole(page.params.region, 'console', async (response) => {
+            if (
+                response.events.includes(
+                    `sites.${page.params.site}.deployments.${page.params.deployment}.update`
+                )
+            ) {
+                await invalidate(Dependencies.DEPLOYMENT);
+            }
+        });
     });
 </script>
 

src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/+page.svelte

@@ -4,16 +4,17 @@
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { Container, ResponsiveContainerHeader } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import Table from './table.svelte';
     import { Card, Empty } from '@appwrite.io/pink-svelte';
     import { columns } from './store';
+    import { page } from '$app/state';
 
     export let data;
 
     onMount(() => {
-        return sdk.forConsole.realtime.subscribe('console', (response) => {
+        return realtime.forConsole(page.params.region, 'console', (response) => {
             if (response.events.includes('sites.*.executions.*')) {
                 invalidate(Dependencies.EXECUTIONS);
             }