Introduction to PeerJS, the WebRTC library
Working with WebRTC can be hard. PeerJS is an awesome library that makes WebRTC easier
I wrote about WebRTC. That post described the details of working with the protocol to make 2 Web browsers communicate with each other directly.
In that tutorial I mentioned that there are libraries that abstract the many details you have to take care to allow WebRTC communication.
One of those libraries is PeerJS, which makes real time communication extremely simple.
First thing is, you need to have a backend to allow 2 clients to synchronize before they are able to directly talk to each other.
In a folder, initialize an npm project using npm init
, install PeerJS using npm install peerjs
and then and you can run it using npx
:
npx peerjs --port 9000
(run npx peerjs --help
to see all the options you can use).
This is your backend ๐
Now we can create the simplest application that does anything useful. We have one receiver and one sender.
First we create the receiver, which connects to our PeerJS server, and listens for data coming in to it. The first parameter to new Peer()
is our peer name, which we call receiver
to make it clear:
Include the PeerJS client (change the library version with the latest available):
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>
Then we initialize the Peer
object. The connection
event is called when another peer connects to us. When we receive some data, the data
event is called with the payload:
const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' })
peer.on('connection', (conn) => {
conn.on('data', (data) => {
console.log(data);
})
})
Letโs create the other end of the communication. Weโll call this sender
because itโs the one that will connect and send a message to the receiver.
We initialize the Peer
object, then we ask the peer to connect to the receiver
peer, which we registered earlier. Then once the connection is established the open
event fires, and we can call the send()
method on the connection to send data to the other end:
const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })
const conn = peer.connect('receiver')
conn.on('open', () => {
conn.send('hi!')
})
That is the most basic example you can make.
First you open the receiver page, then you open the sender page. The receiver gets the message directly from the sender, not from a centralized resource. The server part is only needed to exchange information so the 2 parts can connect. After that, itโs not interfering any more.
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X