@techfinityedge/koolbase-react-native 4.0.0 → 4.2.1

package/README.md

@@ -297,15 +297,26 @@ await Koolbase.storage.delete('avatars', `user-${userId}.jpg`);
 
 ## Realtime
 
-```typescript
+Subscribe to live changes on a collection. Uses the signed-in user's session, so
+subscribe after login. Streams `created`, `updated`, and `deleted` events for
+collections whose read rule is `public` or `authenticated`.
+
+```ts
 const unsubscribe = Koolbase.realtime.subscribe('messages', (event) => {
-  if (event.type === 'created') setMessages(prev => [event.record, ...prev]);
+  // event.type -> 'created' | 'updated' | 'deleted'
+  if (event.type === 'deleted') {
+    console.log('deleted', event.recordId);   // recordId on deletes
+  } else {
+    console.log(event.type, event.record!.data); // record on created/updated
+  }
 });
 
-// Cleanup
 unsubscribe();
 ```
 
+The socket opens lazily, is shared, and reconnects automatically. The project is
+taken from the user's session..
+
 ---
 
 ## Functions

package/dist/index.js

@@ -69,7 +69,7 @@ exports.Koolbase = {
         _auth = new auth_1.KoolbaseAuth(config);
         _db = new database_1.KoolbaseDatabase(config, () => _auth?.currentUser?.id ?? null, () => _auth?.validAccessToken() ?? Promise.resolve(null));
         _storage = new storage_1.KoolbaseStorage(config, () => _auth?.validAccessToken() ?? Promise.resolve(null));
-        _realtime = new realtime_1.KoolbaseRealtime(config);
+        _realtime = new realtime_1.KoolbaseRealtime(config, () => _auth?.validAccessToken() ?? Promise.resolve(null));
         _functions = new functions_1.KoolbaseFunctions(config, () => _auth?.validAccessToken() ?? Promise.resolve(null));
         _flags = new flags_1.KoolbaseFlags(config, 'rn-device');
         _codePush = new code_push_1.KoolbaseCodePush(config, config.codePushChannel ?? 'stable');

package/dist/realtime.d.ts

@@ -1,11 +1,19 @@
 import { KoolbaseConfig, RealtimeCallback } from './types';
+type TokenProvider = () => Promise<string | null>;
 export declare class KoolbaseRealtime {
     private config;
+    private getToken;
     private ws;
+    private projectId;
     private listeners;
     private reconnectTimer;
-    constructor(config: KoolbaseConfig);
+    private connecting;
+    constructor(config: KoolbaseConfig, getToken: TokenProvider);
     subscribe(collection: string, callback: RealtimeCallback): () => void;
     private connect;
+    private sendSubscribe;
+    private sendUnsubscribe;
+    private scheduleReconnect;
     disconnect(): void;
 }
+export {};

package/dist/realtime.js

@@ -2,58 +2,146 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoolbaseRealtime = void 0;
 const record_1 = require("./record");
+const EVENT_TYPE_MAP = {
+    'db.record.created': 'created',
+    'db.record.updated': 'updated',
+    'db.record.deleted': 'deleted',
+};
+function projectIdFromToken(token) {
+    try {
+        const part = token.split('.')[1];
+        if (!part)
+            return null;
+        const b64 = part.replace(/-/g, '+').replace(/_/g, '/');
+        const g = globalThis;
+        let json;
+        if (typeof g.atob === 'function') {
+            const bin = g.atob(b64);
+            json = decodeURIComponent(bin.split('').map((c) => '%' + c.charCodeAt(0).toString(16).padStart(2, '0')).join(''));
+        }
+        else if (g.Buffer) {
+            json = g.Buffer.from(b64, 'base64').toString('utf8');
+        }
+        else {
+            return null;
+        }
+        return JSON.parse(json).project_id ?? null;
+    }
+    catch {
+        return null;
+    }
+}
 class KoolbaseRealtime {
-    constructor(config) {
+    constructor(config, getToken) {
         this.ws = null;
+        this.projectId = null;
         this.listeners = new Map();
         this.reconnectTimer = null;
+        this.connecting = false;
         this.config = config;
+        this.getToken = getToken;
     }
     subscribe(collection, callback) {
-        if (!this.listeners.has(collection)) {
+        if (!this.listeners.has(collection))
             this.listeners.set(collection, []);
-        }
         this.listeners.get(collection).push(callback);
-        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-            this.connect();
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.sendSubscribe(collection);
+        }
+        else {
+            void this.connect();
         }
-        // Return unsubscribe function
         return () => {
             const callbacks = this.listeners.get(collection) ?? [];
-            const index = callbacks.indexOf(callback);
-            if (index > -1)
-                callbacks.splice(index, 1);
+            const i = callbacks.indexOf(callback);
+            if (i > -1)
+                callbacks.splice(i, 1);
+            if (callbacks.length === 0) {
+                this.listeners.delete(collection);
+                this.sendUnsubscribe(collection);
+            }
         };
     }
-    connect() {
-        const wsUrl = this.config.baseUrl
-            .replace('https://', 'wss://')
-            .replace('http://', 'ws://');
-        this.ws = new WebSocket(`${wsUrl}/v1/sdk/realtime?key=${this.config.publicKey}`);
-        this.ws.onmessage = (event) => {
+    async connect() {
+        if (this.connecting)
+            return;
+        if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING))
+            return;
+        const token = await this.getToken();
+        if (!token) {
+            this.scheduleReconnect(); // sign-in may be in flight
+            return;
+        }
+        this.projectId = projectIdFromToken(token);
+        this.connecting = true;
+        const wsUrl = this.config.baseUrl.replace('https://', 'wss://').replace('http://', 'ws://');
+        const ws = new WebSocket(`${wsUrl}/v1/realtime/ws?token=${encodeURIComponent(token)}`);
+        this.ws = ws;
+        ws.onopen = () => {
+            this.connecting = false;
+            for (const collection of this.listeners.keys())
+                this.sendSubscribe(collection); // (re)subscribe all
+        };
+        ws.onmessage = (event) => {
+            let raw;
             try {
-                const raw = JSON.parse(event.data);
-                if (!raw || !raw.record)
-                    return;
-                const msg = {
-                    type: raw.type,
-                    collection: raw.collection,
-                    record: (0, record_1.recordFromWire)(raw.record),
-                };
-                const callbacks = this.listeners.get(msg.collection) ?? [];
-                callbacks.forEach((cb) => cb(msg));
+                raw = JSON.parse(event.data);
+            }
+            catch {
+                return;
+            }
+            const mapped = EVENT_TYPE_MAP[raw?.type];
+            if (!mapped)
+                return; // ignore subscribed / unsubscribed / error / unknown
+            const payload = raw.payload;
+            if (!payload || !payload.collection)
+                return;
+            let msg;
+            if (mapped === 'deleted') {
+                msg = { type: 'deleted', collection: payload.collection, recordId: payload.record_id };
+            }
+            else if (payload.record) {
+                msg = { type: mapped, collection: payload.collection, record: (0, record_1.recordFromWire)(payload.record) };
+            }
+            else {
+                return;
             }
-            catch (_) { }
+            (this.listeners.get(payload.collection) ?? []).forEach((cb) => cb(msg));
         };
-        this.ws.onclose = () => {
-            this.reconnectTimer = setTimeout(() => this.connect(), 3000);
+        ws.onclose = () => {
+            this.connecting = false;
+            if (this.ws === ws)
+                this.ws = null;
+            this.scheduleReconnect();
         };
+        ws.onerror = () => { };
+    }
+    sendSubscribe(collection) {
+        if (!this.projectId || !this.ws || this.ws.readyState !== WebSocket.OPEN)
+            return;
+        this.ws.send(JSON.stringify({ action: 'subscribe', project_id: this.projectId, collection }));
+    }
+    sendUnsubscribe(collection) {
+        if (!this.projectId || !this.ws || this.ws.readyState !== WebSocket.OPEN)
+            return;
+        this.ws.send(JSON.stringify({ action: 'unsubscribe', project_id: this.projectId, collection }));
+    }
+    scheduleReconnect() {
+        if (this.listeners.size === 0 || this.reconnectTimer)
+            return;
+        this.reconnectTimer = setTimeout(() => {
+            this.reconnectTimer = null;
+            void this.connect();
+        }, 3000);
     }
     disconnect() {
-        if (this.reconnectTimer)
+        if (this.reconnectTimer) {
             clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
         this.ws?.close();
         this.ws = null;
+        this.projectId = null;
         this.listeners.clear();
     }
 }

package/dist/types.d.ts

@@ -160,7 +160,8 @@ export interface UploadOptions {
 export interface RealtimeEvent {
     type: 'created' | 'updated' | 'deleted';
     collection: string;
-    record: KoolbaseRecord;
+    record?: KoolbaseRecord;
+    recordId?: string;
 }
 export type RealtimeCallback = (event: RealtimeEvent) => void;
 export interface BootstrapPayload {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@techfinityedge/koolbase-react-native",
-  "version": "4.0.0",
-  "description": "React Native SDK for Koolbase \u2014 auth, database, storage, realtime, feature flags, and functions in one package.",
+  "version": "4.2.1",
+  "description": "React Native SDK for Koolbase — auth, database, storage, realtime, feature flags, and functions in one package.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [