@supabase/realtime-js 1.6.0 → 1.7.0

package/src/RealtimeClient.ts

@@ -7,6 +7,7 @@ import {
   DEFAULT_TIMEOUT,
   WS_CLOSE_NORMAL,
   DEFAULT_HEADERS,
+  CONNECTION_STATE,
 } from './lib/constants'
 import Timer from './lib/timer'
 import Serializer from './lib/serializer'
@@ -32,6 +33,11 @@ type Message = {
   ref: string
 }
 
+type ChannelParams = {
+  selfBroadcast?: boolean
+  [key: string]: any
+}
+
 const noop = () => {}
 
 export default class RealtimeClient {
@@ -66,9 +72,10 @@ export default class RealtimeClient {
     error: [],
     message: [],
   }
+  versionDate: Date | undefined = undefined
 
   /**
-   * Initializes the Socket
+   * Initializes the Socket.
    *
    * @param endPoint The string WebSocket endpoint, ie, "ws://example.com/socket", "wss://example.com", "/socket" (inherited host & protocol)
    * @param options.transport The Websocket Transport, for example WebSocket.
@@ -115,14 +122,15 @@ export default class RealtimeClient {
   }
 
   /**
-   * Connects the socket.
+   * Connects the socket, unless already connected.
    */
-  connect() {
+  connect(): void {
     if (this.conn) {
       return
     }
 
     this.conn = new this.transport(this.endPointURL(), [], null, this.headers)
+
     if (this.conn) {
       // this.conn.timeout = this.longpollerTimeout // TYPE ERROR
       this.conn.binaryType = 'arraybuffer'
@@ -130,6 +138,14 @@ export default class RealtimeClient {
       this.conn.onerror = (error) => this._onConnError(error as ErrorEvent)
       this.conn.onmessage = (event) => this.onConnMessage(event)
       this.conn.onclose = (event) => this._onConnClose(event)
+
+      const versionDate = new Date(
+        new URL(this.conn.url).searchParams.get('vsndate') ?? ''
+      )
+
+      if (versionDate instanceof Date) {
+        this.versionDate = versionDate
+      }
     }
   }
 
@@ -165,7 +181,9 @@ export default class RealtimeClient {
   }
 
   /**
-   * Logs the message. Override `this.logger` for specialized logging.
+   * Logs the message.
+   *
+   * For customized logging, `this.logger` can be overriden.
    */
   log(kind: string, msg: string, data?: any) {
     this.logger(kind, msg, data)
@@ -173,6 +191,7 @@ export default class RealtimeClient {
 
   /**
    * Registers a callback for connection state change event.
+   *
    * @param callback A function to be called when the event occurs.
    *
    * @example
@@ -183,7 +202,8 @@ export default class RealtimeClient {
   }
 
   /**
-   * Registers a callbacks for connection state change events.
+   * Registers a callback for connection state change events.
+   *
    * @param callback A function to be called when the event occurs.
    *
    * @example
@@ -195,6 +215,7 @@ export default class RealtimeClient {
 
   /**
    * Registers a callback for connection state change events.
+   *
    * @param callback A function to be called when the event occurs.
    *
    * @example
@@ -206,6 +227,7 @@ export default class RealtimeClient {
 
   /**
    * Calls a function any time a message is received.
+   *
    * @param callback A function to be called when the event occurs.
    *
    * @example
@@ -218,24 +240,24 @@ export default class RealtimeClient {
   /**
    * Returns the current state of the socket.
    */
-  connectionState() {
+  connectionState(): CONNECTION_STATE {
     switch (this.conn && this.conn.readyState) {
       case SOCKET_STATES.connecting:
-        return 'connecting'
+        return CONNECTION_STATE.Connecting
       case SOCKET_STATES.open:
-        return 'open'
+        return CONNECTION_STATE.Open
       case SOCKET_STATES.closing:
-        return 'closing'
+        return CONNECTION_STATE.Closing
       default:
-        return 'closed'
+        return CONNECTION_STATE.Closed
     }
   }
 
   /**
    * Retuns `true` is the connection is open.
    */
-  isConnected() {
-    return this.connectionState() === 'open'
+  isConnected(): boolean {
+    return this.connectionState() === CONNECTION_STATE.Open
   }
 
   /**
@@ -252,13 +274,16 @@ export default class RealtimeClient {
 
   channel(
     topic: string,
-    chanParams: { [key: string]: any } = { isNewVersion: false }
-  ) {
-    const { isNewVersion, ...params } = chanParams
+    chanParams: ChannelParams = {}
+  ): RealtimeChannel | RealtimeSubscription {
+    const { selfBroadcast, ...params } = chanParams
+    if (selfBroadcast) {
+      params.self_broadcast = selfBroadcast
+    }
 
-    const chan = isNewVersion
-      ? new RealtimeChannel(topic, { ...params }, this)
-      : new RealtimeSubscription(topic, { ...params }, this)
+    const chan = this.versionDate
+      ? new RealtimeChannel(topic, params, this)
+      : new RealtimeSubscription(topic, params, this)
 
     if (chan instanceof RealtimeChannel) {
       chan.presence.onJoin((key, currentPresences, newPresences) => {
@@ -288,8 +313,13 @@ export default class RealtimeClient {
     return chan
   }
 
-  push(data: Message) {
-    let { topic, event, payload, ref } = data
+  /**
+   * Push out a message if the socket is connected.
+   *
+   * If the socket is not connected, the message gets enqueued within a local buffer, and sent out when a connection is next established.
+   */
+  push(data: Message): void {
+    const { topic, event, payload, ref } = data
     let callback = () => {
       this.encode(data, (result: any) => {
         this.conn?.send(result)
@@ -303,7 +333,7 @@ export default class RealtimeClient {
     }
   }
 
-  onConnMessage(rawMessage: any) {
+  onConnMessage(rawMessage: { data: any }) {
     this.decode(rawMessage.data, (msg: Message) => {
       let { topic, event, payload, ref } = msg
 
@@ -335,7 +365,7 @@ export default class RealtimeClient {
   /**
    * Returns the URL of the websocket.
    */
-  endPointURL() {
+  endPointURL(): string {
     return this._appendParams(
       this.endPoint,
       Object.assign({}, this.params, { vsn: VSN })
@@ -345,7 +375,7 @@ export default class RealtimeClient {
   /**
    * Return the next message ref, accounting for overflows
    */
-  makeRef() {
+  makeRef(): string {
     let newRef = this.ref + 1
     if (newRef === this.ref) {
       this.ref = 0
@@ -364,19 +394,18 @@ export default class RealtimeClient {
   setAuth(token: string | null) {
     this.accessToken = token
 
-    try {
-      this.channels.forEach((channel) => {
-        token && channel.updateJoinPayload({ user_token: token })
+    this.channels.forEach((channel) => {
+      token && channel.updateJoinPayload({ user_token: token })
 
-        if (channel.joinedOnce && channel.isJoined()) {
-          channel.push(CHANNEL_EVENTS.access_token, { access_token: token })
-        }
-      })
-    } catch (error) {
-      console.log('setAuth error', error)
-    }
+      if (channel.joinedOnce && channel.isJoined()) {
+        channel.push(CHANNEL_EVENTS.access_token, { access_token: token })
+      }
+    })
   }
 
+  /**
+   * Unsubscribe from channels with the specified topic.
+   */
   leaveOpenTopic(topic: string): void {
     let dupChannel = this.channels.find(
       (c) => c.topic === topic && (c.isJoined() || c.isJoining())
@@ -419,7 +448,10 @@ export default class RealtimeClient {
     )
   }
 
-  private _appendParams(url: string, params: { [key: string]: string }) {
+  private _appendParams(
+    url: string,
+    params: { [key: string]: string }
+  ): string {
     if (Object.keys(params).length === 0) {
       return url
     }

package/src/RealtimePresence.ts

@@ -3,7 +3,6 @@
   License: https://github.com/phoenixframework/phoenix/blob/d344ec0a732ab4ee204215b31de69cf4be72e3bf/LICENSE.md
 */
 
-import cloneDeep from 'lodash.clonedeep'
 import {
   PresenceOpts,
   PresenceOnJoinCallback,
@@ -56,7 +55,8 @@ export default class RealtimePresence {
   }
 
   /**
-   * Initializes the Presence
+   * Initializes the Presence.
+   *
    * @param channel - The RealtimeSubscription
    * @param opts - The options,
    *        for example `{events: {state: 'state', diff: 'diff'}}`
@@ -112,9 +112,11 @@ export default class RealtimePresence {
   }
 
   /**
-   * Used to sync the list of presences on the server
-   * with the client's state. An optional `onJoin` and `onLeave` callback can
-   * be provided to react to changes in the client's local presences across
+   * Used to sync the list of presences on the server with the
+   * client's state.
+   *
+   * An optional `onJoin` and `onLeave` callback can be provided to
+   * react to changes in the client's local presences across
    * disconnects and reconnects with the server.
    */
   static syncState(
@@ -123,7 +125,7 @@ export default class RealtimePresence {
     onJoin: PresenceOnJoinCallback,
     onLeave: PresenceOnLeaveCallback
   ): PresenceState {
-    const state = cloneDeep(currentState)
+    const state = this.cloneDeep(currentState)
     const transformedState = this.transformState(newState)
     const joins: PresenceState = {}
     const leaves: PresenceState = {}
@@ -165,11 +167,12 @@ export default class RealtimePresence {
   }
 
   /**
+   * Used to sync a diff of presence join and leave events from the
+   * server, as they happen.
    *
-   * Used to sync a diff of presence join and leave
-   * events from the server, as they happen. Like `syncState`, `syncDiff`
-   * accepts optional `onJoin` and `onLeave` callbacks to react to a user
-   * joining or leaving from a device.
+   * Like `syncState`, `syncDiff` accepts optional `onJoin` and
+   * `onLeave` callbacks to react to a user joining or leaving from a
+   * device.
    */
   static syncDiff(
     state: PresenceState,
@@ -192,7 +195,7 @@ export default class RealtimePresence {
 
     this.map(joins, (key, newPresences: Presence[]) => {
       const currentPresences: Presence[] = state[key]
-      state[key] = cloneDeep(newPresences)
+      state[key] = this.cloneDeep(newPresences)
 
       if (currentPresences) {
         const joinedPresenceIds = state[key].map((m: Presence) => m.presence_id)
@@ -275,7 +278,7 @@ export default class RealtimePresence {
   private static transformState(
     state: RawPresenceState | PresenceState
   ): PresenceState {
-    state = cloneDeep(state)
+    state = this.cloneDeep(state)
 
     return Object.getOwnPropertyNames(state).reduce((newState, key) => {
       const presences = state[key]
@@ -297,6 +300,10 @@ export default class RealtimePresence {
     }, {} as PresenceState)
   }
 
+  private static cloneDeep(obj: object) {
+    return JSON.parse(JSON.stringify(obj))
+  }
+
   onJoin(callback: PresenceOnJoinCallback): void {
     this.caller.onJoin = callback
   }

package/src/lib/constants.ts

@@ -35,3 +35,10 @@ export enum CHANNEL_EVENTS {
 export enum TRANSPORTS {
   websocket = 'websocket',
 }
+
+export enum CONNECTION_STATE {
+  Connecting = 'connecting',
+  Open = 'open',
+  Closing = 'closing',
+  Closed = 'closed',
+}

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '1.6.0'
+export const version = '1.7.0'