Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How can I make a browser to browser (peer to peer) connection in HTML?

HTML Javascript Programming Scripts

Creating browser-to-browser (peer-to-peer) connections in HTML can be achieved using WebRTC technology. The PeerJS library simplifies this process by providing an easy-to-use API for establishing P2P connections.

Include the PeerJS Library

First, include the PeerJS library in your HTML file:

<script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>

Create a Peer Connection

Initialize a new peer with a unique ID. PeerJS provides free public servers, so no API key is required:

<script>
// Create a new peer with a unique ID
var peer = new Peer('peer-' + Math.floor(Math.random() * 1000));

// Listen for incoming connections
peer.on('connection', function(conn) {
    console.log('Received connection from:', conn.peer);
    
    conn.on('data', function(data) {
        console.log('Received message:', data);
    });
});

// Display our peer ID
peer.on('open', function(id) {
    console.log('My peer ID is:', id);
});
</script>

Connect to Another Peer

To connect to another peer, use their peer ID:

<script>
// Connect to another peer using their ID
var conn = peer.connect('another-peers-id');

// Handle connection opening
conn.on('open', function() {
    console.log('Connected successfully!');
    conn.send('Hello from peer connection!');
});

// Handle incoming messages
conn.on('data', function(data) {
    console.log('Received:', data);
});
</script>

Complete Example

Here's a complete HTML example demonstrating P2P messaging:

<!DOCTYPE html>
<html>
<head>
    <title>Peer-to-Peer Connection</title>
    <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
</head>
<body>
    <div>
        <p>My ID: <span id="my-id">Connecting...</span></p>
        <input type="text" id="peer-id" placeholder="Enter peer ID to connect">
        <button onclick="connectToPeer()">Connect</button>
        <br><br>
        <input type="text" id="message" placeholder="Enter message">
        <button onclick="sendMessage()">Send Message</button>
        <div id="messages"></div>
    </div>

    <script>
        var peer = new Peer();
        var conn = null;

        peer.on('open', function(id) {
            document.getElementById('my-id').textContent = id;
        });

        peer.on('connection', function(connection) {
            conn = connection;
            setupConnection();
        });

        function connectToPeer() {
            var peerId = document.getElementById('peer-id').value;
            conn = peer.connect(peerId);
            setupConnection();
        }

        function setupConnection() {
            conn.on('open', function() {
                addMessage('Connected!');
            });

            conn.on('data', function(data) {
                addMessage('Received: ' + data);
            });
        }

        function sendMessage() {
            var message = document.getElementById('message').value;
            if (conn && message) {
                conn.send(message);
                addMessage('Sent: ' + message);
                document.getElementById('message').value = '';
            }
        }

        function addMessage(msg) {
            var div = document.createElement('div');
            div.textContent = msg;
            document.getElementById('messages').appendChild(div);
        }
    </script>
</body>
</html>

Key Features

  • No server required - Direct browser-to-browser communication
  • Real-time messaging - Instant data transfer between peers
  • Automatic NAT traversal - Works behind firewalls and routers
  • Free to use - No API keys needed with PeerJS public servers

Conclusion

PeerJS simplifies WebRTC implementation for browser-to-browser connections. Share peer IDs between users to establish direct P2P communication without requiring a central server for data transfer.

Updated on: 2026-03-15T23:18:59+05:30

537 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements