@symbo.ls/sdk 2.34.34 → 3.1.1

package/src/services/SocketIOService.js

@@ -0,0 +1,356 @@
+import { connect, send, disconnect } from '@symbo.ls/socket/client.js'
+import { BaseService } from './BaseService.js'
+
+import * as utils from '@domql/utils'
+import { router } from '@symbo.ls/router'
+import environment from '../config/environment.js'
+
+const { deepStringify, deepDestringify, isString } = utils.default || utils
+
+export class SocketService extends BaseService {
+  constructor (config) {
+    super(config)
+    this._socket = null
+    this._reconnectAttempts = 0
+    this._maxReconnectAttempts = config?.maxReconnectAttempts || 5
+    this._reconnectDelay = config?.reconnectDelay || 1000
+    this._handlers = new Map()
+    this._sessionId = Math.random()
+
+    this._ignoreSync = [
+      'userId',
+      'username',
+      'usersName',
+      'email',
+      'projects',
+      'feedbacks',
+      'userRoles',
+      'loading',
+      'appKey',
+      'projectName',
+      'followingUser',
+      'activeProject',
+      'user',
+      'sessionId',
+      'clients'
+    ]
+  }
+
+  init () {
+    try {
+      const { _context, _options } = this
+      const socketUrl =
+        environment.socketUrl ||
+        _options.socketUrl ||
+        'https://socket.symbols.app/'
+
+      if (!socketUrl) {
+        throw new Error('Socket URL is required')
+      }
+
+      this._info = {
+        config: {
+          url: socketUrl,
+          hasToken: Boolean(_context.authToken),
+          status: 'initializing'
+        }
+      }
+
+      this._setReady()
+    } catch (error) {
+      this._setError(error)
+      throw error
+    }
+  }
+
+  connect () {
+    try {
+      // Check if already connected or connecting
+      if (
+        this._socket &&
+        ['connected', 'connecting'].includes(this._info?.config?.status)
+      ) {
+        console.warn(
+          'Socket connection already exists:',
+          this._info?.config?.status
+        )
+        return true
+      }
+
+      const { _context } = this
+
+      if (!_context.appKey) {
+        throw new Error('App key is required')
+      }
+
+      // Update status to connecting before attempting connection
+      this._updateStatus('connecting')
+
+      const config = {
+        source: 'platform',
+        userId: _context.user?.id,
+        socketUrl: this._info.config.url,
+        location: window.location.host,
+        onChange: this._handleMessage.bind(this),
+        sessionId: this._sessionId,
+        usersName: _context.user?.name,
+        route: window.location.pathname,
+        onDisconnect: this._handleDisconnect.bind(this)
+      }
+
+      // If a previous socket exists but wasn't properly cleaned up, destroy it
+      if (this._socket) {
+        this.destroy()
+      }
+
+      this._socket = connect(_context.appKey, config)
+      this._updateStatus('connected')
+
+      if (environment.isDevelopment) {
+        console.log('Socket connection established:', {
+          appKey: _context.appKey,
+          userId: _context.user?.id,
+          sessionId: this._sessionId,
+          url: this._info.config.url
+        })
+      }
+
+      return true
+    } catch (error) {
+      this._updateStatus('failed')
+      console.error('Socket connection failed:', error)
+      throw new Error(`Socket connection failed: ${error.message}`)
+    }
+  }
+
+  send (type, data, opts = {}) {
+    this._requireReady()
+
+    if (!this._socket) {
+      throw new Error('Socket is not connected')
+    }
+
+    const payload = {
+      sessionId: this._sessionId,
+      userId: this._context.user?.id,
+      usersName: this._context.user?.name,
+      ...data
+    }
+
+    // console.log('sending')
+    // console.log(payload)
+
+    send.call(
+      this._socket,
+      type,
+      opts.preventDeepStringify ? payload : deepStringify(payload)
+    )
+  }
+
+  _handleMessage (event, data) {
+    try {
+      const d = isString(data) ? deepDestringify(JSON.parse(data)) : data
+      if (this._sessionId === d.sessionId) {
+        return
+      }
+
+      const handlers = this._handlers.get(event)
+      if (handlers) {
+        handlers.forEach(handler => handler(d))
+      }
+
+      // Handle specific events
+      switch (event) {
+        case 'change':
+          this._handleChangeEvent(d)
+          break
+        case 'clients':
+          this._handleClientsEvent(d)
+          break
+        case 'route':
+          this._handleRouteEvent(d)
+          break
+        default:
+          break
+      }
+    } catch (error) {
+      this._setError(new Error(`Failed to handle message: ${error.message}`))
+    }
+  }
+
+  _handleChangeEvent (data) {
+    if (data.canvas) {
+      const { clients } = data.canvas
+      const [firstClientKey] = Object.keys(clients)
+      const monaco =
+        clients && clients[firstClientKey] && clients[firstClientKey].monaco
+      if (monaco) {
+        const Canvas =
+          this._context.element && this._context.element.getCanvas()
+        if (Canvas) {
+          Canvas.Chosen.EditorPanels.update({}, { forceMonacoUpdate: true })
+        }
+      }
+      return
+    }
+
+    // console.log('receiving')
+    // console.log(data)
+
+    // Handle component updates
+    const componentUpdates = data.schema?.components || data.schema?.pages
+    if (window.location.pathname.includes('/canvas') && componentUpdates) {
+      for (const updatedComponent in componentUpdates) {
+        if (Object.hasOwn(componentUpdates, updatedComponent)) {
+          this._context.element?.updateComponentOnCanvas(updatedComponent)
+        }
+      }
+    }
+
+    // // Update state
+    // // eslint-disable-next-line no-unused-vars
+    // const { userId, ...restData } = data
+    // const dataToApply = {}
+    // Object.keys(restData)
+    //   .filter(v => this._ignoreSync.includes(v))
+    //   .forEach(v => {
+    //     dataToApply[v] = restData[v]
+    //   })
+
+    // console.log('receiving')
+    // console.log(data)
+
+    // this._context.state?.rootUpdate(dataToApply, {
+    //   fromSync: true,
+    //   preventStateUpdateListener: true,
+    //   execStateFunction: true,
+    //   preventUpdate: ['Iframe'],
+    //   preventModalUpdate: true,
+    //   forceMonacoUpdate: true,
+    //   forcePreviewUpdate: true
+    // })
+  }
+
+  _handleClientsEvent (data) {
+    const { root } = Object.getPrototypeOf(this._context.state)
+    root.replace(
+      { clients: data },
+      {
+        fromSync: true,
+        preventUpdate: ['Iframe'],
+        preventModalUpdate: true,
+        preventStateUpdateListener: true,
+        execStateFunction: true
+      }
+    )
+  }
+
+  _handleRouteEvent (data) {
+    const { element } = this._context
+    const { state } = this._context
+
+    if (data.userId && data.type === 'routeChanged') {
+      const isModalOpen = this.getWindow('modal')
+      const isFollowing = state.followingUser === data.userId
+      const isRouteSyncEnabled =
+        element.getUserSettings('presentMode') && data.userId === state.userId
+
+      if ((isFollowing || isRouteSyncEnabled) && !isModalOpen) {
+        router(
+          data.route,
+          element.__ref.root,
+          {},
+          {
+            fromSync: true,
+            updateStateOptions: {
+              fromSync: true,
+              preventStateUpdateListener: 1 // !isModalRoute(data.route, element)
+            }
+          }
+        )
+      }
+    } else if (data.reload) {
+      window.location.reload()
+    } else if (data.route && data.type === 'routeForced') {
+      router(
+        data.route,
+        element.__ref.root,
+        {},
+        {
+          fromSync: true,
+          updateStateOptions: {
+            fromSync: true
+          }
+        }
+      )
+    } else if (data.componentKey) {
+      if (!element.getData('components')[data.componentKey]) {
+        return
+      }
+      element.activateSelected(data.componentKey)
+    }
+  }
+
+  _handleDisconnect () {
+    this._updateStatus('disconnected')
+    this._handleReconnect()
+  }
+
+  _handleReconnect () {
+    if (this._reconnectAttempts < this._maxReconnectAttempts) {
+      this._reconnectAttempts++
+      this._updateStatus('reconnecting')
+
+      setTimeout(() => {
+        this.connect()
+          .then(() => {
+            this._reconnectAttempts = 0
+          })
+          .catch(() => {
+            this._handleReconnect()
+          })
+      }, this._reconnectDelay * this._reconnectAttempts)
+    } else {
+      this._updateStatus('failed')
+      this._setError(new Error('Max reconnection attempts reached'))
+    }
+  }
+
+  _updateStatus (status) {
+    this._info = {
+      ...this._info,
+      config: {
+        ...this._info.config,
+        status
+      }
+    }
+  }
+
+  destroy () {
+    if (this._socket) {
+      disconnect.call(this._socket)
+      this._socket = null
+    }
+    this._handlers.clear()
+    this._setReady(false)
+  }
+
+  reconnect () {
+    this.destroy()
+    this.connect()
+  }
+
+  _checkRequiredContext () {
+    return Boolean(
+      this._context?.appKey && this._context?.authToken && this._socket
+    )
+  }
+
+  isReady () {
+    if (this._checkRequiredContext()) {
+      this._setReady(true)
+    }
+
+    return this._ready
+  }
+}

package/src/services/SocketService.js

@@ -0,0 +1,168 @@
+import { BaseService } from './BaseService'
+
+export class SocketService extends BaseService {
+  constructor (config) {
+    super(config)
+    this._socket = null
+    this._reconnectAttempts = 0
+    this._maxReconnectAttempts = config?.maxReconnectAttempts || 5
+    this._reconnectDelay = config?.reconnectDelay || 1000
+    this._handlers = new Map()
+  }
+
+  async init ({ context, options }) {
+    try {
+      this._context = context
+      this._options = options
+      const { authToken } = context
+      const { socketUrl } = context.socket || {}
+
+      if (!socketUrl) {
+        throw new Error('Socket URL is required')
+      }
+
+      this._info = {
+        config: {
+          url: socketUrl,
+          hasToken: Boolean(authToken),
+          status: 'initializing'
+        }
+      }
+
+      await this.connect()
+      this._setReady()
+    } catch (error) {
+      this._setError(error)
+      throw error
+    }
+  }
+
+  connect () {
+    try {
+      const { socketUrl, authToken } = this._context.socket || {}
+
+      this._socket = new window.WebSocket(socketUrl)
+
+      this._socket.onopen = () => {
+        this._reconnectAttempts = 0
+        this._updateStatus('connected')
+
+        // Authenticate if token available
+        if (authToken) {
+          this.send('auth', { token: authToken })
+        }
+      }
+
+      this._socket.onclose = () => {
+        this._updateStatus('disconnected')
+        this._handleReconnect()
+      }
+
+      this._socket.onerror = error => {
+        this._updateStatus('error')
+        this._setError(error)
+      }
+
+      this._socket.onmessage = event => {
+        this._handleMessage(event.data)
+      }
+    } catch (error) {
+      throw new Error(`Socket connection failed: ${error.message}`)
+    }
+  }
+
+  // Send message to socket server
+  send (type, data) {
+    this._requireReady()
+
+    if (!this._socket || this._socket.readyState !== window.WebSocket.OPEN) {
+      throw new Error('Socket is not connected')
+    }
+
+    this._socket.send(JSON.stringify({ type, data }))
+  }
+
+  // Subscribe to socket events
+  subscribe (type, handler) {
+    if (!this._handlers.has(type)) {
+      this._handlers.set(type, new Set())
+    }
+
+    this._handlers.get(type).add(handler)
+
+    return () => {
+      const handlers = this._handlers.get(type)
+      if (handlers) {
+        handlers.delete(handler)
+        if (handlers.size === 0) {
+          this._handlers.delete(type)
+        }
+      }
+    }
+  }
+
+  subscribeChannel (type, handler) {
+    return this.subscribe(type, handler)
+  }
+
+  // Private methods
+  _handleMessage (rawData) {
+    try {
+      const { type, data } = JSON.parse(rawData)
+      const handlers = this._handlers.get(type)
+
+      if (handlers) {
+        handlers.forEach(handler => handler(data))
+      }
+    } catch (error) {
+      this._setError(new Error(`Failed to handle message: ${error.message}`))
+    }
+  }
+
+  _handleReconnect () {
+    if (this._reconnectAttempts < this._maxReconnectAttempts) {
+      this._reconnectAttempts++
+      this._updateStatus('reconnecting')
+
+      setTimeout(() => {
+        this.connect()
+      }, this._reconnectDelay * this._reconnectAttempts)
+    } else {
+      this._updateStatus('failed')
+      this._setError(new Error('Max reconnection attempts reached'))
+    }
+  }
+
+  _updateStatus (status) {
+    this._info = {
+      ...this._info,
+      config: {
+        ...this._info.config,
+        status
+      }
+    }
+  }
+
+  // Cleanup
+  destroy () {
+    if (this._socket) {
+      this._socket.close()
+      this._socket = null
+    }
+    this._handlers.clear()
+    this._setReady(false)
+  }
+
+  _checkRequiredContext () {
+    const { socket } = this._context
+    return Boolean(socket?.socketUrl && this._socket)
+  }
+
+  isReady () {
+    if (this._checkRequiredContext()) {
+      this._setReady(true)
+    }
+
+    return this._ready
+  }
+}