PeerJS接続は作成されましたが、データ転送はありません

私はPeerJSを使用して2つのブラウザを相互に通信させようとしてきましたが、このハードルを克服することはできません。PeerJS接続は作成されましたが、データ転送はありません

私が言うことができる限り、クロムコンソールは2つのブラウザ間の接続が成功したことを示していますが、いずれのクライアントにもデータを受け取ることができません。

<!DOCTYPE HTML> 
<html> 
<head></head> 
<body> 
    <script src="http://cdn.peerjs.com/0.3/peer.min.js"></script> 
    <script src="peer.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 


    <label id="yourID">Your ID is: </label><br> 
    <label id="currentConn">You are currently connected to: </label> 
    <div> 
     <button id="connectButton">Connect to this ID</button> 
     <input type="text" id="toConnectID"> 
    </div> 
    <hr> 

    <div> 
     <textarea id="playArea"></textarea><br> 
     <button id="sendMessage">Send Message</button> 
    </div> 
     <script> 
      console.log("JS Started"); 
      var peer1 = new Peer({key: 'lwjd5qra8257b9', debug: 3}); 

      document.getElementById("connectButton").disabled = true; 
      document.getElementById("sendMessage").disabled = true; 

      peer1.on('open', function(id){ 
       console.log("Peer1 ready"); 
       document.getElementById("connectButton").disabled = false; 
       document.getElementById("yourID").innerHTML = "Your ID is: "+id; 

       peer1.on('data', function(data){ 
        console.log("Data received: "+data); 
        document.getElementById("playArea").value = data; 
       }); 
      }); 

      peer1.on('connection', function(dataConnection){ 
       document.getElementById("sendMessage").disabled = false; 
       document.getElementById("currentConn").innerHTML = "You are currently connected to: "+dataConnection.peer; 
       conn = dataConnection; 
      }); 


      $("#connectButton").click(function(){ 
       ID = document.getElementById("toConnectID").value; 
       conn = peer1.connect(ID); 
       document.getElementById("currentConn").innerHTML = "You are currently connected to: "+ID; 
       document.getElementById("sendMessage").disabled = false; 
      }); 




      $("#sendMessage").click(function(){ 
       text = document.getElementById("playArea").value; 
       conn.send(text); 
       console.log("Data sent: "+text); 
      }); 

    </script> 
</body> 
</html>

最終目標は、ブラウザがローカルネットワーク上で通信することですので、コードがPeerJSライブラリをテストするために純粋です。

ご協力いただければ幸いです。

出典

2017-08-03 Niklas Henderson

あなたのon（ 'data'）サブスクライバは、peer1.on（ 'data'）の代わりにconn.on（ 'data'）の下にある必要があります。と両端のデータを受信できるように2つの場所にconn.on（ 'data'）が必要です。 conn.on（ 'data'）の下で接続を確立したクライアントのためのもの、peer1.on（ 'connection'）の下で接続したクライアントのためのもの。それらのうち1つを削除すると、1つのエンドだけがデータを受信しています。

<!DOCTYPE HTML> 
 
<html> 
 
<head></head> 
 
<body> 
 
    <script src="http://cdn.peerjs.com/0.3/peer.min.js"></script> 
 
    <script src="peer.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 

 
    <label id="yourID">Your ID is: </label><br> 
 
    <label id="currentConn">You are currently connected to: </label> 
 
    <div> 
 
     <button id="connectButton">Connect to this ID</button> 
 
     <input type="text" id="toConnectID"> 
 
    </div> 
 
    <hr> 
 

 
    <div> 
 
     <textarea id="playArea"></textarea><br> 
 
     <button id="sendMessage">Send Message</button> 
 
    </div> 
 
     <script> 
 
      console.log("JS Started"); 
 
      var peer1 = new Peer({key: 'lwjd5qra8257b9', debug: 3}); 
 

 
      document.getElementById("connectButton").disabled = true; 
 
      document.getElementById("sendMessage").disabled = true; 
 
      var conn; 
 
      peer1.on('open', function(id){ 
 
       console.log("Peer1 ready"); 
 
       document.getElementById("connectButton").disabled = false; 
 
       document.getElementById("yourID").innerHTML = "Your ID is: "+id; 
 

 

 
      }); 
 

 
      peer1.on('connection', function(dataConnection){ 
 
       document.getElementById("sendMessage").disabled = false; 
 
       document.getElementById("currentConn").innerHTML = "You are currently connected to: "+dataConnection.peer; 
 
       conn = dataConnection; 
 
       conn.on('data', function(data){ 
 
        console.log("Data received: "+data); 
 
        document.getElementById("playArea").value = data; 
 
       }); 
 
       console.log("Connected") 
 

 
      }); 
 

 

 
      $("#connectButton").click(function(){ 
 
       ID = document.getElementById("toConnectID").value; 
 
       conn = peer1.connect(ID); 
 
       conn.on('open',function(){ 
 
        console.log("open") 
 
        conn.on('data', function(data){ 
 
         console.log("Data received: "+data); 
 
         document.getElementById("playArea").value = data; 
 
        }); 
 
       }) 
 
       document.getElementById("currentConn").innerHTML = "You are currently connected to: "+ID; 
 
       document.getElementById("sendMessage").disabled = false; 
 
      }); 
 

 

 

 

 
      $("#sendMessage").click(function(){ 
 
       text = document.getElementById("playArea").value; 
 
       conn.send(text); 
 
       console.log("Data sent: "+text); 
 
      }); 
 

 
    </script> 
 
</body> 
 
</html>

出典

2017-08-03 16:17:15

聖なる牛これは、実際に働きました！多くの感謝 - あなたの助けは大変に感謝しています。 –

PeerJS接続は作成されましたが、データ転送はありません

答えて

関連する問題