feat: add Realtime Channel helper methods

Author: w3b6x9

package-lock.json

@@ -40,7 +40,7 @@
     "@supabase/functions-js": "^1.3.3",
     "@supabase/gotrue-js": "^1.23.0-next.8",
     "@supabase/postgrest-js": "^1.0.0-next.2",
-    "@supabase/realtime-js": "^1.7.3",
+    "@supabase/realtime-js": "^1.8.0-next.13",
     "@supabase/storage-js": "^1.8.0-next.1",
     "cross-fetch": "^3.1.5"
   },

package.json

@@ -11,7 +11,7 @@ import { DEFAULT_HEADERS } from './lib/constants'
 import { fetchWithAuth } from './lib/fetch'
 import { stripTrailingSlash } from './lib/helpers'
 import { SupabaseAuthClient } from './lib/SupabaseAuthClient'
-import { SupabaseRealtimeClient } from './lib/SupabaseRealtimeClient'
+import { SupabaseRealtimeChannel } from './lib/SupabaseRealtimeChannel'
 import { Fetch, GenericSchema, SupabaseClientOptions, SupabaseAuthClientOptions } from './lib/types'
 
 const DEFAULT_OPTIONS = {
@@ -180,12 +180,12 @@ export default class SupabaseClient<
   /**
    * Creates a channel with Broadcast and Presence.
    */
-  channel(name: string, opts?: { [key: string]: any }): SupabaseRealtimeClient {
+  channel(name: string, opts?: { [key: string]: any }): SupabaseRealtimeChannel {
     if (!this.realtime.isConnected()) {
       this.realtime.connect()
     }
 
-    return new SupabaseRealtimeClient(this.realtime, name, opts)
+    return new SupabaseRealtimeChannel(name, opts, this.realtime)
   }
 
   /**

src/SupabaseClient.ts

@@ -1,32 +1,14 @@
 import { RealtimeChannel, RealtimeClient, Transformers } from '@supabase/realtime-js'
-import { SupabaseRealtimePayload } from './types'
 
-export class SupabaseRealtimeClient {
+export class SupabaseRealtimeChannel {
   socket: RealtimeClient
   channel: RealtimeChannel
 
-  constructor(socket: RealtimeClient, name: string, opts: { [key: string]: any } = {}) {
+  constructor(name: string, opts: { [key: string]: any } = {}, socket: RealtimeClient) {
     this.socket = socket
     this.channel = socket.channel(`realtime:${name}`, opts) as RealtimeChannel
   }
 
-  private getPayloadRecords(payload: any) {
-    const records = {
-      new: {},
-      old: {},
-    }
-
-    if (payload.type === 'INSERT' || payload.type === 'UPDATE') {
-      records.new = Transformers.convertChangeData(payload.columns, payload.record)
-    }
-
-    if (payload.type === 'UPDATE' || payload.type === 'DELETE') {
-      records.old = Transformers.convertChangeData(payload.columns, payload.old_record)
-    }
-
-    return records
-  }
-
   /**
    * The event you want to listen to.
    *
@@ -88,4 +70,69 @@ export class SupabaseRealtimeClient {
 
     return this.channel
   }
+
+  presenceList() {
+    return this.channel.presence.list()
+  }
+
+  send(
+    payload: { type: string; [key: string]: any },
+    opts: { [key: string]: any } = {}
+  ): Promise<['ok' | 'timeout', number]> {
+    return new Promise((resolve) => {
+      const now = performance.now()
+      const timeout = opts.timeout || this.channel.timeout
+
+      this.channel
+        .push(payload.type, payload, timeout)
+        .receive('ok', () => {
+          const diff = performance.now() - now
+          resolve(['ok', diff])
+        })
+        .receive('timeout', () => {
+          resolve(['timeout', timeout])
+        })
+    })
+  }
+
+  async track(
+    payload: { [key: string]: any },
+    opts: { [key: string]: any } = {}
+  ): Promise<['ok' | 'timeout', number]> {
+    return await this.send(
+      {
+        type: 'presence',
+        event: 'track',
+        payload,
+      },
+      opts
+    )
+  }
+
+  async untrack(opts: { [key: string]: any } = {}): Promise<['ok' | 'timeout', number]> {
+    return await this.send(
+      {
+        type: 'presence',
+        event: 'untrack',
+      },
+      opts
+    )
+  }
+
+  private getPayloadRecords(payload: any) {
+    const records = {
+      new: {},
+      old: {},
+    }
+
+    if (payload.type === 'INSERT' || payload.type === 'UPDATE') {
+      records.new = Transformers.convertChangeData(payload.columns, payload.record)
+    }
+
+    if (payload.type === 'UPDATE' || payload.type === 'DELETE') {
+      records.old = Transformers.convertChangeData(payload.columns, payload.old_record)
+    }
+
+    return records
+  }
 }