feat: enable dynamic API endpoint configuration (#151)

* refactor: rename variable

* chore: remove jsdoc type

* feat: allow dynamic api reconfiguration

* fix: persist host configuration in storage

* style: lint

* fix: do not connect to devserver when running in prod mode

* fix: do not connect to devserver twice

devserver connection is initiated by start/startFromCache and should not happen after a request, unless the socket host changes
handling this case will be moved to the socket class

* fix: reconnect devserver on endpoint changes

Author: gyoshev

src/Constants.ts

@@ -105,6 +105,7 @@ export default {
     VARIANTS: '__leanplum_variants',
     VARIANT_DEBUG_INFO: '__leanplum_variant_debug_info',
     ACTION_DEFINITIONS: '__leanplum_action_definitions',
+    HOST_CONFIG: '__leanplum_hosts',
     INBOX_MESSAGES: '__leanplum_inbox_messages',
     TOKEN: '__leanplum_token',
     DEVICE_ID: '__leanplum_device_id',

src/LeanplumInternal.ts

@@ -51,7 +51,7 @@ export default class LeanplumInternal {
     this.createRequest.bind(this),
     this.onInboxAction.bind(this)
   )
-  private _lpRequest: LeanplumRequest = new LeanplumRequest()
+  private _lpRequest: LeanplumRequest = new LeanplumRequest(this._events)
   private _varCache: VarCache = new VarCache(this.createRequest.bind(this))
   private _lpSocket: LeanplumSocket = new LeanplumSocket(
     this._varCache,
@@ -88,6 +88,8 @@ export default class LeanplumInternal {
       }
     })
     this._events.on('registerForPush', () => this.registerForWebPush())
+    this._events.on('updateDevServerHost',
+      (host: string) => this.setSocketHost(host))
   }
 
   setApiPath(apiPath: string): void {

src/LeanplumRequest.ts

@@ -19,6 +19,13 @@ import ArgsBuilder from './ArgsBuilder'
 import Constants from './Constants'
 import StorageManager from './StorageManager'
 import Network from './Network'
+import EventEmitter from './EventEmitter'
+
+interface HostConfig {
+  apiHost: string;
+  apiPath: string;
+  devServerHost: string;
+}
 
 export default class LeanplumRequest {
   private cooldownTimeout = null
@@ -34,8 +41,11 @@ export default class LeanplumRequest {
   public versionName: string
 
   constructor(
+    private events: EventEmitter,
     private network = new Network()
-  ) { }
+  ) {
+    this.loadHostConfig()
+  }
 
   public get userId(): string | undefined {
     return this.userIdValue ?? this.loadLocal<string>(Constants.DEFAULT_KEYS.USER_ID) ?? this.deviceId
@@ -90,9 +100,8 @@ export default class LeanplumRequest {
     }
 
     if (params.body()) {
-      this.network.ajax(
-        'POST',
-        `${this.apiPath}?${argsBuilder.build()}`,
+      this.sendRequest(
+        `?${argsBuilder.build()}`,
         params.body(),
         success,
         error,
@@ -115,9 +124,8 @@ export default class LeanplumRequest {
             .add(Constants.PARAMS.ACTION, Constants.METHODS.MULTI)
             .add(Constants.PARAMS.TIME, (new Date().getTime() / 1000).toString().toString())
             .build()
-        this.network.ajax(
-          'POST',
-          `${this.apiPath}?${multiRequestArgs}`,
+        this.sendRequest(
+          `?${multiRequestArgs}`,
           requestData,
           success,
           error,
@@ -179,6 +187,12 @@ export default class LeanplumRequest {
     return (count > 0) ? response?.response?.[count - 1] : null
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public getFirstResponse(response): any {
+    const count = response?.response?.length ?? 0
+    return (count > 0) ? response?.response?.[0] : null
+  }
+
   public isResponseSuccess(response): boolean {
     return Boolean(response?.success)
   }
@@ -191,6 +205,34 @@ export default class LeanplumRequest {
     this.saveLocal(Constants.DEFAULT_KEYS.COUNT, count)
   }
 
+  private sendRequest(query: string, data: string, success: Function, error: Function, queued: boolean): void {
+    this.network.ajax(
+      'POST',
+      `${this.apiPath}${query}`,
+      data,
+      (response) => {
+        const methodResponse = this.getFirstResponse(response)
+        if (!methodResponse.success && methodResponse.apiHost) {
+          const { apiHost, apiPath, devServerHost } = methodResponse
+
+          this.saveLocal(Constants.DEFAULT_KEYS.HOST_CONFIG, JSON.stringify({
+            apiHost,
+            apiPath,
+            devServerHost,
+          }))
+          this.apiPath = `https://${apiHost}/${apiPath}`
+          this.sendRequest(query, data, success, error, queued)
+
+          this.events.emit('updateDevServerHost', devServerHost)
+        } else if (success) {
+          success(response)
+        }
+      },
+      error,
+      queued
+    )
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private popUnsentRequests(): any[] {
     const requestData = []
@@ -213,6 +255,15 @@ export default class LeanplumRequest {
     return requestData
   }
 
+  private loadHostConfig(): void {
+    const hostConfig = JSON.parse(this.loadLocal<string>(Constants.DEFAULT_KEYS.HOST_CONFIG) || 'null')
+    if (hostConfig) {
+      const { apiHost, apiPath, devServerHost } = hostConfig
+      this.apiPath = `https://${apiHost}/${apiPath}`
+      this.events.emit('updateDevServerHost', devServerHost)
+    }
+  }
+
   private loadLocal<T>(key: string): T {
     return StorageManager.get(key)
   }

src/LeanplumSocket.ts

@@ -27,10 +27,16 @@ import EventEmitter from './EventEmitter'
 type RegisterMessage = { email: string }
 type DevServerMessage = RegisterMessage | Message
 
+type AuthInfo = {
+  appId: string;
+  deviceId: string;
+}
+
 export default class LeanplumSocket {
   private networkTimeoutSeconds = 10
   private socketClient: SocketIoClient | null = null
   private socketHost = 'dev.leanplum.com'
+  private auth: AuthInfo = null
 
   constructor(
     private cache: VarCache,
@@ -40,14 +46,14 @@ export default class LeanplumSocket {
     private events: EventEmitter,
   ) { }
 
-  public connect(
-    auth: { appId: string; deviceId: string }
-  ): void {
+  public connect(auth: AuthInfo): void {
     if (!WebSocket) {
       console.log('Your browser doesn\'t support WebSockets.')
       return
     }
 
+    this.auth = auth
+
     let authSent = false
     this.socketClient = new SocketIoClient()
 
@@ -64,7 +70,7 @@ export default class LeanplumSocket {
       }
     }
 
-    this.socketClient.onerror = (event) => {
+    this.socketClient.onerror = (event: string) => {
       console.log('Leanplum: Socket error', event)
     }
 
@@ -86,13 +92,18 @@ export default class LeanplumSocket {
 
   public setSocketHost(value: string): void {
     this.socketHost = value
+
+    if (this.socketClient.connected) {
+      this.socketClient.disconnect()
+      this.connect(this.auth)
+    }
   }
 
   /**
    * Sets the network timeout.
-   * @param {number} seconds The timeout in seconds.
+   * @param seconds The timeout in seconds.
    */
-  public setNetworkTimeout(seconds): void {
+  public setNetworkTimeout(seconds: number): void {
     this.networkTimeoutSeconds = seconds
     this.socketClient?.setNetworkTimeout(seconds)
   }

src/Network.ts

@@ -71,7 +71,7 @@ export default class Network {
         handled = true
 
         let response
-        let ranCallback = false
+        let parseError = false
         if (plainText) {
           response = xhr.responseText
         } else {
@@ -83,11 +83,11 @@ export default class Network {
                 error(null, xhr)
               }
             }, 0)
-            ranCallback = true
+            parseError = true
           }
         }
 
-        if (!ranCallback) {
+        if (!parseError) {
           if (xhr.status >= 200 && xhr.status < 300) {
             setTimeout(() => {
               if (success) {
@@ -133,7 +133,7 @@ export default class Network {
     const xdr = new XDomainRequest()
     xdr.onload = () => {
       let response
-      let ranCallback = false
+      let parseError = false
       if (plainText) {
         response = xdr.responseText
       } else {
@@ -145,10 +145,10 @@ export default class Network {
               error(null, xdr)
             }
           }, 0)
-          ranCallback = true
+          parseError = true
         }
       }
-      if (!ranCallback) {
+      if (!parseError) {
         setTimeout(() => {
           if (success) {
             success(response, xdr)
@@ -179,7 +179,7 @@ export default class Network {
 
   /**
    * Adds the request to the request queue.
-   * @param {Arguments} requestArguments The request arguments from the initial method call.
+   * @param requestArguments The request arguments from the initial method call.
    * @private
    */
   private enqueueRequest(requestArguments): void {

src/SocketIoClient.ts

@@ -41,12 +41,12 @@ export default class SocketIoClient {
 
   /**
    * Connects to the given socketHost.
-   * @param  {string} socketHost The host to connect to.
+   * @param socketHost The host to connect to.
    */
-  public connect(socketHost): void {
+  public connect(socketHost: string): void {
     this.connecting = true
     this.network.ajax('POST', `https://${socketHost}/socket.io/1`, '',
-        (line) => {
+        (line: string) => {
           const parts = line.split(':')
           const session = parts[0]
           const heartbeat = parseInt(parts[1]) / 2 * 1000
@@ -99,12 +99,18 @@ export default class SocketIoClient {
     )
   }
 
+  public disconnect(): void {
+    this.socket.close()
+    this.connected = false
+    this.connecting = false
+  }
+
   /**
    * Sends given event with arguments to the server.
-   * @param  {string} name Name of the event.
-   * @param  {*} args Arguments to send.
+   * @param name Name of the event.
+   * @param args Arguments to send.
    */
-  public send(name, args): void {
+  public send(name: string, args): void {
     if (!this.connected) {
       console.log('Leanplum: Socket is not connected.')
       return
@@ -118,9 +124,9 @@ export default class SocketIoClient {
 
   /**
    * Sets the network timeout.
-   * @param {number} seconds The timeout in seconds.
+   * @param The timeout in seconds.
    */
-  public setNetworkTimeout(seconds): void {
+  public setNetworkTimeout(seconds: number): void {
     this.network.setNetworkTimeout(seconds)
   }
 }

test/mocks/internal.ts

@@ -11,6 +11,7 @@ export const lpRequestMock: Partial<jest.Mocked<LeanplumRequest>> = {
 
 export const lpSocketMock = {
   connect: jest.fn(),
+  setSocketHost: jest.fn(),
 }
 
 export const pushManagerMock: Partial<jest.Mocked<PushManager>> = {

test/specs/LeanplumInternal.test.ts

@@ -43,7 +43,7 @@ describe(LeanplumInternal, () => {
     it('passes available message IDs to API', () => {
       const inbox = lp.inbox()
       lpRequestMock.request.mockImplementationOnce(
-        (method, args, options) => {
+        (_method, _args, options) => {
           options.response({
             success: true,
             response: [ { newsfeedMessages: {
@@ -921,6 +921,17 @@ describe(LeanplumInternal, () => {
         expect(varCacheMock.clearUserContent).toHaveBeenCalledTimes(1)
       })
     })
+
+    describe('devserver host updates', () => {
+      it('reconnects to new host on update', () => {
+        jest.spyOn(lp, 'setSocketHost');
+
+        (lp as any)._events.emit('updateDevServerHost', 'dev2.leanplum.com')
+
+        expect(lp.setSocketHost).toHaveBeenCalledTimes(1)
+        expect(lp.setSocketHost).toHaveBeenCalledWith('dev2.leanplum.com')
+      })
+    })
   })
 
   describe('getFileUrl', () => {