Spying activities of another user

Question

I want to write page, which enables spying activity of another user.

Two users watches the same page, which is very simple (vertical scrollbar, inputs, buttons, checboxes...). Each actions performed by first user on his page is immediately seen for second user. For example, if first user clicks button, then second user watches that click on his own page (pages of both user looks identically). Simply, second user can see everything what the first user is doing (in real time)

Of course, I assume, that I control the code of this webpage.

And my questions:

Is there a simple way to do that, or I have to write handler for each event and send data to second user using Ajax Web Sockets explicitly? Is it possible to intercept the frame of another user without necessity of handle each action?

I wrote basic version of this spying program, which is based on websockets. Each action performed by first user is send to another user.
After receiving a message, program parse data, and invokes appropriate method, so I have the same behaviour on both pages. It works correct, but using this approach it would be more complicated task if I want to do that without complete the knowledge of page (In my version users have the same html content, so I can apply these method). All in all, I am looking for simpler solution (without neccessity of handling each event).

I had browsed about 50 webpages, articles and answers at Stack Overflow by now, but haven't found anything that talks about simpler solution (My friend asked similar question, but there are only few answers). I'm not interested in full solution, I hope that you give me some valuable hints or apparent links. Maybe I didn't enter correct phrase...

Thank you for your help

Answer 1

Your question is most probably getting downvoted because it sounds malicious. Rather than asking a question with the word 'spying' in the title, I would use the word 'collaborate' instead. From what I just read above, it seems that what you want to do is work on the same screen as another client, not 'spy' on them.

Anyhow, to answer your question:

Have you come accross togetherJS before? This is a plugin which allows real time collaboration between 2 or more users. Your entire DOM actions will show up on a partner's screen, so you will no longer need to write event handler actions for each element within your DOM. The project is also hosted by mozilla, so you don't even have to host a realtime server yourself to make use of the plugin. Win!

There are some brilliant demos on the project webpage demonstrating the plugin's use. Check out the collaborative drawing demo for a simple, yet effective example.

As for actually integrating the plugin into your website, it couldn't be easier. Simply include the hosted script on your page like this:

<script src="https://togetherjs.com/togetherjs-min.js"></script>

Then initialise the plugin on your website. This can be done in a document ready event, or by using a button as you see in the example:

<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

Now when you want to start a collaboration session, simply invite another client to your page and you will both be able to see what happens on the page between both users in live time.

Hope this helps you out.