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

Re:How to build undo/redo in a multiplayer environment by Li... by guillaumesalles on Thursday June 09, 2022 @12:53PM (#31683626)

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.

[ Parent | on HN ]

Re:How to build undo/redo in a multiplayer environment by Li... by upupandup on Thursday June 09, 2022 @01:14PM (#31683960)

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

[ Parent | on HN ]

Re:How to build undo/redo in a multiplayer environment by Li... by guillaumesalles on Thursday June 09, 2022 @01:51PM (#31684467)

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!

[ Parent | on HN ]