Function SocketProvider

apps/sim/app/workspace/providers/socket-provider.tsx:152–1180

({ children, user }: SocketProviderProps)

}

export function SocketProvider({ children, user }: SocketProviderProps) {
  const [socket, setSocket] = useState<Socket | null>(null)
  const [isConnected, setIsConnected] = useState(false)
  const [isConnecting, setIsConnecting] = useState(false)
  const [isReconnecting, setIsReconnecting] = useState(false)
  const [isRetryingWorkflowJoin, setIsRetryingWorkflowJoin] = useState(false)
  const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(null)
  const [currentSocketId, setCurrentSocketId] = useState<string | null>(null)
  const [authFailed, setAuthFailed] = useState(false)
  const [blockedJoinWorkflowId, setBlockedJoinWorkflowId] = useState<string | null>(null)
  const [explicitWorkflowId, setExplicitWorkflowId] = useState<string | null>(null)
  const initializedRef = useRef(false)
  const socketRef = useRef<Socket | null>(null)
  const currentWorkflowIdRef = useRef<string | null>(null)
  const explicitWorkflowIdRef = useRef<string | null>(explicitWorkflowId)
  const joinControllerRef = useRef(new SocketJoinController())
  const joinRetryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const authRetryAttemptsRef = useRef(0)
  const authRetryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  const params = useParams()
  const urlWorkflowId = params?.workflowId as string | undefined
  const urlWorkflowIdRef = useRef(urlWorkflowId)
  urlWorkflowIdRef.current = urlWorkflowId
  explicitWorkflowIdRef.current = explicitWorkflowId

  const eventHandlers = useRef<{
    workflowOperation?: (data: WorkflowOperationBroadcast) => void
    subblockUpdate?: (data: SubblockUpdateBroadcast) => void
    variableUpdate?: (data: VariableUpdateBroadcast) => void
    cursorUpdate?: (data: CursorUpdateBroadcast) => void
    selectionUpdate?: (data: SelectionUpdateBroadcast) => void
    workflowDeleted?: (data: WorkflowDeletedBroadcast) => void
    workflowReverted?: (data: WorkflowRevertedBroadcast) => void
    workflowUpdated?: (data: WorkflowUpdatedBroadcast) => void
    workflowDeployed?: (data: WorkflowDeployedBroadcast) => void
    operationConfirmed?: (data: OperationConfirmedBroadcast) => void
    operationFailed?: (data: OperationFailedBroadcast) => void
  }>({})

  const positionUpdateTimeouts = useRef<Map<string, number>>(new Map())
  const pendingPositionUpdates = useRef<Map<string, any>>(new Map())

  /**
   * Presence is high-frequency (cursor frames many times per second) so it lives
   * in {@link usePresenceStore}, not the broad socket context — writing it here no
   * longer mints a new context value, so emitter-only `useSocket()` consumers stop
   * re-rendering on every cursor frame. These thin wrappers delegate to the store's
   * stable actions read via `getState()`.
   */
  const setPresenceUsers = useCallback((users: PresenceUser[]) => {
    usePresenceStore.getState().setPresenceUsers(users)
  }, [])

  const updatePresenceUsers = useCallback((updater: (prev: PresenceUser[]) => PresenceUser[]) => {
    usePresenceStore.getState().updatePresenceUsers(updater)
  }, [])