PeerJS 不发送/接收数据答案

【问题标题】：PeerJS not sending/receiving dataPeerJS 不发送/接收数据
【发布时间】：2021-06-03 16:28:57
【问题描述】：

我目前正在尝试制作一个 2 人 HTML/JS 棋盘游戏，并且正在使用 PeerJS 将两个玩家会话连接在一起，但无法让它工作。

这是一个快速测试，即使连接正常，我也无法发送/接收数据在发送端

    var peer = new Peer();
    var con;
    function c() {
        con = peer.connect('id');
        con.on('error', function(err) { alert(err); });
        con.on('data', function(data){ console.log(data) });
    };
    function send() {
        con.on('open', function(){
            con.send('HELLO WORLD')
        });
    }

在接收端：

    var peer = new Peer('id');
peer.on('connection', function(con){
  console.log('connected')
    con.on('error', function(err) { alert(err) });

    con.on('open', () => {
        con.on('data', (data) => {
            console.log('Incoming data', data);
            con.send('REPLY');
        });
    });
});

【问题讨论】：

你需要在普通的websocket上交换Peer信息和数据。

标签： javascript p2p peerjs

【解决方案1】：

您需要为 Peer 配置 stun 和 turn 服务器。这是完整的工作示例。

/**********
 var peer = new Peer({
        config: {
            'iceServers': [
                { url: 'stun:stun.l.google.com:19302' },
            ]
        } /* Sample servers, please use appropriate ones */

*******/

<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
    var peer = new Peer({
        config: {
            'iceServers': [
                { url: 'stun:stun.l.google.com:19302' },
            ]
        } /* Sample servers, please use appropriate ones */
    });
    peer.on("open", function (id) {
        $("#chat").hide()
        $("#peerid").text(id)
        $("form#connect").submit(function () {
            var remoteID = $(this).find('input[type="text"]').val()
            console.log("connect to", remoteID);
            var conn = peer.connect(remoteID)
            gotConnection(conn)
            return false;
        })
    })

    peer.on("connection", gotConnection)

    function gotConnection(conn) {
        conn.on("error", function (err) {
            console.error("connection error", err, conn)
        })
        conn.on("open", function () {
            console.log("conn open", conn)
            $("#remoteid").text(conn.peer)
            $("form#connect").hide()
            $("#chat").show()
            $("#chat form").submit(function () {
                var message = $(this).find('input[type="text"]').val()
                console.log("send", message);
                conn.send(message)
                $(this).find('input[type="text"]').val("")
                $("#messages").append($('<li>' + peer.id + ': ' + message + '</li>'))
                return false;
            })
            conn.on("data", function (data) {
                console.log("got", data);
                $("#messages").append($('<li>' + conn.peer + ': ' + data + '</li>'))
            })
        })
    }
</script>

【讨论】：