Node.js Server - how to pass buttonclick function from client to client

Here are few ideas to get you started:

You need to listen for every click event, either on the page itself and send coordinates of the click to the server, or listen for click events on elements and send e.g. an element id with every click event to the server.

The server needs to emit that event to every client except the originating one.

All clients that recieve such an event from the server need to simulate a click event.

I'll try to write a simple demo - I'll update the answer when I have a working example.

Update

Take a look at this example on GitHub:

• https://github.com/rsp/node-socket.io-remote

It has a simple Socket.IO server in app.js:

var path = require('path');
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static(path.join(__dirname, 'html')));

io.on('connection', s => {
  console.error('socket.io connection');
  s.on('click', d => {
    console.error('click on id '+d.id);
    s.broadcast.emit('click', d);
  });
});

http.listen(3002, () => console.error('Listening on http://localhost:3002/'));

See: https://github.com/rsp/node-socket.io-remote/blob/master/app.js

And client code in html/index.html using jQuery like in your question:

var ownClick = true;
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });
s.on('click', function (d) {
  log('received click message, id ' + d.id);
  ownClick = false;
  $('#'+d.id)[0].click();
  ownClick = true;
});

$('.remote').click(function (e) {
  if (ownClick) {
    log('emitting click message, id ' + e.target.id);
    s.emit('click', {id: e.target.id});
  }
});

(The log() function is defined in the source but I don't include it here for simplicity)

See: https://github.com/rsp/node-socket.io-remote/blob/master/html/index.html

Important issues

There are few important issues here:

There is a line with:

$('#'+d.id)[0].click();

and not:

$('#'+d.id).click();

because we want to run a native browser's click() method instead of the jQuery one, which would work differently.

Also I have a ownClick variable normally set to true except when running a handler for incoming remote click event. That is because we won't to send that event again to other windows. For this example it is not really needed because we are leaving the page with every click but if we stayed on the page then the events would cascade: for example if we had 3 windows and one of them sent a click to the other two, those two would start emulating their own clicks and send those clicks again to the server and again, and again with no end.

Here I am making only the elements with class "remote" remotely clickable, mostly because otherwise clicking the link to open new window with that page would click that link in all open windows opening more pages in the process, leading to browser warnings about too many popups, but instead of $('.remote') you could use $('a') to select all links if you want.

In this example only links with defined IDs will work, because those IDs are sent with the Socket.IO messages.