I know people are busy with their stuff and some of you don't have time to read all this topic. So ...
Demo here: https://f2f.nhvu95.com/#/
Frontend: Angular 2+, Stompjs, NgXS
Backend: Spring Boot, ActiveMQ, PostgresSQL, Docker
Source code: https://github.com/nhvu95/angular-send-file-peer-to-peer
And if you lazy to read all. This is my project structure and base flow to handle sending file P2P, It will take you 1min.
And well, If you still read until here. I guess that you are interested in my project.
I, How it comes
I'm tired of sending files p2p to my colleagues. Because of security policies, we cannot upload it to the cloud, The stupid chatting platform in my company only allowed 30Mb file sending.
And some p2p website available on the internet right now is not free or ask the user to create an account to use them. And actually, I do not really know if they stole my file or not. So I build this website myself.
II, Some challenges I got.
I believe that we are all here as software engineers or developers. So guiding someone to do something is unnecessary. I will tell you some challenges I got when implementing it.
1. New concepts
Reading WebRTC's concepts takes me a few days (Cause I only spend time on it after work). The WebRTC's Google documents are slightly hard to imagine.
- Signaling Channel
- Data channel
- Turn / Stun server
- ICE Candidates
- Offer - Answers - Descriptions
- Peers
- Network concepts like NAT ...etc.
The good news is that after reading all I have a better understanding of the Web Realtime Communicate and the big view, not just about small things like sending files.
You can read all about WebRTC here
2. Environment
The environment is the next one take my time.
- At the V1, I use AWS Lambda & Serverless framework, DynamoDB, because I think it could complete faster. It did. However, it becomes a nightmare when debugging and maintenance.
- I create a Turn/Stun server by using Coturn which runs on AWS-EC2, public ports also take time. So on V2 I use exist Turn/Stun server instead of creating a new one myself.
- My company's private network prevents us to connect to AWS, so I have to self-host this system myself, on my personal computer.
3. Problem challenges.
This system was implemented 2 years ago. At that time, it's come with a challenge "How to save the file streaming". Because StreamSaverJS at that time was unavailable for browsers. So I have to use FileSaverJS and It comes with a limitation 2Gb.
To solve bigger files. I slice it into small parts and send them.I also have a plan for many senders and many receivers at the same time. So I design my system following this Idea. A sends a1, a2 to B, and D. If B already has a3, C can take A3 from B instead of asking A. However, I don't have time for that feature, so right now it only supports sending 1-1.
Nowadays, we have WritableStream and StreamSaver on browser, Yay!!!!. Now we can save the file streaming directly without saving it on the RAM.
III, Concluding
I know it is not perfect, not durable, and good enough to serve the community. It was hosted on my Personal Computer and behind the Cloudflare tunnel, so maybe the performance maybe not be good.
But I hope my project, my source code, and my project structure above at least gives you a bit of the base knowledge and information about sending file Peer to Peer on the browser.
Finally, hope this article can help you all a bit in the future.
Thank you for reading this.
Top comments (0)