Building a WebRTC File Sharing App
This project started as an idea to create a peer-to-peer file-sharing platform using WebRTC, and after many hours of problem-solving, debugging, and refining, I finally deployed it on my site. Here’s a breakdown of my journey.
Getting Started: Setting Up the Basics
My first step was setting up the new page, editing the HTML, and ensuring dark mode worked properly. Resizing features were left for later. Since this was a WebRTC project, I had to refresh my memory on how peer connections worked.
In summary, a user creates a PeerConnection object, which gets sent to another user. The
receiving user creates a response connection, and after accepting, both users start exchanging ICE candidates.
Before this, I needed a WebSocket connection between the server and all users.
Initial Challenges and CORS (Again)
After cleaning up the UI and adding specific routes, I integrated Socket.io with the server. As always, CORS was a problem.
- Attempted to add headers directly to Nginx—didn’t work.
- Had to add certificates directly to Express for HTTPS support.
- Realized my Nginx proxy pass was using HTTP instead of HTTPS.
Once this was resolved, I was able to set up room creation and begin syncing users.
WebSockets & State Management
WebSockets were implemented on the client side, but I ran into an issue where the second user would connect
twice. It seemed like an intermediary state change wasn’t updating fast enough. To fix this, I used
window.websocketState as a global tracker to prevent double connections.
The Fun Part: WebRTC
Next up was WebRTC implementation. I stored peerConnections and dataChannels in the
window object, using socket IDs as keys. While this meant a savvy user could clear their state, I
considered it an acceptable trade-off.
My plan was to have the receiver request a file ID, and then the sender would send that file over a data channel. UUIDs were needed for every file, and I planned to introduce ICE candidates via Twilio’s STUN servers.
File Transfers & Downloading to Disk
Instead of storing buffers in RAM (as many guides suggested), I wanted to stream file chunks directly to disk. Turns out, only Chrome, Edge, and Opera support this efficiently. A warning was added for files over 2GB, recommending these browsers.
Final Steps & Deployment
After implementing straight-to-disk downloading, adding a “Download All” button, mobile-friendly UI fixes, and the ability to change usernames, I officially deployed the project on my site!
There are still potential improvements, such as:
- Adding a TURN server for better connectivity.
- Refactoring CSS.
- Enhancing file transfer efficiency.
But for now, it’s live, functional, and ready to be shared. On to the next project!