Synchronizing Website (DOM) on multiple devices

问题:

I need to invent a method to synchronize multiple devices that are connected to a Website. Lets say I have a Tablet and a Laptop and change some elements of the dom on the laptop. Then the website on the Tablet should change accordingly.

At first I need a way to monitor the dom changes. I read a lot in forums and have also tried to work with browser-synch (https://github.com/shakyShane/browser-sync) but it does not monitor all events. However it may happen that the websites are not in synch.

I have also tried to use the new MutationServer techniques. But I am not sure how exactly to update the websites on the other devices:

In case a new node has been added to the DOM I first have to determine its position inside the tree; then send all the informations to the other clients (i guess via nodejs and socketio). The clients have to put the newly created node in the right position of their tree.

In case a node has been edited or removed I have to react on it as well...

So my question is: Do you have any ideas or literature to solve my problem? I just need some good hints to start because I am not really sure which method leads me to the "best" solution. I want to invent an efficient solution as well. Sure, I could monitor the DOM by checking x times in a second whether changes occured. But this method is not really efficient especially not for mobile devices.

Hope you guys can help me and lead me to the right direction.

Best regards.

回答1:

note: There is nothing ready and this is not so simple to do.

1. Capture all DOM maybe this will help you: AcID DOM Inspector
2. Capture "event Listeners" use Visual Event 2

Avoid capture frames (or use them) because security issues (cross-origin) may occur.

In my view it is not necessary to capture the entire document, it would only be necessary to capture inserts the "BODY" and "HEAD"

And avoid complex structures, perhaps the events (eventslistiners) need not be captured, only you would need to have a library that adds already existing events. Unless the events are created by customers, in which case you will have to capture them.

To transmit them you have to use Ajax and shared with DataBase (SQLServer, Mysql, MongoDB, etc).

From my point of view:

If you want to create is an application just to share data, for example someone posted a "new photo" or a "new comment", would be better to make the transmission of which was inserted in the "database" for "JSON" and clients read the "JSON" your main "javascript library" would dynamically generate the contents.

Thus would transmit much less making things faster and easier to implement process.