4 Followers
·
Follow

Cross-platform peer to peer file sharing over the web using Webrtc and React Js.

A mockup of our open source application ‘Vegh” check it out .
A mockup of our open source application ‘Vegh” check it out .
Simple mockup by me :P

My motivation

Our goal was to make a streamlined easy-to-use peer to peer file sharing web app. Putting more effort into the user’s experience and the simplicity to get things done. The web-app is not just for a particular group of individuals, it’s for the whole community.

Why all this when there exist so many file-sharing websites?

Well, I thought about this too but all these websites never truly explained where these files are shared or stored. This might be a privacy threat as many people during the current pandemic situation or generally will be sharing confidential documents or files using these services. Using a secure peer to peer connection and its Data channel huge files can be transferred without storing it on any server making it really robust and truly private as only the connected clients/peers are communicating directly with no middle server for transfers.

WebRTC

“ WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose. “ — webrtc.org

Well Hypothetically, a “peer to peer” association considers direct information sent between two devices without a requirement for a server to persevere the information. Sounds ideal for our case? 😕 Unfortunately, this isn’t the means by which WebRTC works!

Image for post
Image for post
Data transfer using WebRTC

How WebRTC creates a connection (Technically)

Well, there’s no easy way to explain this but here’s my take on this, Out of the all the considerable number of devices in the network, there must be in any event one device which starts the connection by producing the signal information to be sent to the signaling server. This peer is known as initiator and in simple-peer (module used in this project) { initiator: true } is passed to the constructor when an initiator peer is made.

Image for post
Image for post
Signaling server in action.

Sharing a file with WebRTC (using simple-peer)

Websocket server Js code
React Frontend code

Why Use Array buffer instead of blobs?

In our past code, on the off chance if we pick an enormous file (above 100kb) the document in all probability wouldn’t get sent, this is a direct result of certain constraints of WebRTC channels.

Image for post
Image for post
Array buffer comic illustration by (mozilla.org)

Small Note

Since javascript is single-threaded. Handling a large number of the array buffers can cause our beautiful UI to be unresponsive. To fix this we will be using service workers. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. You can learn more about it here.

Handling array buffers in service workers.

Advantages of dividing the files into array buffers

While it might feel that dividing the file is only some additional code to make stuff entangled, we get the following advantages that can help in improving our document sharing application.

Image for post
Image for post
Cross-platform support (Illustration by mozilla.org)
  • Huge document size support — As referenced prior, this is the essential explanation of why we are implementing it.
  • A superior method to decipher the measure of information sent — By sending a record in buffers, we would now be able to show the information, for example, level of the document sent, the pace of record sent, and so on.
  • Identify incomplete document sent — Situations, where a file couldn’t be sent totally, would now be able to be gotten and taken care of in a different way.

Conclusion

Since we have a straightforward document sharing application utilizing WebRTC which additionally utilizes ArrayBuffer, we should now begin considering the stuff that would prepare our application for production. These details are much meant to be explored rather than just following a straight tutorial.

Written by

I code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store