如何通过peerJS点对点连接接收数据？ [英] How can I receive data with a peerJS peer to peer connection?
问题描述
我试图使用peerJS连接两个对等端。我几乎完成了他们的入门，但我仍在挣扎。以下是我目前得到的代码。
< 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>我的同辈ID是：< / b>< font color =red>'+ id +'< / font>';
}）;
函数ConnectToPeer（）
{
var peerId = document.getElementById（peerIdTxtBox）.value;
console.log（peerId）;
conn = peer.connect（peerId）;
AfterConnInit（）;
peer.on（'error'，function（err）{
console.log（'error'）;
}）;
};
$ b $ peer.on（'connection'，function（conn）
{
console.log（'connected'）;
}）;
函数AfterConnInit（）
{
conn.on（'open'，function（）{
//接收消息
conn.on（'data'，function（data）{
console.log（'received'，data）;
}）;
//发送消息
conn.send（'hello'）;
}）;
};
函数SendMessage（）
{
//conn.send('Hello！'）;
};
< / script>
< p id ='peerIdDisplay'style ='font-family：verdana'>< b>我的对等ID是：< / b>< / p>
< hr style ='width：100％'/>
< p id ='instructions'>输入另一个同龄人的ID以连接到他们。< / p>
< form>
< input type =textid =peerIdTxtBox>
< / form>
< button id =conToPeerBtnOnClick =ConnectToPeer（）> Connect To Peer< / button>
< button id =sendMessageBtnOnClick =SendMessage（）>发送消息< / button>
< / body>
我已经设法使用生成的peerID在两个对等点之间建立连接，但是， t似乎让我的头在发送和接收消息。从我所能理解的conn.send（）应该发送消息到客户端，然后接收它，但我不知道如何/获取/数据显示在另一个对端，更不用说发送它使用来自第一个对等方的SendMessage函数。请问有人请解释一下在我的电脑出去之前数据是如何发送和接收的？
谢谢
'data'事件正在 conn.on（'open'），将它作为一个独立的事件处理程序移动会使代码工作。 以下是修改后的代码
<脚本>
var conn;
var peer = new Peer（{key：'lwjd5qra8257b9'}）;
$ b $ peer.on（'open'，function（id）{
console.log（'My peer ID is：'+ id）;
document.getElementById（'peerIdDisplay '）.innerHTML ='< b>我的同辈ID是：< / b>< font color =red>'+ id +'< / font>';
}）;
函数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）;
}）;
}）;
函数SendMessage（）
{
conn.send（'Hello！'）;
};
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!');
};
这篇关于如何通过peerJS点对点连接接收数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
