@symbo.ls/sdk 3.1.1 → 3.2.3

package/src/services/SocketService.js

@@ -1,4 +1,11 @@
-import { BaseService } from './BaseService'
+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) {
@@ -8,14 +15,31 @@ export class SocketService extends BaseService {
     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'
+    ]
   }
 
-  async init ({ context, options }) {
+  init () {
     try {
-      this._context = context
-      this._options = options
-      const { authToken } = context
-      const { socketUrl } = context.socket || {}
+      const { _context, _options } = this
+      const socketUrl = environment.socketUrl || _options.socketUrl
 
       if (!socketUrl) {
         throw new Error('Socket URL is required')
@@ -24,12 +48,11 @@ export class SocketService extends BaseService {
       this._info = {
         config: {
           url: socketUrl,
-          hasToken: Boolean(authToken),
+          hasToken: Boolean(_context.authToken),
           status: 'initializing'
         }
       }
 
-      await this.connect()
       this._setReady()
     } catch (error) {
       this._setError(error)
@@ -39,93 +62,233 @@ export class SocketService extends BaseService {
 
   connect () {
     try {
-      const { socketUrl, authToken } = this._context.socket || {}
-
-      this._socket = new window.WebSocket(socketUrl)
+      // 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
+      }
 
-      this._socket.onopen = () => {
-        this._reconnectAttempts = 0
-        this._updateStatus('connected')
+      const { _context } = this
 
-        // Authenticate if token available
-        if (authToken) {
-          this.send('auth', { token: authToken })
-        }
+      if (!_context.appKey) {
+        throw new Error('App key is required')
       }
 
-      this._socket.onclose = () => {
-        this._updateStatus('disconnected')
-        this._handleReconnect()
+      // 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,
+        // onConnect: () => {
+        //   console.log('waz')
+        // },
+        onChange: this._handleMessage.bind(this),
+        sessionId: this._sessionId,
+        usersName: _context.user?.name,
+        route: window.location.pathname,
+        onDisconnect: this._handleDisconnect.bind(this)
       }
 
-      this._socket.onerror = error => {
-        this._updateStatus('error')
-        this._setError(error)
+      // If a previous socket exists but wasn't properly cleaned up, destroy it
+      if (this._socket) {
+        this.destroy()
       }
 
-      this._socket.onmessage = event => {
-        this._handleMessage(event.data)
+      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 message to socket server
-  send (type, data) {
+  send (type, data, opts = {}) {
     this._requireReady()
 
-    if (!this._socket || this._socket.readyState !== window.WebSocket.OPEN) {
+    if (!this._socket) {
       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())
+    const payload = {
+      sessionId: this._sessionId,
+      userId: this._context.user?.id,
+      usersName: this._context.user?.name,
+      ...data
     }
 
-    this._handlers.get(type).add(handler)
+    send.call(
+      this._socket,
+      type,
+      opts.useDeepStringify ? deepStringify(payload) : payload
+    )
+  }
+
+  _handleMessage (event, data) {
+    try {
+      const d = isString(data) ? deepDestringify(JSON.parse(data)) : data
+      if (this._sessionId === d.sessionId) {
+        return
+      }
 
-    return () => {
-      const handlers = this._handlers.get(type)
+      const handlers = this._handlers.get(event)
       if (handlers) {
-        handlers.delete(handler)
-        if (handlers.size === 0) {
-          this._handlers.delete(type)
-        }
+        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}`))
     }
   }
 
-  subscribeChannel (type, handler) {
-    return this.subscribe(type, handler)
+  _handleChangeEvent (data) {
+    const { type, changes, version } = data
+    if (version) {
+      this._context.state.version = version
+    }
+    if (changes) {
+      window.requestAnimationFrame(async () => {
+        await this._context.state.setPathCollection(changes, {
+          preventReplace: type === 'canvas',
+          preventUpdate: true,
+          fromSocket: true,
+          userId: data.userId,
+          changes
+        })
+      })
+    }
+
+    // monaco updates
+    // 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
+    // }
   }
 
-  // Private methods
-  _handleMessage (rawData) {
-    try {
-      const { type, data } = JSON.parse(rawData)
-      const handlers = this._handlers.get(type)
+  _handleClientsEvent (data) {
+    const { root } = this._context.state
 
-      if (handlers) {
-        handlers.forEach(handler => handler(data))
+    root.replace(
+      { clients: data },
+      {
+        fromSocket: true,
+        preventUpdate: true
       }
-    } catch (error) {
-      this._setError(new Error(`Failed to handle message: ${error.message}`))
+    )
+  }
+
+  _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,
+          {},
+          {
+            fromSocket: true,
+            updateStateOptions: {
+              fromSocket: 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,
+        {},
+        {
+          fromSocket: true,
+          updateStateOptions: {
+            fromSocket: 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()
+        try {
+          const connected = this.connect()
+          if (connected) {
+            this._reconnectAttempts = 0
+          } else {
+            this._handleReconnect()
+          }
+        } catch (error) {
+          console.error('Reconnection failed:', error)
+          this._handleReconnect()
+        }
       }, this._reconnectDelay * this._reconnectAttempts)
     } else {
       this._updateStatus('failed')
@@ -143,19 +306,24 @@ export class SocketService extends BaseService {
     }
   }
 
-  // Cleanup
   destroy () {
     if (this._socket) {
-      this._socket.close()
+      disconnect.call(this._socket)
       this._socket = null
     }
     this._handlers.clear()
     this._setReady(false)
   }
 
+  reconnect () {
+    this.destroy()
+    this.connect()
+  }
+
   _checkRequiredContext () {
-    const { socket } = this._context
-    return Boolean(socket?.socketUrl && this._socket)
+    return Boolean(
+      this._context?.appKey && this._context?.authToken && this._socket
+    )
   }
 
   isReady () {