Peer-to-peer seems relatively straightforward — all users send and receive data from each other, but before any Proof of concept can be made there is a lot to understand before actually writing some code. The first thing that should be understood is networking, to be specific; networking for when a user connects to a web server. There is an image with four steps that should explain how networking works (Very oversimplified!).

An oversimplified version of how networking works.

Above is the most straightforward way I could show you on how a user gets there web content. There are two servers shown that plays a crucial role in delivering content to the users. Those servers are the ones that you; a developer has full control over.

Let’s figure out how we could use our newly discovered knowledge about networking and come up with a creative idea. I figured there are two ways we could exploit those servers to make a website Peer-to-peer:

Make the DNS (Domain Name System) point to a central “Collect and Connect” server and redirect users to a new tab which then service the whole website through Peer-to-peer.

Let users connect to the website where they get a small portion of the content which helps set up a connection to other users and serve the whole content through Peer-to-peer.

While the first idea would make the process of getting multiple sites Peer-to-peer effortless, there are some technical difficulties I think we need to overcome (sharing data between browser tabs, mainly back-end code, and so forth) that would not work in the timeframe I have. Therefore let’s build the second idea, and we will review the first another time because frankly, I would love to make that concept work too.

With our better understanding of networking and the idea we chose. We should be ready to explore the whole Peer-to-peer in the context of the web. However, we need to frame the subject a bit better, so we can select a good web innovation for our use case. For that, we need a list of so-called demands that this wonderful innovation should have:

Needs to work in browsers like Chrome or Firefox

End users shouldn’t have to do anything (install software, complicated actions, and so forth)

Should be possible to implement in any website by a front-end developer.

Needs to be free to use.

The list should help us select a web innovation that would suit our criteria and make it possible for you — the reader — to implement it by yourself, which is part of this post.

After searching online, one technique came up: WebRTC.

What is WebRTC you might ask? Well, WebRTC (Web Real-Time Communication) is a technique to make real-time communication between browsers and mobile applications happen through a Peer-to-peer connection. This connection is set up using an API (application programming interface) which we could access natively with JavaScript and is supported within in all major browsers. This technique can handle three types of data: video, audio, and files/data.

So did we find the solution here? WebRTC seems to be too good to be true. Well, let’s continue further and get a taste of how WebRTC works.

Understand & Implement

In my experience putting together any project which involves coding something new, requires some research into similar projects, and how these techniques work. So let us take a look at what we could learn from the samples that are on the WebRTC GitHub: samples

Looking at the list, you can find examples for the three major components of WebRTC — which I will be explaining to you later on. Those samples show some use cases for WebRTC, but I did find it odd that all samples were local (in browser Peer-to-peer connection with yourself) and none of them connected two or more users over the internet. Except for the last sample which is kind of hard to understand if it’s you have no experience with WebRTC.

Even though those samples help us understand what we could develop, you still have no idea how it actually works. In our next step, we are going to look at posts and documentation that explain WebRTC. Lucky for you I did the reading and will try to explain it as short as possible how WebRTC work.