javascript – How to create real-time live collab tool for a web page?


I want to create a normal web page with images, buttons, elements, etc. I want to be able to turn on live mode, and then have this page be interactive with multiple users.

So I can start a session, send the link to others, let’s say 5 people, and then we can all click around on the page and the result of this clicking around will appear for everyone. So if you click on a button and a modal opens, it needs to open for everyone else. The idea here for what needs to be “real-time” is simply like this, and nothing complicated, just a static web page.

An example is, if I click a button and the background changes to red, it changes to red for all live users, and also the ability to track cursors with names like Miro Board.

All the tutorials and articles I’ve seen, like using collaboration engine, or meteor.js, or others, are purely for canvas/document collaboration like Google Docs, Miro Board, etc.

What I want to know is,
1. Is this possible, to have live collaboration on a web elements like button or navigation rather than a form or a canvas, if so how would I do this?
3. What would the logic flow for a code sample for this look like? What data do I track, send to the server, and what data do the other users receive, etc?



Source link

Leave a Comment