@supabase/realtime-js 2.7.4 → 2.8.1

package/src/RealtimeChannel.ts

@@ -80,7 +80,11 @@ export type RealtimePostgresChangesFilter<
   filter?: string
 }
 
-export type RealtimeChannelSendResponse = 'ok' | 'timed out' | 'rate limited'
+export type RealtimeChannelSendResponse =
+  | 'ok'
+  | 'timed out'
+  | 'rate limited'
+  | 'error'
 
 export enum REALTIME_POSTGRES_CHANGES_LISTEN_EVENT {
   ALL = '*',
@@ -109,7 +113,7 @@ export enum REALTIME_SUBSCRIBE_STATES {
  * and narrows the scope of data flow to subscribed clients.
  * You can think of a channel as a chatroom where participants are able to see who's online
  * and send and receive messages.
- **/
+ */
 export default class RealtimeChannel {
   bindings: {
     [key: string]: {
@@ -126,6 +130,8 @@ export default class RealtimeChannel {
   rejoinTimer: Timer
   pushBuffer: Push[] = []
   presence: RealtimePresence
+  broadcastEndpointURL: string
+  subTopic: string
 
   constructor(
     /** Topic name can be any string. */
@@ -133,6 +139,8 @@ export default class RealtimeChannel {
     public params: RealtimeChannelOptions = { config: {} },
     public socket: RealtimeClient
   ) {
+    this.subTopic = topic.replace(/^realtime:/i, '')
+
     this.params.config = {
       ...{
         broadcast: { ack: false, self: false },
@@ -184,6 +192,8 @@ export default class RealtimeChannel {
     })
 
     this.presence = new RealtimePresence(this)
+
+    this.broadcastEndpointURL = this._broadcastEndpointURL()
   }
 
   /** Subscribe registers your client with the server */
@@ -191,6 +201,10 @@ export default class RealtimeChannel {
     callback?: (status: `${REALTIME_SUBSCRIBE_STATES}`, err?: Error) => void,
     timeout = this.timeout
   ): RealtimeChannel {
+    if (!this.socket.isConnected()) {
+      this.socket.connect()
+    }
+
     if (this.joinedOnce) {
       throw `tried to subscribe multiple times. 'subscribe' can only be called a single time per channel instance`
     } else {
@@ -392,32 +406,74 @@ export default class RealtimeChannel {
   ): RealtimeChannel {
     return this._on(type, filter, callback)
   }
-
-  send(
-    payload: { type: string; [key: string]: any },
+  /**
+   * Sends a message into the channel.
+   *
+   * @param args Arguments to send to channel
+   * @param args.type The type of event to send
+   * @param args.event The name of the event being sent
+   * @param args.payload Payload to be sent
+   * @param opts Options to be used during the send process
+   */
+  async send(
+    args: {
+      type: 'broadcast' | 'presence' | 'postgres_changes'
+      event: string
+      payload?: any
+      [key: string]: any
+    },
     opts: { [key: string]: any } = {}
   ): Promise<RealtimeChannelSendResponse> {
-    return new Promise((resolve) => {
-      const push = this._push(
-        payload.type,
-        payload,
-        opts.timeout || this.timeout
-      )
-
-      if (push.rateLimited) {
-        resolve('rate limited')
+    if (!this._canPush() && args.type === 'broadcast') {
+      const { event, payload: endpoint_payload } = args
+      const options = {
+        method: 'POST',
+        headers: {
+          apikey: this.socket.accessToken ?? '',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          messages: [
+            { topic: this.subTopic, event, payload: endpoint_payload },
+          ],
+        }),
       }
 
-      if (
-        payload.type === 'broadcast' &&
-        !this.params?.config?.broadcast?.ack
-      ) {
-        resolve('ok')
+      try {
+        const response = await this._fetchWithTimeout(
+          this.broadcastEndpointURL,
+          options,
+          opts.timeout ?? this.timeout
+        )
+
+        if (response.ok) {
+          return 'ok'
+        } else {
+          return 'error'
+        }
+      } catch (error: any) {
+        if (error.name === 'AbortError') {
+          return 'timed out'
+        } else {
+          return 'error'
+        }
       }
+    } else {
+      return new Promise((resolve) => {
+        const push = this._push(args.type, args, opts.timeout || this.timeout)
 
-      push.receive('ok', () => resolve('ok'))
-      push.receive('timeout', () => resolve('timed out'))
-    })
+        if (push.rateLimited) {
+          resolve('rate limited')
+        }
+
+        if (args.type === 'broadcast' && !this.params?.config?.broadcast?.ack) {
+          resolve('ok')
+        }
+
+        push.receive('ok', () => resolve('ok'))
+        push.receive('timeout', () => resolve('timed out'))
+      })
+    }
   }
 
   updateJoinPayload(payload: { [key: string]: any }): void {
@@ -468,6 +524,32 @@ export default class RealtimeChannel {
     })
   }
 
+  /** @internal */
+  _broadcastEndpointURL(): string {
+    let url = this.socket.endPoint
+    url = url.replace(/^ws/i, 'http')
+    url = url.replace(/(\/socket\/websocket|\/socket|\/websocket)\/?$/i, '')
+    return url.replace(/\/+$/, '') + '/api/broadcast'
+  }
+
+  async _fetchWithTimeout(
+    url: string,
+    options: { [key: string]: any },
+    timeout: number
+  ) {
+    const controller = new AbortController()
+    const id = setTimeout(() => controller.abort(), timeout)
+
+    const response = await this.socket.fetch(url, {
+      ...options,
+      signal: controller.signal,
+    })
+
+    clearTimeout(id)
+
+    return response
+  }
+
   /** @internal */
   _push(
     event: string,

package/src/RealtimeClient.ts

@@ -14,6 +14,8 @@ import Serializer from './lib/serializer'
 import RealtimeChannel from './RealtimeChannel'
 import type { RealtimeChannelOptions } from './RealtimeChannel'
 
+type Fetch = typeof fetch
+
 export type RealtimeClientOptions = {
   transport?: WebSocket
   timeout?: number
@@ -25,6 +27,7 @@ export type RealtimeClientOptions = {
   headers?: { [key: string]: string }
   params?: { [key: string]: any }
   log_level?: 'info' | 'debug' | 'warn' | 'error'
+  fetch?: Fetch
 }
 
 export type RealtimeMessage = {
@@ -72,6 +75,7 @@ export default class RealtimeClient {
   }
   eventsPerSecondLimitMs: number = 100
   inThrottle: boolean = false
+  fetch: Fetch
 
   /**
    * Initializes the Socket.
@@ -122,6 +126,8 @@ export default class RealtimeClient {
       this.disconnect()
       this.connect()
     }, this.reconnectAfterMs)
+
+    this.fetch = this._resolveFetch(options?.fetch)
   }
 
   /**
@@ -232,10 +238,6 @@ export default class RealtimeClient {
     topic: string,
     params: RealtimeChannelOptions = { config: {} }
   ): RealtimeChannel {
-    if (!this.isConnected()) {
-      this.connect()
-    }
-
     const chan = new RealtimeChannel(`realtime:${topic}`, params, this)
     this.channels.push(chan)
     return chan
@@ -285,6 +287,26 @@ export default class RealtimeClient {
     })
   }
 
+  /**
+   * Use either custom fetch, if provided, or default fetch to make HTTP requests
+   *
+   * @internal
+   */
+  _resolveFetch = (customFetch?: Fetch): Fetch => {
+    let _fetch: Fetch
+    if (customFetch) {
+      _fetch = customFetch
+    } else if (typeof fetch === 'undefined') {
+      _fetch = (...args) =>
+        import('@supabase/node-fetch' as any).then(({ default: fetch }) =>
+          fetch(...args)
+        )
+    } else {
+      _fetch = fetch
+    }
+    return (...args) => _fetch(...args)
+  }
+
   /**
    * Return the next message ref, accounting for overflows
    *

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '2.7.4'
+export const version = '2.8.1'