PeerJS Соединение установлено, но передача данных отсутствует

Я пытался заставить два браузера общаться друг с другом с помощью 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.

Любая помощь приветствуется.

Источник

1 ответ

Решение

Ваш on ('data') подписчик должен быть под conn.on ('data') вместо peer1.on('data') . и вам нужно conn.on ('data') в 2 местах, чтобы иметь возможность получать данные на обоих концах. Один для клиента, который устанавливает соединение самостоятельно, под conn.on ("данные"), другой для клиента, который подключился, под peer1.on ("соединение"). Если вы удалите любой из них, вы увидите, что только один конец получает данные.

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

Источник
Другие вопросы по тегам