Introduction to WebSockets
How WebSockets work, their use cases, and the difference between WebSockets and HTTP
WebSocket is a communication protocol just like HTTP. The essential requirement of WebSocket is to communicate between clients such as a web browser and a server, unlike HTTP, WebSockets start from ws:// or wss://. It provides full-duplex communication channels over a single TCP connection, enabling real-time two-way communication. This allows both the client and server to send messages to each other at any time without the need for continuous frequent HTTP requests. The connection is kept alive until either party, client or server terminates it.
How does a WebSocket work?
WebSocket communication begins with an HTTP request initiated by the client to the server. This request contains a special header called “Upgrade” with the value “WebSocket” and other required headers. This initiates a Handshake Protocol. This request is acknowledged by the server which agrees to upgrade the connection only if the server supports WebSockets. On a successful connection, the server responds with an HTTP 101 status code also known as Switching Protocols. The server also includes the necessary headers in the response, such as “Upgrade” with the value “WebSocket” and “Connection” with the value “Upgrade”. From this point forward, the communication occurs over a single TCP connection instead of the traditional request-response model of HTTP.
As the connection is established between the client and the server, they can send messages to each other asynchronously. The messages can be in the form of plain text or binary data and they can be sent in either direction depending on the requirements of the application. All the messages are wrapped in a WebSocket frame, which includes information about the message like the length of the message, data type, and other flags.
Full-Duplex communication allows the client and the server to simultaneously send and receive messages without the need for explicit requests. This enables real-time bidirectional communication which creates a persistent continuous data flow.
The last part of the protocol is termination. The web socket connection can be terminated by either the client or the server by sending a special control frame to indicate the intention to close the connection. Upon receiving the close frame, the other party acknowledges it, and the connection is closed gracefully by both parties.
What is the difference between WebSockets and HTTP?
- Type of Connection: In HTTP, a new connection is established for every request. Once a response is received for this request, the connection is closed. This leads to overhead in terms of establishing and tearing down connections for each request. WebSocket, however, establishes a persistent connection between the client and the server allowing continuous communication, and is only terminated when the connection is no longer required.
- Real-Time Communications: HTTP is used for static document retrieval and traditional web applications. However, when it comes to real-time interactive communication, where data needs to be pushed from the server to the client in real time, HTTP is not well-suited for this purpose. WebSockets on the other hand, is specifically designed for real-time bidirectional communication enabling instant and continuous data updates without the need for repeated requests.
- Communication Model: HTTP is a request-response model which is a stateless protocol meaning that no request is dependent on previous requests. WebSockets enable full-duplex communication, where all the communication can be done in a single connection.
- Overhead: In HTTP, each message is sent in a different request/connection hence the server needs to process each request separately leading to more overhead, whereas WebSockets have less overhead as it only needs to establish and maintain the connection, and subsequent messages can be sent with minimal header information.
- Supported Clients: HTTP is the foundation of the World Wide Web and is supported widely by web browsers, servers, etc. WebSocket is a recent addition and requires support from both the client (web browser) and the server (server frameworks or libraries). Some older browsers may not fully support WebSockets.
What are the use-cases of WebSockets?
- Real-time applications that require instant updates and interactive communication between clients and servers. Examples include chat applications, messaging platforms, collaborative tools, and multiplayer games.
- WebSockets are also used in financial applications like the stock market, cryptocurrency, trading platforms, and financial new services.
- WebSockets are essential for a variety of live streaming and broadcasting scenarios, including live sports, news broadcasts, betting matches, and statistical updates. From delivering live scores to pushing breaking news, they play a vital role in enhancing the dynamic and interactive experience of these live streaming applications.
- IoT (Internet of Things) Applications use WebSockets which enables real-time monitoring and control of devices.
These are just a few examples, and the versatility of WebSocket allows for many other innovative real-time applications where instant, bidirectional communication is a requirement.
References:
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
