WebRTC Chat Application

Lately, I am attracted to exploring more about peer-to-peer solutions. One of which is using WebRTC for its protocol. WebRTC is a protocol for a web application that has been available in many recent versions of major browsers, like Chrome, Firefox, etc. In this posting, I will explain how I create a chat application using React (browser/client side), and Spring Boot for the signaling server.

Problem statements

1. Peer-to-peer chat application
2. Must be end-to-end encrypted

Solution

The solution is WebRTC. By using WebRTC protocol, we can easily make p2p chat application, and the protocol itself has mandated e2ee in its implementation.

The WebRTC chat application will use these items:

1. Signaling Server, this is the broker that helps each client find another client
2. STUN/TURN server, this is a server application that helps the client find its public IP Address, or relay the p2p message if the clients are behind a strict firewall
3. RTCDataChannel and RTCPeerConnection, is the WebRTC API that we use to build the solution on client-side

Figure 1. Illustration of WebRTC infrastructure (source: https://www.techtarget.com/searchunifiedcommunications/definition/WebRTC-Web-Real-Time-Communications)

Let’s start with the signaling server. We will built the signaling server using Web Socket Protocol. The framework that we will use is Spring Boot. The flow for the signaling described in figure 2 and figure 3.

Figure 2. Signaling Flow

Figure 3. ICE Message Signaling

As described in figure 2 and figure 3, we have these types of signaling messages:

1. Login, is the message to get unique UserId from the signaling server,
2. New Member, is the message to announce client as the new member to join signaling server,
3. Offer, is the message that contains SDP Offer sent by new member
4. Answer, is the message that contains SDP Answer based on SDP Offer received by the client
5. ICE, is the message that contains ICE Candidate, sent by each client.

The complete code for the signaling server can be found in this github (don’t forget to give a star). Please check this article for further explanation of the signaling server solution.

For the client side, I’ve used React and Bootstrap. The complete code can be seen on this github (don’t forget to give a star). Few things to address:

1. Do not forget to setup STUN and TURN server on the RTCPeerConnection. STUN server is used by client to find out their public IP Address. TURN server is used as relay if the client is behind tight firewall or NAT,
2. Create RTCDataChannel before creating an offer,
3. Do not forget to set event type of onDataChange for the RTCDataConnection. For this receive channel, do not forget to handle event for onMessage.

You can find a working website of this solution in here.

Limitation

As of this writing, WebRTC has limitation when opened in mobile’s browser. If you lost focus on mobile’s browser (example switch to other apps), then the Peer datachannel connection will be automatically close. This is explained in here.

References

1. https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample
2. https://www.baeldung.com/websockets-spring
3. https://www.webrtc-experiment.com/docs/rtc-datachannel-for-beginners.html
4. https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling
5. https://mrizkysatrio.medium.com/webrtc-signaling-server-example-using-spring-boot-efd5f067900a
6. https://glowing-creponne-b62856.netlify.app/
7. https://mrizkysatrio.medium.com/webrtc-client-chat-app-using-react-99bf8e803fd8