0

Forgive me, I've been learning node and js over the last few days, come from C#/unity and everything is a little bit different from what I know. I'm making a collaborative drum machine, I've got 90% working: http://ec2-54-194-29-66.eu-west-1.compute.amazonaws.com:9000/

I have the node server working, with key presses being sent and mouse co-ords, however I have an issue with mapping a mouse click event, I am registering the click in console of other connections and server, but seems I don't quite understand sending the contents of events properly. I can't write var data = list: e.classList and read data.list to do the see the same thing?

Here's code I've been trying to get working, but I get cannot read property error:

    function newMouseOn(data)
    {
        console.log("Is this working Click On?" + data.target);
        data.list.add('active');
        //clickPlayOn(data);
        data.target.play();
    }

    function newMouseOff(data)
    {
        console.log("Is this working ClickOff?" + data.target);
        //clickPlayOff(data);
        data.list.remove('active');
    }   

socket.on('mouseOn', newMouseOn);
socket.on('mouseOff', newMouseOff);


  function clickPlayOn(e)
    {
       var data = {
         id: e.target.id,
         timeStamp: e.timeStamp,
         type: e.type,
         target: e.target,
         list: e.classList
       }
        socket.emit('mouseOn', data);
        e.target.classList.add('active');
        e.target.play();
    }

    function clickPlayOff(e)
    {
      var data =
      {
        id: e.target.id,
        timeStamp: e.timeStamp,
        type: e.type,
        target: e.target,
        list: e.classList
        }
        socket.emit('mouseOff', data);
        e.target.classList.remove('active');
    }


server side: 

  socket.on('mouseOn', MouseClick);
  socket.on('mouseOff', MouseClicked);


function MouseClick(data)
  {
    socket.broadcast.emit('mouseOn', data);
    console.log(data);
  }

  function MouseClicked(data)
  {
    socket.broadcast.emit('mouseOff', data);
    console.log(data);
  }

I was originally trying to just emit e or e.target instead of that data struct, but that didn't seem to work. Has anyone got any ideas on what I'm missing? (other than a brain)

1 Answer 1

1

the object you received (data) has no methods, it is transferred as JSON and then converted to object, so you can not to invoke any methods like data.target.play();.

if you need any methods you have to add them when the object is received.

Sign up to request clarification or add additional context in comments.

8 Comments

ok I think I got you, it's just sending a bunch of text and no methods of what to do. so I instead go: btn[e.target.id].classList.add('active'); btn[e.target.id].play(); and my buttons are set up: for (var i = 0; i < btn.length; i++) { btn[i].addEventListener('mousedown', clickPlayOn); btn[i].addEventListener('mouseup', clickPlayOff); // emit here? } I think I'm still a bit confused where to emit from, should I do it from the code above? I think I'm gonna create a feedback loop if i'm not careful!
sorry, I did not go deep into the rest of your code, anyway, you need to transfer a data to understand what to play at the other client-side, like id of buttons, or sounds etc. I think no loops are possible if you are emitting from clickPlayOn and receiving it in newMouseOn
I've been trying that, sending the button id over as well in the ClickPlayOn, part, I want to just add the index of the button something like btn[i].addEventListener('mousedown', clickPlayOn(index: i)); can I add an index along inside that (e) event function, normally it's like clickPlayOn() above but the function has clickPlayOn(e), I take it e is event, can I chuck things on to it? what's the syntax, i'm getting something about missing ) after argument list, when experimenting with the bit above. Thanks for your help btw, really kind of you.
I'm not sure that using the i as the id is good idea. You can add any custom id as an attribute to the html, like <button data-sound="sound_1" ... and to use it instead of i. to get it on a click you can do something like this: e.target.getAttribute('data-sound') but I'm not sure about the exact syntax
ok thanks, I'm not sure that's the best way, as i need to trigger off visuals for buttons as well, and thought if I just knew the exact button, or could keep track off it as in integer it would make my life easier. <div class="button" data-key="q" data-sound="audio/kick.mp3"></div> could I write an id for the button there? data-id = "1" for example? I've tried your way and I can get the name of the sound over, still can't just .play() it, I don't know where that function comes from, is it part of eventlistener? i don't know why I'm struggling with this, I've got the keys done
|

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.