Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to build undo/redo in a multiplayer environment by Liveblocks

liveblocks.io

Post reply on HN
Print view View original

21–30 of 49 posts

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#21

Post by aranchelk »

hamtr wrote: post #17
aranchelk wrote: post #16

> Depending on the use case, the state of features like user selection, user page selection, user zoom setting, etc. could be included in the undo/redo stack to provide a great experience. Does anyone have an idea what these use cases could be? My mental model for undo/redo is based on productivity applications and I’m at a loss; I’m genuinely curious though since this is something I’ve been implementing.

In design tools, like Figma, undo sometimes just walks backwards through your selection (even if you didn't change anything). It'll even switch between pages. I'm interesting in seeing if there are other ones people can bring up

Interesting, that's a really good one, thank you.

Now that I'm thinking about it, when I used to use Autodesk Fusion 360 I think it did this a bit, but until now I thought it was just another bug: they had accidentally added some UI state changes to the undo stack.

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#23

Post by [deleted] »

aranchelk wrote: post #16

> Depending on the use case, the state of features like user selection, user page selection, user zoom setting, etc. could be included in the undo/redo stack to provide a great experience. Does anyone have an idea what these use cases could be? My mental model for undo/redo is based on productivity applications and I’m at a loss; I’m genuinely curious though since this is something I’ve been implementing.

[deleted]

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#24

Post by aranchelk »

guillaumesalles wrote: post #20
hamtr wrote: post #17

Earlier quoted context omitted.

In design tools, like Figma, undo sometimes just walks backwards through your selection (even if you didn't change anything). It'll even switch between pages. I'm interesting in seeing if there are other ones people can bring up

For rich text editing, undo should probably reset the scroll position and the cursor close the edit you're undoing. I think reseting the time position would also make sense for video editing. So basically, it's a way to get back as much as possible in the context you were at the time of the operation that is undone.

Thank you, this is both a good and nuanced example.

It would likely be a better UX if that scrolling (etc) brought the user back to the exact context they made that edit, but in the interest of laziness and impatience I'm just using a generic focus function.

It might be nice to have more exact context data available for the life of a session as a progressive enhancement, though I think it would have to be a clever encoding, else that data would be invalid in cases such as window resizes and edits made by collaborators that change position of the object being edited.

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#25

Post by guillaumesalles »

upupandup wrote: post #22

Is there a provider that has "websockets all over the world on edge" ? Right off the bat I am not a target customer because I don't use React. Coming from Vue/Svelte

Our code client does not depend on any front-end technology, so you can use it with Svelte or Vue. We have a few examples that use Vue and Svelte here: https://github.com/liveblocks/liveblocks/tree/main/examples

Our most advanced Svelte example is this one : https://pixelart.liveblocks.app/

If there is enough demand, we'll make an official wrapper for Vue and Svelte!

If you're looking for WebSocket without all the state synchronization we provide, there are a few well-known providers like Ably or Pusher.

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#26

Post by upupandup »

guillaumesalles wrote: post #25
upupandup wrote: post #22

Is there a provider that has "websockets all over the world on edge" ? Right off the bat I am not a target customer because I don't use React. Coming from Vue/Svelte

Our code client does not depend on any front-end technology, so you can use it with Svelte or Vue. We have a few examples that use Vue and Svelte here: https://github.com/liveblocks/liveblocks/tree/main/examples Our most advanced Svelte example is this one : https://pixelart.liveblocks.app/ If there is enough demand, we'll make an official wrapper for Vue and Svelte! If you're looking for WebSocket without all the st…

love it! thanks for the response. So the state synchro is not possible in Ably? Trying to understand what liveblocks does on top of what Ably/Pusher provides

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#27

Post by jkarneges »

upupandup wrote: post #22

Is there a provider that has "websockets all over the world on edge" ? Right off the bat I am not a target customer because I don't use React. Coming from Vue/Svelte

Fastly announced Fanout today, which is exactly this https://www.fastly.com/blog/unlocking-real-time-at-the-edge

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#29

Post by guillaumesalles »

upupandup wrote: post #26
guillaumesalles wrote: post #25

Earlier quoted context omitted.

Our code client does not depend on any front-end technology, so you can use it with Svelte or Vue. We have a few examples that use Vue and Svelte here: https://github.com/liveblocks/liveblocks/tree/main/examples Our most advanced Svelte example is this one : https://pixelart.liveblocks.app/ If there is enough demand, we'll make an official wrapper for Vue and Svelte! If you're looking for WebSocket without all the st…

love it! thanks for the response. So the state synchro is not possible in Ably? Trying to understand what liveblocks does on top of what Ably/Pusher provides

To summarize the differences between Ably/Pusher and Liveblocks, Ably/Pusher use a centralized Redis to broadcast messages to channels. Liveblocks has tiny isolated servers on the edge for every room. These two different architectures create the following trade-offs:

- Ably/Pusher are lower level than Liveblocks. It doesn't have any storage associated to a channel and does not solve any conflicts.

- Liveblocks provides API to migrate existing app into collaborative ones via integration with state management library like Redux/Zustand. I have a POC somewhere that try integrate with Vuex, would love to release that at some point!

- Ably/Pusher charges per WebSocket message sent. Liveblocks charges per WebSocket connection. Because of that, building features like cursors can become quite expensive on Pusher.

- Ably/Pusher lets you connect to multiple channels with a single WebSocket connection (because they're using a centralized Redis IIRC). Liveblocks requires a single WebSocket connection per room. Pusher is good for notifications systems, Liveblocks shines when you need to build an app like Figma or Google spreadsheet.

Hope it helps!

Post reply on HN