Search code examples
javascriptphphtmllive-streamingbroadcasting

Live streaming online editor in the website


I am working on a project of IDEs and Compilers. So I want to live stream the editor to the members in the same website, but I don't want it to be a video streaming like YouTube Live. Editor should be read-only for others

Note : Editor is built-in to the webpage


Solution

  • This is how I would approach this problem and I will gladly update anything based on comment feedback if I did something improperly or without proper structure.

    To achieve near-real-time updates such as google docs has, you need some form of packet/data communication. Usually, this involves some kind of database, or transmitter of packet data to users in a session. My guess is that Google keeps a small cache for your document of who is currently using the document. Then it gathers the data for the page, checks the size and sees if it has changed since it last checked. It would change size after an edit is made by someone, and there is likely a helper method that makes sure that if you weren't the one that made the change, it doesn't start an infinite loop of sending changes to people after 1 person typed 1 letter. So, now the page recognizes that you've made a change, so it 'sends a packet of data' containing the new document contents to the browsers. The other people that didn't make that edit will receive the changes because their client (session of google docs) is constantly checking a small cache for the document that is used to 'transmit' the data. The other client sessions then have a check loop that will send an ajax request to the cache every so often to check for an update. If it detects there is one, then it pulls that data and updates the document appropriately.

    To achieve this 'vide' view you're talking about, it would be the equivalent of someone viewing a google docs page and not being allowed to do anything but view it whilst someone else (you) edits it on their session.

    I hope that this has helped you in understanding what you need to do to approach this task.

    Helpful links:

    1. Ajax info: click me
    2. JavaScript info: click me