How can I receive data with a peerJS peer to peer connection?
I'm trying to connect two peers using peerJS. I am pretty much just following through their "Getting Started" but I am still struggling. Below is the code that I have gotten so far.
<body>
<script src="http://cdn.peerjs.com/0.3/peer.min.js"></script>
<script>
var conn;
var peer = new Peer({key: 'lwjd5qra8257b9'});
peer.on('open', function(id){
console.log('My peer ID is:' + id);
document.getElementById('peerIdDisplay').innerHTML = '<b>My peer ID is: </b><font color="red">' + id + '</font>';
});
function ConnectToPeer()
{
var peerId = document.getElementById("peerIdTxtBox").value;
console.log(peerId);
conn = peer.connect(peerId);
AfterConnInit();
peer.on('error', function(err){
console.log('error');
});
};
peer.on('connection', function(conn)
{
console.log('connected');
});
function AfterConnInit()
{
conn.on('open', function() {
// receive messages
conn.on('data', function(data) {
console.log('received', data);
});
//send messages
conn.send('hello');
});
};
function SendMessage()
{
//conn.send('Hello!');
};
</script>
<p id='peerIdDisplay' style='font-family:verdana'><b>My peer ID is: </b></p>
<hr style='width:100%'/>
<p id='instructions'>Enter another peer's ID to connect to them..</p>
<form>
<input type="text" id="peerIdTxtBox">
</form>
<button id="conToPeerBtn" OnClick="ConnectToPeer()">Connect To Peer</button>
<button id="sendMessageBtn" OnClick="SendMessage()">Send Message</button>
</body>
I have managed to get a connection between the two peers using a generated peerID, however, I can't seem to get my head around sending and receiving messages. From what I can understand the conn.send() is supposed to send the message to the client which then receives it, but I don't know how to /get/ the data to display on the other peer, let alone send it using a SendMessage function from the first peer. Can someone PLEASE explain how the data is sent and received before my computer goes out the window?
Thanks
The 'data' event was being listened inside the conn.on('open') , moving it as an independent event handler will get the code working.
Below is the modified code
<script>
var conn;
var peer = new Peer({key: 'lwjd5qra8257b9'});
peer.on('open', function(id){
console.log('My peer ID is:' + id);
document.getElementById('peerIdDisplay').innerHTML = '<b>My peer ID is: </b><font color="red">' + id + '</font>';
});
function ConnectToPeer()
{
var peerId = document.getElementById("peerIdTxtBox").value;
console.log(peerId);
conn = peer.connect(peerId);
peer.on('error', function(err){
console.log('error');
});
};
peer.on('connection', function(conn)
{
console.log('peer connected');
conn.on('open', function() {
console.log('conn open');
});
conn.on('data', function(data) {
console.log(data);
});
});
function SendMessage()
{
conn.send('Hello!');
};
上一篇: html5 websockets会被防火墙摧毁吗？
下一篇: 如何通过peerJS点对点连接接收数据？