Is it possible to “stream” locally controled Vue.js page, so all the devices share the same state?

I’m making a simple teleprompter app, and the idea is to control it through a local PC but to have the same view/Vuex state while accessing the page from my tablet. So, same page, same state, multiple devices.

Do I understand correctly that the only way is to duplicate all the mutation requests to the server, save them to the DB, monitor changes in the DB, and replicate them on the “client” device?

I could always share the screen image as a video, so the question is theoretical, and any ideas would do 🙂

P.S. Similar-looking problem: Recommended strategy to sync vuex state with server.

Answer

Sure it’s possible. Here are 3 bold approaches:

1. Server as a storage. I assume both devices are logged in under the same user-id. Each device has a socket connection to the server. Whenever one device changes its state it send it to the server, then the server relay this state to all connected devices.
2. Server as a proxy. Both devices create a direct socket connection using a server. One client sends all its changes directly to another.
3. Direct P2P via webRTC. Two clients establish a direct client-to-client connection.