Build a Peer-to-Peer (P2P) Image Sharing App with WebRTC and React
WebRTC makes it possible to transfer files between two browsers, eliminating the need to upload a file to a server before sharing. Data is not stored in an intermediary server, which makes the transfer fast and secure. In this article, we will build a simple React app that will allow users to share images directly with each other using WebRTC.
A demo of what we will be building:
To start, we need a signalling server. This is used for establishing a connection between peers. The signaling server doesn’t deal with the media traffic, it is only responsible for enabling users to find each other in the network, establishing the connection, resetting and closing it down.
Lets start by creating a new project with an Express server and Socket.IO, because we want our signalling server to use a WebSocket connection.
$ yarn init$ yarn add express socket.io username-generator
Now create an index.js file that will be the entry point for our application. Start by importing the libraries and setting up our server:
Generally, our server needs to listen for events from the client and also emit another event in response. We define all this events in a variable called SOCKET_EVENT
We also need a variable to store all users that are connected. We do that on the users object. We also assign random usernames for all connected users with the help of the username-generator library.
We also define two helper functions, usersList which converts the users object into an array and logger, which is just for logging into console, so we can see what is happening inside.
Okay, and now the main part, establishing connection between peers. What we are basically doing here is relaying messages from the two users, so that they can establish a peer-to-peer connection.
The server part is done, we can move on to the front-end. We start by creating a new react app:
$ create-react-app pic-share We also need to add some additional packages. simple-peer makes it easier to work with the WebRTC API. We will also use Bulma for styling.
$ yarn add simple-peer react-bulma-components react-dropzone socket.io-clientAll the WebRTC related logic will be place in the App.js file. We will use some custom components here, which are available from the source code. Lets define all the states and references we need to get started.
We need to listen for events emitted from the signalling server and handle them. Lets do that on an effect hook. Note that we are providing an empty array for the second parameter, because we don’t want it to run on each update.
Now, lets define methods to handle the main functions of the app, which are sending, accepting and rejecting requests.
When a user sends a request, a signal is sent to the user. The sender waits until a connection is made, then it starts sending the image in chucks. When all chucks are sent, the user sends EOF indicating end of file. On the receiver side, the user receives all the chucks and combines them into a blob, forming the complete image.
Our final App.js file will look something like this:
Conclusion
That all for this article, hope you enjoyed reading it. Check out the source code and demo and please share your comments or suggestions in the comment section.
More content at plainenglish.io
