Web Sockets: System Design Concept

EnjoyAlgorithms Blog Cover Image

While building any Web Application, one needs to consider what kind of delivery mechanism would be best. The web has been built around the HTTP’s request and response paradigm. However, such a paradigm faces the overhead problem of HTTP, and as a result, they are not suitable for low latency applications.

In this blog, we focus on Web-Sockets, which are vital components behind the applications like multiplayer games or any application that rely on real-time data transfer. We tried to give a complete insight into Web-Socket, how it works, and its key components. So without any much delay, let’s look at what Web-Sockets are :)

What are Web Sockets?

Web Socket is a bidirectional lightweight communication protocol that can send the client’s data to the server or from the server to the client. It aimed to provide a full-duplex communication channel as compared to a single TCP connection. The connection is established once and is kept alive until it is terminated by either the server or the client. Web Sockets are highly used in almost every real-time application like trading, multiplayer, and online games to receive data on a single communication channel in a bidirectional manner.

Web Sockets and HTTP differ significantly, but both protocols depend on TCP at layer 4 (transport layer) in the OSI model and are located at layer 7 (application layer).

Web Socket protocol mitigates the overhead associated with HTTP by enabling the communication between a client and a server with low weight overheads, hence aimed to provide real-time data transfer across the channel. Web Socket has evolved the client/server web technology. It maintains a long-held single TCP socket connection between the client and the server to enable the bi-directional messages to be distributed efficiently, aiming to provide a latency-free connection.

How does Web Socket work?

Web Socket is bidirectional and a full-duplex protocol. It is a stateful protocol, i.e., once the connection is established, it will remain alive between Client and Server until either party terminates it. When the connection is established in a client-server architecture, the message exchange starts in a bidirectional mode.

However, for opening a Web Socket connection, one needs to call the Web Socket constructor. For Web Socket ws: and wss: URL schema is used, while for HTTP, https: is used.

After the establishment of a connection with the server, the data is sent to the server usingthe send() method on the connection object. Previously it used to support only strings, but now in the latest spec, it can send even the binary messages using Blob or ArrayBuffer object.

Similarly, the server might send us messages by firing the onmessage callback. The callback receives an event object while the data property is used to access the actual message. Web Sockets also have an additional feature named Extension, which helps in sending compressed or multiplexed frames.

Key Features of Web Sockets

Bi-directional data exchange: Web Sockets play a significant role in reducing the network traffic by transmitting the data in both directions simultaneously using a single connection.

HTTP Compatibility: Web Sockets are highly compatible with earlier versions of HTTP connection, which allow us to switch between HTTP and Web Socket.

Publish/Subscribe event pattern: Web Sockets allows a highly efficient data transfer model. Communication channels are established, allowing sending messages to and from a server and receiving event-driven responses without continuously polling the server.

How is Web Socket useful?

Instant Chat: Web Sockets play a significant role in real-time messaging. They are quite useful in building real-time and complex features like encrypted messages, typing indicators, etc., for chat services.

Multi-Player Gaming: Web Sockets are quite helpful in synchronising the game states between players and allow the low-latency network to work with. They allow seamless experiences across devices and allow many real-time interactive features for online and connected gaming.

Online Maps: Live geo-location data is used to build real-time online maps. Web Sockets play a significant role in routing and navigation of any moving asset on an alive map.

Live results: Web Sockets help enhance the platform and keep updating the user with the latest information and lie status like election polls and their results, live score updates, etc.

Conclusion

Web Sockets have genuinely revolutionised web development. Using their stateful and bi-directional nature, they are beneficial in systems that require real-time updates such as live sports status, multi-player games, etc. If there is any need for real-time updates or continuous data streams, then Web Sockets are the best choices. However, if we only need to fetch only once, then a simple HTTP request would be considered compared to Web Sockets.

In this blog, we tried to give a complete over of how Web Sockets work. Hope you all liked it. Please do share your views in the comments.

We'd love to hear from you

More content from EnjoyAlgorithms

Our weekly newsletter

Subscribe to get free weekly content on data structure and algorithms, machine learning, system design, oops and math. enjoy learning!