Serializing/mirroring JavaScript mouse/touch events

Question

I'd like to mirror JavaScript mouse/touch events between two browsers by ideally serializing and sending them over from browser A to browser B. It seems the mouse event object contains circular references and is therefore not serializable.

Ultimately what I want to achieve is to raise the same events in a remote browser that are firing in the local one.

Given that the event references local DOM objects, it may well be that using the mouse or touch events is not the way to go. Any hints/ideas appreciated.

What are you actually trying to accomplish here? Could it be done with remote tools like [weinre](http://phonegap.github.com/weinre/) or [js-test-driver](http://code.google.com/p/js-test-driver/)? — nrabinowitz, Nov 22 '11 at 22:12
This isn't for testing. I'd like to send over the user's gestures from one device to another. If User A is in front of an iPad running Safari, I want to send over the touch gestures to another browser. The transport layer is straight forward, I just need to find the JavaScript construct that can be sent over the wire. — Peter Moskovits, Nov 22 '11 at 22:57

score 2 · Answer 1 · answered Nov 23 '11 at 00:16

Likely what you're going to need to do is to decide on a subset of the properties, variables, etc that you want to transfer. Store them in an object literal that can be serialized. Since you would be building the object yourself, you can control for circular references.

For your events, you're going to need to setup event listeners for anything you need to capture.

I might suggest looking into something like Backbone.js. It provides some interesting features like key/value observing which might be helpful for you.

Additionally, this sounds like an app that node.js would be very good for. Since it also supports Backbone, you could conceivably create a client and server js environment that mirror each other in terms of events, variables, etc. When the user on the iPad does something that updates the client model, those changes can be serialized and sent to the node server. It would then update its internal representation of the client model and push those changes out to the other clients using something like socket.io.

+1 for bringing up WebSockets - actually that's exactly that I'm trying to achieve. Instead of node.js, I'm using the Kaazing WebSocket server for super high performance tasks... Thanks for your thoughts, though! — Peter Moskovits, Nov 23 '11 at 07:18

score 1 · Accepted Answer · edited May 23 '17 at 12:03

It seems to me you have two separate problems here:

How to capture and serialize mouse events. This is pretty straightforward.
How to re-create those mouse events in another context. This is tricky.

Even without using a library like jQuery, capturing mouse events is fairly simple (especially if, as you imply, you can be sure of the browser the client will be using). All you need to do is listen for the event, grab the information you need, and send it through your transport layer, e.g.

document.body.addEventListener('click', function(e) {
    sendToOtherBrowser({ type: 'click', pageX: e.pageX, pageY: e.pageY });
}, false);

I don't know that you'd need much more than event type and location for most events. The harder part is taking this event data and re-creating it elsewhere. To do that, as I think you note, you'd need to:

capture e.target as well
come up with a serializable unique id for the DOM element
send the id with your event data
use the unique id to get a reference to the DOM element in your other browser
use something like myUniqueElement.dispatchEvent to recreate the event

I'd say (2) and (4) are the tricky parts here - you might take a look at these related questions for ideas. For (5), you can take a look at the event simulation examples here.

All that said, I have no idea how that might work for touch events - it may not be as easy as it is for mouse events (already not that easy).

Serializing/mirroring JavaScript mouse/touch events

2 Answers2