WebSocket system design: Learn How to Build a Chat-Based Application with WebRTC & Websockets – Part I

March 3, 2021

Introduction

I am a 55 year old software programmer with 11 year full time job experience. But I also need to learn better about WebSocket, how to use WebSocket to design a chat application. I learned the lesson from my real onsite interview experience in 2021. I need to take time to read more articles about Websockets. 

a Chat-Based application

Here is the article. 

How Can Your Application Achieve Real Time Communication between Browsers?

WebRTC gives the web browser the capability to connect users to share video, audio and data content directly, this is known as peer-to-peer communication; this is fantastic but in real world applications, we should do a couple of extra things to have the whole flow fully operational.

It’s like if we want to send a letter, we are free to send it to anybody but in addition to the receiver name, we must know its location to be able to deliver the message (among other things). The same occurs with WebRTC, it opens a window to share media content with other peers, but before that we need to exchange some initial information with the counterpart following a specific process.

In the WebRTC ecosystem the process to exchange information with other peers to establish communication is known as “Signaling” and we can list some common actions to describe that process:

• Login: A user accesses and identifies himself in the web application
• Call: A user wants to establish communication with another user
• Answer: A user answers another user’s call
• Hangout: A user desires to finish the communication

What Do You Need to Implement Signaling in Your Application?

The Signaling process is out of the scope of WebRTC (at least at the beginning), so we need a complementary tool to be in charge of it, here is where Websockets come to the rescue.

There are other options to manage the signaling process, but implementing a WebSocket server is one of the approaches that offer more advantages:

• Support across all browsers
• It’s an old acquaintance for web developers
• Easy to implement
• The client/server communication is reliable
• Additional business logic can be added before establishing the communication
• Can be an option to implementing a fallback strategy