WebTorrent Workshop

10 - Explore on your own

Congrats on building your own file sharing website using WebTorrent!

In around 100 lines of code you were able to build a powerful website that delivers files directly between users using peer-to-peer WebRTC technology, without sending the files through a central server. Seriously nice work!

Furthermore, since the site is powered by the WebTorrent protocol, you automatically get swarming behavior, which means that if one person wants to share a file to 100 people (say by tweeting it out to your followers), it will scale very well. Any peer which has a piece of the file will be able to share it with other peers that don’t have it yet. The initial sharer of the file won’t have to do all of the work sending 100 individual copies of the file to each of the 100 people who want it. Very powerful! And you didn’t need to write any extra code to get this behavior.

Unlike traditional web server architectures which slow down the more users they get, WebTorrent-powered sites get faster and more resilient the more users who join. It’s people power in action!

Tips

You should spend some time now adding enhancements to your file sharing site. Here is a list of ideas to make your site more useful:

• Improve the user experience. Right now the site is very simple and quite technical. Can you hide certain information from the user to make it friendlier? Can you add animations or other UX flourishes to make the site more fun to use? One file sharing site that uses WebTorrent and has a nice UX is File.pizza.

• Show remaining download time. Instead of just showing progress (like 5% or 95%), it would be nice to show an estimate of remaining download time in plain English. For example, “2 minutes remaining” or “Less than 10 seconds remaining”. You’ll want to take a look at the date-fns formatDistance function which helps you generate these friendly English phrases.

• Add share URLs. Instead of requiring the user sharing the file to share a magnet link, what if they could just copy a URL and send it to their friend? The URL could contain the full magnet link within it and the site could automatically begin downloading the magnet link that’s included in the URL. To shorten the URL even further, you can just include the “info hash” rather than the full magnet link and WebTorrent will automatically convert it into a magnet link. For an example of this in action, try visiting this link: https://instant.io/#08ada5a7a6183aae1e09d831df6748d566095a10.

• Add file encryption. Even though file data is only ever sent between peers and it never goes through a central server, the WebTorrent tracker servers which help peers connect to each other are aware of the magnet links which are in use. It is possible for a malicious tracker server to join the peer swarm and start downloading the torrent from your users. You can solve this by encrypting the file data before calling client.seed so even if a rougue peer were to join the swarm, they won’t be able to read the data.

• Offer a .zip download of all the files. Instead of just giving the user individual file download links, what if they could click once and automatically get a .zip file with all of the files in it? You’ll want to take a look at the jszip library which allows you to create ZIP files purely from data in JavaScript.

• Add a QR code option for easily sending a share URL to a phone. If you open the native camera app on many smartphones and point them at a QR code, they will offer to open the URL in the web browser. This is an easy way to share URLs from the desktop to your phone. Support this use case. You’ll want to take a look at the kjua library which can help you generate QR codes.

• Whatever else you think of! Hopefully these suggestions inspired you. What else would make this into a more amazing site for sending files to your friends? We recommend browsing the WebTorrent docs and WebTorrent FAQ to get an idea of what else you can do with WebTorrent.

• Deploy your website and share the URL with us! If you build a cool website, please share it with us on Twitter @WebTorrentApp or on Discord. We love to share and promote the things created by the amazing WebTorrent community – and now that you’ve completed this workshop, that includes you!

When you are ready, you can start the next workshop.