2017-06-07 140 views
1

我正在開發一個小的PeerJS項目,但我有點困惑。我可以打開連接並確認客戶端已連接,但我無法弄清楚接收任何事情的正確方法或語法。或者我可能只是想念一些簡單的東西。我嘗試過這麼多的變化,試圖讓這個工作。 JS和HTML下面。通過PeerJS接收數據

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> 

回答

1

你是幾乎沒有,實際上。你的buddyConn.on('data'...應該在connect函數中使用該函數的連接參數名稱。另外,connect的第二個呼叫不應該在#peerKeySubmit.on回撥函數中。這裏是修改的(工作)代碼:

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() 
+1

非常感謝,我被困在那一段時間。我不敢相信我從來沒有注意到接收函數不應該在peerKeySubmit.click中 – MalyG