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'）。并且您需要在2个位置使用conn.on（'data'）才能在两端接收数据。一个用于在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 Connection已建立，但没有数据传输

1 个答案: