How to make an iframe accessible by multiple users?

Question

I want to make it possible that multiple users can view the same website (a specific URL that all agree on) and all events of the users will be shared so that everyone has the same state. So that you can use a website with multiple people but the website thinks there is only one person, similar to when you use one computer with multiple people.

I have two ideas for how to do this:

1. The client-sided approach: everyone loads the same page with an iframe and then it detects all events of the users and sends these to each other so everyone has the same state.

   Problems:

   • Each user might use a different browser and the website can be different for everyone and desynchronisation can also happen.
   • Emulating clicks might be difficult.

2. The server-sided approach: load the website only once on the server and then send all user events to the server and stream back the website's pixels back to the users.

   Problems:

   • Streaming back the website's state (its look, the pixels) to all the users could be quite expensive, but maybe it could only update the pixels that actually changed, instead of all pixels of the website.

Because approach 1 doesn't seem very feasible, I would like to try approach 2, but I'm not sure where to start there. Do I make the server open the URL in its browser and let the system emulate clicks on the browser?

What is the best approach to solve this, are there more and better approaches?

Abbie

As far as I know, only Google has managed to do this with their Docs and Sheets. It blew my mind back then, it keeps blowing my mind today. If you manage to equal them, hats off. – Oaten

@mplungjan I don't get useful results when looking that text up. – Abbie

@JeremyThille you mean that multiple users can edit one document? That doesn't sound very hard to do and I think it's different from this one because here I want multiple users to be able to interact with any website, not just edit documents. – Abbie

Well if it doesn't sound very hard to do, why do you post a question on Stackoverflow asking people how to do it? :) I can assure you that it looks very hard to accomplish to me. If you can do it easily, then good for you, please share your solution :) – Oaten

@JeremyThille but there is a difference between editing documents and what I want to do. – Abbie

Use SignalR if you are a .net developer. learn.microsoft.com/en-us/aspnet/core/signalr/… – Alcoholism

Answer 1

It looks like you need to create a reactive application. So, your web page will serve any content to many users at the same time and they will be able to interact with this app almost in real time (milliseconds). All users will be able to see all interactions.

I have used the above scenario using Meteor, which is reactive by default. Of course you can use other frameworks too or try the difficult way to manipulate communication between clients by yourself, using some clever javascript.

Mezzosoprano

Answer 2

ProseMirror is an open source web-based editor that was designed with collaborative editing in mind:

• Live demo of collaborative editor
• Source code for demo

I suggest using ProseMirror as a base, then modify it for your needs. ProseMirror defines a text-based document data structure. ProseMirror renders this data-structure as as a web-based editor, but you could render the data structure however you desire:

1. Render the document data structure as a web page.
2. Clicking the webpage alters the underlying document data structure.
3. ProseMirror takes care of synchronizing the document data structure on all the clients.
4. Other clients render the updated document.

If you are more interested in creating your own thing completely from scratch, I would study how ProseMirror did this:

• A single authority (the server) maintains the "official" version of the document. Clients send requests to update the document, which the authority handles and broadcasts to all other clients.
• Note peer-to-peer (called 'client-sided approach' in the question) can also have an authority, but there is added complexity to determine and maintain the authority. So server-client is simpler to implement
• Minimize network bandwidth. Sending every pixel or click event is expensive. (Also clicks may result in different, diverging documents on different clients.) Ideally, transactions are sent, which are deltas describing how the document changed.

There was a similar question, where I went into more detail: Creating collaborative whiteboard drawing application

Chapbook

Answer 3

1. For the desynchronization problem you can create a website that'll look the same to all by using styles. Like fixed dimensions for all browsers and screen sizes. That'll help in rendering the same version and same dimension to all the users.
2. For click synchronization you can use node sockets. By using this you can manage a server-side directory for a group of users and share the same events using peer-to-peer sockets. This is similar to the group chat functionality. https://socket.io/ can help you in implementing this. Node Sockets are also used in client-side multi-user games for making the same connected experience to both the users. This would be a client-server solution so that you can manage everything from the server and provide a good experience to your users.

Hope this helps. If you need additional information on this please drop a comment.

Thready