Problem Statements
- WebRTC Chat Application using React ,
- Using signaling server as described in this blog,
High Level Solution
The high level solution is to implement the signaling flow as described in this blog. Below is the figure again for your convenience:
As we can see, we must implement several points for this WebRTC Chat Client:
- Opening websocket connection and initial login,
- Handle message received through websocket,
- Handle ICE Message.
Start websocket and initial login
We start with opening the websocket connection. After that, handle the onOpen event to send initial login message.
Handle message received through websocket
We have several types of message that received via our websocket client:
- New Member, when we receive this message, then we need to send an Offer message via websocket server,
- UserID, when we receive this message, then we need to send a “NewMember” message to the websocket server,
- ICE Message, when we receive this message, then we need to add it ass ICE Candidate in our peer connection with the other user,
- Answer, when we receive this message, then we need to set Remote Description to our peer connection with the other user,
- Offer, when we receive this message, then we need to send “Answer” message through websocket server. We also need to add the connection to our Local Description of our peer connection with the other user,
Handle ICE Message
ICE Candidate Message is sent by STUN/TURN server to help us traverse NAT. Every time we receive this message from STUN/TURN server, we need to send it again to websocket/signaling server. From there, the signaling server will forward it to other parties, so the other parties can know our address and how to establish p2p connection with us.
Complete Code
The complete code of the WebRTC Chat React can be found on this github. Please do not forget to leave a star on that github repository. You can also try the working website in here. Please also check out the other link on the references section to get a full understanding of the whole solution. Please leave a comment if you have further questions or inquiries.
