2

Does anyone know how to listen to the mouse events such as CLICK or HOVER so that when I click or hover any element it will happen the same in the second browser? Apologies for not including the code.

<script>
    // creating a new websocket
    var socket = io.connect('http://localhost:8000');

    // on message recived we print the new data inside the #container div
    socket.on('notification', function (data) {
        $("p").click(function () {
            alert("Hello");
            //or change the color
            $(this).css({"color": "red"});
        });

        var usersList = "<div id='aaa'>";
        $.each(data.users, function (index, user) {
            usersList += "<p>" + user.users + "</p>";
        });

        usersList += "</div>";
        $('#container').html(usersList);
    });
</script>
<p>Click me!</p>
2
  • It's possible to emulate the activity. You can't actually move the mouse cursor. What isn't working with the code you've written? Oct 21, 2013 at 16:30
  • i don't need to see the mouse cursor moving. Just simply when I click the button I need to get the message in both browsers :( see my code above
    – medzi
    Oct 21, 2013 at 16:34

1 Answer 1

8

Client side:

In client side, you should first define an event listener for every type of event you need (using jQuery). In that listener, simply emit an socket.io event containing ID of element that triggered the event, so server can broadcast that to all other clients.

Also, if an event received from server, you should simulate that on it's corresponding element via jQuery.

$(document).on('click', function(event){
    socket.emit('myClick', {id: event.target});
}

var socket = io.connect('http://localhost');

socket.on('myClick', function (data) {
    $(data.id).trigger('click');
}

Server side:

In server side, just emit whatever event that was triggered, to all other clients except sender.

var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
    socket.on('myClick', function (data) {
        socket.broadcast.emit('myClick', data);
    });
});
3
  • this does not work. All I get in the browser is "Welcome to socket.io" I'm not even seeing the button..nothing from the index.hmtl :(
    – medzi
    Oct 21, 2013 at 19:39
  • please upload your server side & client side complete code, so i can help you. Oct 22, 2013 at 5:59
  • It is now working perfectly I fixed it! Thank you for your help. I have questions though: 1. Can you run socket.io without node.js? 2. How to mirror the clicks, mouseovers, any interactions using soket.io without specifying ID's or classes in jquery? basically mirror everything what is happening when the user interacts with the website? Many thanks
    – medzi
    Oct 23, 2013 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.