How do we turn on and off room provider?

[kachar]

In our current setup, we use the live presence features of LiveBlocks and we're super happy with it 💚 We've integrated it with NextAuth, and that works flawlessly for the authentication part ✨

In order to satisfy the business requirements and avoid websocket connections for private projects(room per project), we need to tweak the code so it doesn't connect initially to live blocks servers.

- <RoomProvider id={projectUUID}>{children}</RoomProvider>
+ <RoomProvider id={projectUUID} withoutConnecting>{children}</RoomProvider>

The room provider seems to create the websocket connection on the component mount. If we remove the RoomProvider altogether all the hooks in the project are throwing errors.

How do you advise that we proceed with this need?

[kachar]

@nvie I've added a sample implementation that might be sufficient to provide the connection control to the devs.

The base idea is to pass on the withoutConnecting option to the <RoomProvider /> and then pass it internally to the client in the same way it's done for the SSR mode.

Please check it out at #484

[FlowFlorent]

Hello @kachar,

Thanks for the question and kind words!

Here's what I understand from your use case, let me know if any of it is wrong.

1. You have a component that is nested under which is your live component, it uses tools from @liveblocks/react and @liveblocks/client
2. You want to first have a display version of that component when users go to that page that is not yet connected to any Room.

Have you thought about using a substitution UI when you do not want to have it connected?

isConnected ? 
(
    <RoomProvider>
        <MyComponent />
    </RoomProvider>
) :
<MyComponent />

Where <MyComponent /> can work in both instances?
Or perhaps a <MyDisplayComponent /> when isConnected === false which only renders your initial state (disconnected from the Room data)?

Let me know if this helps 🙏

Cheers,

Florent

[kachar]

Thanks for the quick reply, indeed I see I didn't provide enough context.

• We've got projects that can be shared with team members.
• Each project lives at /project/[id] pathname.
• We've got custom context <ProjectProvider> that contains the <RoomProvider id={query.id}>
• Multiple nested components are passed as children to the project provider and room provider.

Adding super simplified version of the scenario:

const project = fetchProjectSomehow(query.id)
<ProjectProvider initial={project}>
  <RoomProvider id={project.id}>
    <Page />
  </RoomProvider>
</ProjectProvider>

const Page = () => {
  const project = useProject()
  return (
    <div>
      {/* these are working fine */}
      {project.isShared && <AvatarList />}
      {project.isShared && <CursorList />}
      <form>
        <TextField name="firstName" />
        <TextField name="lastName" />
      </form>
    </div>
  )
}

We've extracted the common focus logic in a custom hook that we call inside each of the focused input components.

export default function useLiveFocus(focusId: string) {
  const updateMyPresence = useUpdateMyPresence()
  const others = useOthers()

  const hasFocus = useMemo(
    () => others.some(({ presence }) => presence?.focusedId === focusId),
    [focusId, others],
  )
  const onFocus = (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    updateMyPresence({ focusedId: e.target.id })
  }
  const onBlur = () => updateMyPresence({ focusedId: null })

  return {
    hasFocus,
    handlers: { onFocus, onBlur },
  }
}

We've got various input components that implement live focus and use the hook which cannot be called conditionally.
Adding an alternate version of each of those components is not following the DRY principles.

const TextField = ({ name }: { name: string }) => {
  // We can't call the hook conditionally so we need to duplicate a lot of code
  const { hasFocus, handlers } = useLiveFocus(name)
  return <input type="text" id={name} name={name} disabled={hasFocus} {...handlers} />
}

The suggestion that is proposed with #484 is to disable the connection at the top-level.

const project = fetchProjectSomehow(query.id)
<ProjectProvider initial={project}>
  <RoomProvider id={project.id} withoutConnecting={!project.isShared}>
    <Page />
  </RoomProvider>
</ProjectProvider>

Do you think this is a valid scenario with the given context?

[kachar]

cc @FlowFlorent

[GuillaumeSalles]

Hey @kachar,

Thanks for all the details and the provided PR! Your use case was not immediately obvious to me at first, but the more I think about it, the more it makes sense, and I want to support it.

To make sure I got all the details right:

• You're using only the presence (not the storage)
• You want to establish connections to Liveblocks only when this is a shared project, which completely makes sense.
• You want to be able to fully reuse your <Page /> component whether the project is shared or not.

One additional question to make sure the API fits your needs:

• Does project.isShared change over time? Is it possible that your project is first rendered in a non-collaborative setup and then shared to enable collaboration without reloading the page?

Having withoutConnecting as a prop could be confusing if it can be used to force reconnections.

I'm thinking about:

• Adding a prop called shouldConnectInitially that would be considered only at the first render (like initialPresence and initialStorage.
• Provide a way to connect/disconnect from anywhere. room.connect / room.disconnect for example.

Also, let me know how urgent it is for you, and I might be able to ship a new version with a hidden prop like DO_NOT_USE_withoutConnecting until we get the API right.

Thank again for your feedback 🙇

[kachar]

Thanks for the update @GuillaumeSalles

I've just tested out the new version and it works great!

---

Here are my delayed answers to your questions:

You're using only the presence (not the storage)

yep

You want to establish connections to Liveblocks only when this is a shared project, which completely makes sense.

exactly

You want to be able to fully reuse your component whether the project is shared or not.

indeed

Does project.isShared change over time? Is it possible that your project is first rendered in a non-collaborative setup and then shared to enable collaboration without reloading the page?

Yes, this property changes when someone shares the project with another member. The project is initially rendered without a need for websockets connection and then, once shared, we need to enable them.

We've achieved that by using the key attribute to the RoomProvider so that it re-renders once this value changes.

const shouldConnect = useMemo(
  () => projectData.project?.isShared || false,
  [projectData.project?.isShared],
)

<RoomProvider
  id={`${env}-${projectId}`}
  key={`${env}-${projectId}-${shouldConnect}`}
  initialPresence={initialPresence}
  shouldInitiallyConnect={shouldConnect}>
  {children}
</RoomProvider>

Thanks to the whole team of @liveblocks for this quick and adequate reaction! 🥇