websocket 我尝试使用PeerJS创建一个可以容纳三个或更多人的聊天室，但它根本不起作用,可能是什么问题？

我做了一个简单的聊天程序。当我试图从另一台电脑访问同一页面的URL时，没有响应。有没有办法解决这个问题？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>P2P chat</title>
    <style>
      #peer-id {
        margin-bottom: 10px;
      }
      #peers {
        margin-bottom: 10px;
      }
      #messages div {
        margin-bottom: 5px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
   
    <script>
      const peer = new Peer();
      peer.on('open', (id) => {
        $('#peer-id').text(`Your ID: ${id}`);
      });
      peer.on('connection', (conn) => {
        $('#peers').append(`<div id="${conn.peer}">${conn.peer}</div>`);
        conn.on('data', (data) => {
          $('#messages').append(`<div>${conn.peer}: ${data}</div>`);
        });
      });
      $('#send').click(() => {
        peer.connections.forEach((conn) => {
          conn.send($('#message').val());
        });
        $('#message').val('');
      });
    </script>
  </head>
  <body>
    <div id="peer-id"></div>
    <div id="peers"></div>
    <div id="messages"></div>
    <input type="text" id="message">
    <button id="send">Send</button>
  </body>
</html>

我是一个编程初学者，所以我很难找到一个解决方案。我想创建一个聊天室，可以容纳三个或更多的人使用PeerJS。我很好奇，如果有可能创建一个聊天室，可以容纳三个或更多的人使用PeerJS。

您的代码除了创建自己的ID之外什么也不做，但是您还需要找出并指定要连接的用户的ID。

//get a random number from min to max
function RandomInt(min, max) {
    let rand = min + Math.random() * (max + 1 - min);
    return Math.floor(rand);
}

var app = {};
var NamePrefix = RandomInt(100000000,999999999);
app.peer = new Peer(NamePrefix+'-name')
app.chatlist = [];

app.peer.on('open', function(peerID){
    document.getElementById('myPeer').innerHTML = peerID;
});

app.peer.on('open', function(id) {
    console.log('My peer ID is: ' + id);
});

//outgoing connection
function connect() { 
    app.conn = app.peer.connect(document.getElementById('partnerPeer').value);
    app.conn.on('open', function(){
        document.getElementById('status').innerHTML = "the connection is established";
    });
    
    //show incoming message
    app.conn.on('data', function(data){
        app.chatlist.push("<div id='' class=left>"+data+"</div>");
        document.getElementById('message').innerHTML = app.chatlist.join("<br>");
    });
}

function sendMessage() { 
    var newmes = document.getElementById('inputmess').value;
    if(app.conn && app.conn.open){ app.conn.send(newmes); }
    app.chatlist.push("<div id='' class=right>"+newmes+"</div>");
    document.getElementById('message').innerHTML = app.chatlist.join("<br>");
}

//incoming connection
app.peer.on('connection', function(connect) {

    app.conn = connect;
    console.log(connect);
    
    app.conn.on('open', function(){
        document.getElementById('status').innerHTML = "the connection is established";
    });
    
    //show incoming message
    app.conn.on('data', function(data){
        app.chatlist.push("<div id='' class=left>"+data+"</div>");
        document.getElementById('message').innerHTML = app.chatlist.join("<br>");
    });
});

.left {
float:left;
width:55%;
background: #FFA500;
margin: 10px;
padding: 10px;
}
.right {
float: right;
width:55%;
background: #85D7ED;
margin: 10px;
padding: 10px;
}
.chat {
width: 40%;
background: #27EB4C;
height: 400px;
}
.btn {
background: #2DF7F1;
margin: 10px;
padding: 10px;
}
.messbox {
width:39%;
margin-top: 5px;
}

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>

</head>
<body>

<input id="partnerPeer">
<div id="myPeer"></div>
<button onclick="connect()">Connect</button>
<div id="status"></div>
<div id="message" class="chat"></div>
<textarea class="messbox" row=4 id=inputmess></textarea>
<button onclick="sendMessage()" class="btn">Send</button>

</body>
</html>

下面是多用户聊天的实现。https://github.com/Rubilmax/peerjs-multichat
记住PeerJS有一些bug，例如，如果另一个用户通过关闭标签页或浏览器退出聊天，它不会关闭连接

websocket 我尝试使用PeerJS创建一个可以容纳三个或更多人的聊天室，但它根本不起作用,可能是什么问题？

1条答案

相关问题

热门标签

最新问答