已建立 PeerJS 连接，但没有数据传输

Question

我一直在尝试使用 PeerJS 让两个浏览器相互通信，但是我无法克服这个障碍。

据我所知，chrome 控制台显示两个浏览器之间已成功建立连接，但是我无法让任何一个客户端接收任何数据。

<!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 库。

如有任何帮助，我们将不胜感激。

Answer 1

您的 on('data') 订阅者应该在 conn.on('data') 而不是 peer1.on('data') 之下。并且您需要 conn.on('data') 在 2 个地方才能在两端接收数据。一种用于自己建立连接的客户端，在conn.on('data')下，一种用于连接的客户端，在peer1.on('connection')下。如果你去掉其中任何一个，你会看到只有一端在接收数据。

<!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>

已建立 PeerJS 连接，但没有数据传输

PeerJS Connection made, but no data transfer

javascript

webrtc

peerjs