fix(gpt-runner-web): state not share different host

Author: 2214962083

packages/gpt-runner-shared/package.json

@@ -62,6 +62,8 @@
     "find-free-ports": "*",
     "ip": "*",
     "minimatch": "*",
+    "socket.io": "*",
+    "socket.io-client": "*",
     "zod": "*"
   },
   "dependencies": {
@@ -72,11 +74,13 @@
     "find-free-ports": "^3.1.1",
     "ip": "^1.1.8",
     "minimatch": "^9.0.1",
+    "socket.io": "^4.6.2",
+    "socket.io-client": "^4.6.2",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/express": "^4.17.17",
     "@types/ip": "^1.1.0",
     "express": "^4.18.2"
   }
-}
+}

packages/gpt-runner-shared/src/common/helpers/common.ts

@@ -86,10 +86,21 @@ export function tryParseJson(str: string) {
     return JSON.parse(str)
   }
   catch (e) {
+    console.error('tryParseJson error: ', e)
     return {}
   }
 }
 
+export function tryStringifyJson(obj: any) {
+  try {
+    return JSON.stringify(obj)
+  }
+  catch (e) {
+    console.error('tryStringifyJson error: ', e)
+    return ''
+  }
+}
+
 export function debounce<T extends (...args: any[]) => any>(callback: T, wait: number) {
   let timeout: ReturnType<typeof setTimeout> | undefined
 

packages/gpt-runner-shared/src/common/helpers/env-config.ts

@@ -15,7 +15,7 @@ interface EnvVarConfig {
 
   /**
    * if true, this env var will only be available on server side
-   * window.__config__ will not have this env var
+   * window.__env__ will not have this env var
    *
    * @default false
    */
@@ -26,7 +26,9 @@ const config: Record<EnvName, EnvVarConfig> = {
   NODE_ENV: {
     defaultValue: 'production',
   },
-  OPENAI_KEY: {},
+  OPENAI_KEY: {
+    serverSideOnly: true,
+  },
   GPTR_BASE_SERVER_URL: {
     defaultValue: 'http://localhost:3003',
   },
@@ -42,7 +44,7 @@ export class EnvConfig {
 
     // client side
     if (typeof window !== 'undefined' && !serverSideOnly)
-      return window?.__config__?.[key] ?? defaultValue ?? ''
+      return window?.__env__?.[key] ?? defaultValue ?? ''
 
     // server side
     return process.env[key] ?? defaultValue ?? ''
@@ -51,7 +53,7 @@ export class EnvConfig {
   /**
    * get all env vars on server or client side
    * @param type server or client, get all allowed env vars on that scope
-   * @param getWays all or process, get  env vars both on process and window.__config__ or only process.env
+   * @param getWays all or process, get  env vars both on process and window.__env__ or only process.env
    * @returns env vars key value map
    */
   static getAllEnvVarsOnScopes(
@@ -93,7 +95,7 @@ export class EnvConfig {
 
   /**
    * for /api/config
-   * @returns env vars key value map for window.__config__
+   * @returns env vars key value map for window.__env__
    */
   static getClientEnvVarsInServerSide(): Partial<Record<EnvName, string>> {
     return EnvConfig.getAllEnvVarsOnScopes('client', 'process')
@@ -106,6 +108,6 @@ declare global {
   }
 
   interface Window {
-    __config__?: Partial<Env>
+    __env__?: Partial<Env>
   }
 }

packages/gpt-runner-shared/src/common/helpers/index.ts

@@ -4,4 +4,6 @@ export * from './create-filter-pattern'
 export * from './debug'
 export * from './env-config'
 export * from './is'
+export * from './request'
+export * from './socket'
 export * from './verify-zod'

packages/gpt-runner-shared/src/common/helpers/request.ts

@@ -0,0 +1,17 @@
+import type { FailResponse, SuccessResponse } from '../types'
+
+export function buildSuccessResponse<T>(options: Omit<SuccessResponse<T>, 'type'>): SuccessResponse<T> {
+  return {
+    type: 'Success',
+    status: options.status || 200,
+    ...options,
+  }
+}
+
+export function buildFailResponse<T>(options: Omit<FailResponse<T>, 'type'>): FailResponse<T> {
+  return {
+    type: 'Fail',
+    status: options.status || 400,
+    ...options,
+  }
+}

packages/gpt-runner-shared/src/common/helpers/socket.ts

@@ -0,0 +1,178 @@
+import * as uuid from 'uuid'
+import type { BrowserSocket, MaybePromise, NodeServerSocket, Socket, WssActionName, WssActionNameRequestMap } from '../types'
+import { EnvConfig } from './env-config'
+
+type SocketQueueFn = (socket: Socket) => void
+export class WssUtils {
+  static _instance: WssUtils | undefined
+  static defaultWssUrl = `http://${new URL(EnvConfig.get('GPTR_BASE_SERVER_URL')).host}`
+  #wssUrl: string
+  #socketQueue: SocketQueueFn[] = []
+  #hasConnected = false
+
+  static get instance() {
+    if (!this._instance)
+      this._instance = new WssUtils()
+
+    return this._instance
+  }
+
+  constructor(wssUrl?: string) {
+    this.#wssUrl = wssUrl ?? WssUtils.defaultWssUrl
+  }
+
+  static get isBrowser() {
+    return typeof window !== 'undefined'
+  }
+
+  static isNodeServerSocket(socket: Socket | undefined): socket is NodeServerSocket {
+    return typeof window === 'undefined' && Boolean(socket)
+  }
+
+  static isBrowserSocket(socket: Socket | undefined): socket is BrowserSocket {
+    return WssUtils.isBrowser && Boolean(socket)
+  }
+
+  get wsUrl() {
+    return this.#wssUrl
+  }
+
+  #wss: Socket | undefined
+
+  #setWss = (socket: Socket) => {
+    this.#wss = socket
+    this.#socketQueue.forEach(fn => fn(socket))
+    this.#socketQueue = []
+  }
+
+  get wss() {
+    return this.#wss
+  }
+
+  connect = async (params?: {
+    server: any // http.createServer(expressApp);
+  }) => {
+    if (this.wss || this.#hasConnected)
+      return this.wss
+
+    console.log('Connecting to WS...')
+    const { server } = params || {}
+
+    try {
+      if (WssUtils.isBrowser)
+        await this.#connectBrowserSocket()
+      else
+        server && await this.#connectNodeSocket(server)
+
+      this.#hasConnected = true
+
+      return this.wss
+    }
+    catch (error) {
+      console.error('Error connecting to WS', error)
+      throw error
+    }
+  }
+
+  // for nodejs
+  #connectNodeSocket = async (server: any) => {
+    if (WssUtils.isBrowser || this.wss)
+      return
+
+    const { Server } = await import('socket.io')
+
+    const serverSocket = new Server(server, {
+      cors: {
+        origin: '*',
+      },
+    })
+
+    serverSocket.on('connection', (socket) => {
+      this.#setWss(socket)
+      this.#handleConnection()
+    })
+  }
+
+  // for browser
+  #connectBrowserSocket = async () => {
+    if (!WssUtils.isBrowser || this.wss)
+      return
+
+    const { io } = await import('socket.io-client')
+    const socket = io(this.wsUrl)
+    this.#setWss(socket)
+
+    // if (!WssUtils.isBrowserSocket(this.wss))
+    //   return
+
+    // socket.on('connect', () => {
+    //   this.#handleConnection()
+    // })
+  }
+
+  #handleConnection = async () => {
+    console.log('Connected to Socket server')
+  }
+
+  on = <T extends WssActionName>(eventName: T, callback: (message: WssActionNameRequestMap[T]) => MaybePromise<void>) => {
+    if (!this.wss) {
+      this.#socketQueue.push((socket) => {
+        socket.on(eventName, callback as any)
+      })
+      return
+    }
+
+    (this.wss as NodeServerSocket).on(eventName, callback as any)
+  }
+
+  emit = <T extends WssActionName>(eventName: T, message: WssActionNameRequestMap[T]) => {
+    if (!this.wss) {
+      this.#socketQueue.push((socket) => {
+        socket.emit(eventName, message)
+      })
+      return
+    }
+
+    this.wss.emit(eventName, message)
+  }
+
+  off = <T extends WssActionName>(eventName: T, callback: (message: WssActionNameRequestMap[T]) => MaybePromise<void>) => {
+    if (!this.wss) {
+      this.#socketQueue.push((socket) => {
+        socket.off(eventName, callback as any)
+      })
+      return
+    }
+
+    this.wss.off(eventName, callback as any)
+  }
+
+  emitAndWaitForRes = async <T extends WssActionName>(eventName: T, message: WssActionNameRequestMap[T]) => {
+    return new Promise<WssActionNameRequestMap[T]>((resolve, reject) => {
+      let destroyFn: () => void
+
+      const timeout = setTimeout(() => {
+        destroyFn?.()
+        reject(new Error(`WS timeout, actionName: ${eventName}`))
+      }, 10000)
+
+      const __id__ = uuid.v4()
+      this.emit(eventName, { ...message, __id__ })
+
+      const handler = (message: WssActionNameRequestMap[T]) => {
+        if (message.__id__ !== __id__)
+          return
+
+        destroyFn?.()
+        resolve(message)
+      }
+
+      this.on(eventName, handler)
+
+      destroyFn = () => {
+        clearTimeout(timeout)
+        this.off(eventName, handler)
+      }
+    })
+  }
+}

packages/gpt-runner-shared/src/common/types/enum.ts

@@ -26,3 +26,11 @@ export enum ServerStorageName {
   FrontendState = 'frontend-state',
   WebPreset = 'web-preset',
 }
+
+export enum WssActionName {
+  Error = 'error',
+  StorageGetItem = 'storageGetItem',
+  StorageSetItem = 'storageSetItem',
+  StorageRemoveItem = 'storageRemoveItem',
+  StorageClear = 'storageClear',
+}

packages/gpt-runner-shared/src/common/types/index.ts

@@ -4,3 +4,4 @@ export * from './config'
 export * from './enum'
 export * from './eventemitter'
 export * from './server'
+export * from './socket'

packages/gpt-runner-shared/src/common/types/server.ts

@@ -36,22 +36,35 @@ export interface GetUserConfigResData {
   userConfig: UserConfig
 }
 
-export interface GetStorageReqParams {
+export interface StorageGetItemReqParams {
   storageName: ServerStorageName
   key: string
 }
 
 export type ServerStorageValue = Record<string, any> | null | undefined
 
-export interface GetStorageResData {
+export interface StorageGetItemResData {
   value: ServerStorageValue
   cacheDir: string
 }
 
-export interface SaveStorageReqParams {
+export interface StorageSetItemReqParams {
   storageName: ServerStorageName
   key: string
   value?: ServerStorageValue
 }
 
-export type SaveStorageResData = null
+export type StorageSetItemResData = null
+
+export interface StorageRemoveItemReqParams {
+  storageName: ServerStorageName
+  key: string
+}
+
+export type StorageRemoveItemResData = null
+
+export interface StorageClearReqParams {
+  storageName: ServerStorageName
+}
+
+export type StorageClearResData = null