Receiving data through PeerJS

I'm working on a small PeerJS project, and I'm a little confused. I'm able to open a connection and confirm that the clients are connected, but I cannot figure out the proper method or syntax for receiving anything. Or perhaps I'm just missing something simple. I have tried so many variations trying to get this to work. JS and HTML below.

JS:

var peer = new Peer({
  key: 'lwjd5qra8257b9'
// I use my own API key for testing, this is the public PeerJS key
//you'll have to generate your own if this doesn't work.
});

peer.on('open', function(id) {
  $('body').append('<br/>Your personal peer ID is: ' + id + '<br/>Be careful who you share it with.');
});
peer.on('connection', connect);

function connect(succ) {
  conn = succ;
  //input changes on successful connect
  $('#peerKeyEnter').val(conn.peer);
  $('#peerKeyEnter').prop('disabled',true);
}

$(document).ready(function() {

  $('#peerKeySubmit').on('click', function() {
    var buddy = document.getElementById('peerKeyEnter').value;
    var buddyConn = peer.connect(buddy); //send connection request
    connect(buddyConn); //connect to peer

    //sending data
    buddyConn.on('open', function() {
      buddyConn.send('this is supposed to work')
    });

    //receiving data
    buddyConn.on('connection', function(conn) {
      buddyConn.on('data', function(data) {
        console.log(data);
      });
    });
  }); //end peerKeySubmit.click
}); //end doc.ready()

HTML:

<html>
<head>
  <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  <!--script src='peer.js'></script-->
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
  <script src='app.js'></script>
</head>
<body>

<input type='text' id='peerKeyEnter' placeholder="Enter peer's ID"></input>
<button id='peerKeySubmit' value='Send'>Select Peer</button>

</body>
</html>

Solution

You were almost there, actually. Your buddyConn.on('data'... should be in the connect function using that function's argument name for the connection. Also, the second call to connect should not be in the #peerKeySubmit.on callback function. Here's the modified (working) code:

var peer = new Peer({
  key: 'lwjd5qra8257b9'
// I use my own API key for testing, this is the public PeerJS key
//you'll have to generate your own if this doesn't work.
});

peer.on('open', function(id) {
  $('body').append('<br/>Your personal peer ID is: ' + id + '<br/>Be careful who you share it with.');
});
peer.on('connection', connect);

function connect(succ) {
  conn = succ;
  conn.on('data', function (data) {
    console.log('Received from ' + conn.peer + ': ' + data);
  });

  //input changes on successful connect
  $('#peerKeyEnter').val(conn.peer);
  $('#peerKeyEnter').prop('disabled',true);
}

$(document).ready(function() {

  $('#peerKeySubmit').on('click', function() {
    var buddy = document.getElementById('peerKeyEnter').value;
    var buddyConn = peer.connect(buddy); //send connection request

    //sending data
    buddyConn.on('open', function() {
      buddyConn.send('this is supposed to work')
    });

  }); //end peerKeySubmit.click
}); //end doc.ready()