Click events with Socket IO

Question

Click events with Socket IO

I'm using node and Socket IO to set up click events in one browser and trigger an animation in another. I'm having difficulty getting this to work. For example, clicking a button in one browser will hide a box in the other. The code I have so far is:

Client side:

    function hideBox(data) {
      $('.box').hide();
    };

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

    socket.on('hideBtn', function(data) {
      $(data.id).hideBox;
    });

Server side

socket.on('hideBtn', function(data) {
  socket.broadcast.emit('hideBtn', data);
});

Any help would be greatly appreciated. Thanks.

node.js
websocket
socket.io

Answer 1

 socket.on('hideBtn', function(data) {
      $(data.id).hideBox;
    });

hideBox is a function right ? Maybe it's due to the "()" forgotten :-)

Answer 2

OK, so after a lot of going back and forth, the answer resulted in actually just having to simplify the code. No need to specify event.target etc, just simply emit and listen for the event.

Code for client side, index.html:

$('.btn').on('click', function() {
  socket.emit('hideBoxRequest');
});

Code for server side:

socket.on('hideBoxRequest', function () {
  socket.broadcast.emit('hideBox');
});

Final code client side, for my other html file:

socket.on('hideBox', function () {
    $('.testBox').fadeOut();
});

So basically clicking the btw in index.html emits 'hideBoxRequest' to the server. The server then picks this up and sends out 'hideBox' to all clients which are connected to the server.