I tried to create a chat room using PeerJS that can accommodate three or more people, but it doesn't work at all. What could be the problem?

Question

I made a simple chat program like this. When I tried accessing the same page URL from another computer, there was no response. Is there a way to solve this problem?

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

I am a programming beginner, so I am having trouble finding a solution. I want to create a chat room that can accommodate three or more people using PeerJS. I am curious if it is possible to create a chat room that can accommodate three or more people using PeerJS.

score 1 · Answer 1 · answered Apr 13 '23 at 14:09

Your code does nothing but create its own ID, but you also need to find out and specify the ID of the user you want to connect with.

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

Here is the implementation of a multi-user chat. https://github.com/Rubilmax/peerjs-multichat

Remember that PeerJS has some bugs. For example, it does not close the connection if another user exited the chat by closing a tab or browser

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Apr 18 '23 at 23:27

I tried to create a chat room using PeerJS that can accommodate three or more people, but it doesn't work at all. What could be the problem?

1 Answers1