Supporting Synchronization for Slidev Deployments in Production Environments

[li1553770945]

Is your feature request related to a problem? Please describe.

In the current implementation, the Slidev development environment initiated via yarn dev synchronizes page transitions, mouse clicks, and drawing actions in the presenter view across multiple users. This synchronization feature is crucial for collaborative usage.

However, deploying Slidev on a cloud server for multi-user access presents challenges. The development mode (yarn dev) is not suitable for production deployment. Conversely, deploying a static build using yarn build results in the loss of synchronization capabilities, as static pages inherently do not support dynamic backend interactions.

One of my thoughts is, would it be possible to support listener functions for these operations, as well as providing functions to be able to manually set page switching (currently implemented) and painting? This way, users can use these functions to manually implement their own synchronization mechanisms.

Describe the solution you'd like

Event Listener Integration: Enable developers to define custom listener functions for slide transitions, mouse clicks, and drawing actions. These functions should trigger upon user interactions, such as page changes or drawing modifications.

Serialization Support:Enable developers to retrieve the current currentPage and clicks( these have now been implemented), along with the serialized drawing data.This would facilitate the transfer of drawing data across a network.

Control and Animation Functions: Introduce methods to programmatically set the slide currentPage, clicks(Toggle animation is also supported). Allow developers to apply all current drawings using serialized data (obtained in the previous step and transmitted over the network).

Describe alternatives you've considered

Currently, I am utilizing Vue's watch function to monitor changes in currentPage and clicks. However, this approach lacks efficiency and elegance. Moreover, I am uncertain about the best method to obtain a serialized form of the drawings for network transmission.

[fullmetal-fred]

Just wanted to echo this one. I'm running a multi-day class out of my slidev project...students are expected to pull up the presentation locally and follow along. slidev --remote works fine for the sync experience, so I've built a container around it and deployed it to my cluster for now...but the page loads can be really wonky...often times I have to hard refresh my browser window in order for the presentation to come up after changes. Sometimes it just crashes on first load then refreshes and works fine. This experience, while fine for dev, isn't fine for less technical users in a prod use case. It would be great if static site generation "just worked" with sync if enabled in frontmatter.

[KermanX]

I agree this feature is quite useful.

slidev build generates a SPA without a server, and may be deployed to a static website host like GitHub pages. So in most cases, there isn't a server for synchronization after deployment.

Maybe we can write a stand-alone server for synchronization service. And Slidev itself can expose the state sync APIs. I will try this maybe in the next month or later. PR welcome!

@fullmetal-fred, When you have time, could you help send a minimal reproduction in a new issue if the crashes you mentioned above happen often, thanks a lot~

[tonai]

For info I created a PR to centralize the handling of state synchronization here: #1854
I also created a WS/SSE server and a sync addon that uses that new, not yet published, feature.