Geek Culture
Published in

Geek Culture

System Design Basics: WebSockets

What are WebSockets? How are they different from traditional network protocols?

Overview

The WebSocket protocol created new possibilities for communication over the Internet and opened the door to a truly realtime web.

WebSockets were first described in 2008 and have enjoyed wide browser support since around 2010. Before WebSockets came along, the “realtime” web existed, but it was difficult to achieve, typically slower, and was delivered by hacking existing web technologies which were not designed for realtime applications.

WebSocket

How does a traditional Network transaction works?

A traditional network call(HTTP, REST etc.) happens in the following way. We have a connection between the client and the server. The client sends a Request to the server, which then sends back the Response to the client. If the client wants to make multiple requests to the server, then multiple connections will be made (in series or in parallel). A typical REQUEST-RESPONSE service looks like this:

HTTP Request

A separate connection is created for each request that ends when the response is set.

What are WebSockets?

WebSocket is a persistent real-time communication protocol between the server and the client over a single TCP connection. It provides a full duplex communication channel wherein data can be sent bidirectionally.

It provides wss(for https) and ws(for http) protocol to create webSockets. The wss protocol establishes a WebSocket over an encrypted TLS connection, while the ws protocol uses an unencrypted connection. At this point, the network connection remains open and can be used to send WebSocket messages in either direction.

WebSocket Communication Protocol

WebSockets are generally used in applications where real-time continuous data is to be sent (stock price tracker, logging, live streaming etc.) or when bidirectional streaming is required (video calls, chat apps etc.)

WebSocket Communication Protocol

  • Connection: The connection is established between the client and the server on a particular port. We can make use of a single port to spin off the HTTP server and the WebSocket server. Once the HTTP server is created, we tie the WebSocket server to the HTTP port.
  • WebSocket Handshake: The client sends a GET request. It is similar to a normal GET request, but an added header known as Upgrade Header that’s added to the GET request. The server, in response, returns a status code 101, which is a code for switching protocols. This switches the protocol from HTTP to WebSocket.
    To establish a WebSocket connection, the client sends a WebSocket handshake request, for which the server returns a WebSocket handshake response.Client request (just like in HTTP, each line ends with \r\n and there must be an extra blank line at the end):
GET /webSocket HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

The Server returns the following response:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
WebSocket Handshake
  • Bidirectional Messaging: Messages can be sent continuously from both the server and the client in any order.
  • Closing the connection: Closing a connection is possible with the help of an onclose event. After marking the end of communication with the help of onclose event, no messages can be further transferred between the server and the client.

Pros and Cons

The advantages of using WebSockets are:

  • Full Duplex: The biggest advantage of WebSockets is that the connection is maintained after handshake. No polling is required hence server and client can send information with minimum overhead.
  • HTTP Compatible: The upgrade header makes WebSockets HTTP Compatible. This helps in setting up proxies & helping the infrastructure understand the existence of a WebSocket.
  • Firewall Friendly: Since it uses the same port as HTTP/HTTPS, it’s firewall friendly as the communication is maintained over a single port.

However, there are several complexities that arise with WebSockets:

  • Proxying: WebSocket is complicated. Setting up proxies, especially a layer 7 proxy, becomes very complex. This is because proxies break the TCS, hence another TCP connection is required to maintain the connection.
  • Load Balancing: Since WebSockets don’t have timeouts, it should not be terminated forcefully. If the server goes down during downscaling, the connection ends and information cannot be lost. Database is required to maintain the state here so that it can reestablish the connection in case the server gets killed.
  • Scalability: WebSockets are stateful. This makes it very complicated to scale. It becomes very difficult to horizontally scale the application while maintaining the states.

Amazon WebSocket APIs

A WebSocket API in API Gateway is a collection of WebSocket routes that are integrated with backend HTTP endpoints, Lambda functions, or other AWS services. You can use API Gateway features to help you with all aspects of the API lifecycle, from creation through monitoring your production APIs.

API Gateway WebSocket APIs offer the following ways for you to send data from backend services to connected clients:

  • An integration can send a response, which is returned to the client by a route response that you have defined.
  • You can use the @connections API to send a POST request.
AWS WebSocket API based Chat Application

Conclusion

WebSockets are one of the most interesting and convenient ways to achieve real-time capabilities in an application. It gives us a lot of flexibility to leverage full-duplex communications.

However, it comes with it’s own set of complications, and should be used only when the advantages outweigh them. Unless bidirectional communication is absolutely necessary, HTTP is more reliant.

Congratulations on making it to the end! Feel free to talk about tech or any cool projects on Twitter, GitHub, Medium, LinkedIn, or Instagram.

Thanks for reading!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhinav Singh

Abhinav Singh

Talks tech when excited, anxious, free or bored