Is WebSocket a Game-changer?

Emerging into this dynamic world of Web development is both exciting and daunting. One of the more important concepts to understand when becoming a web dev is how users can see and interact with websites. As users, we are often mystified as to how the internet works and where these websites are coming from. Throughout this article, we will gain a high-level understanding of HTTP and WebSocket and how they differ.

Ever wonder how the content we read and interact with online ends up on the screens of our computer? Everything that you see on this site is coming from a server. You may ask, how does the server know what site I want to see? Well, your browser, also known as the client, sends a message to the server requesting a particular page with the information you are looking for. This entire process is known as an HTTP (hypertext transfer protocol) model. HTTP may look extremely familiar! Take a look at this URL: http://www.google.com/. The first few characters are “http”. This is defining the protocol for the communication between the client (the browser) and the server. The remainder of the URL is specifying what exactly you are looking for.

When a user wants to render an application, the client opens a TCP connection to the server by sending a header which includes a GET request and the desired URL. The server then responds with a status code and the requested rendered page. If the server is unable to find the desired page or if there is an interruption, the server will respond with an error and a corresponding status code. Once the server gives its response, the connection closes. When the user decides to navigate to another page or modify anything on the rendered page, the process repeats except the action may change from GET to POST, PUT, or DELETE.

Here are some fundamental ideas to remember about HTTP:

1. A client must send connection requests and the server will send a response for stuff to happen. The response may be fulfilling the particular request made by the client or an error
2. HTTP is stateless, meaning after the initial request is done, the server-client connection is lost
3. The client must specify the GET, POST, PUT, or DELETE action when requesting the server.

Let’s take a look at HTTP in action…

The client opens the communication by prompting an action request to the server. The Server sends a response that renders the request or displays an error. Once that response is sent the communication closes and the connection is lost.

As you can imagine, there would be a ton of connection requests being made between the client-server when a user is interacting with a web application. HTTP has historically and continues to be a very practical network protocol. However, what if I wanted to see real-time changes to a site? Perhaps, a friend of mine sent a message to me in a chatroom. With HTTP, I would need to press a button to trigger a GET request to the server to show any updates made to the page. Using the chatroom would be annoying and tedious and I wouldn’t receive any notification that my friend responded. Also, I would have to tirelessly press a button to render the page in the hopes that there was an update and my friend responded to my message. How can we solve this problem?

Let me introduce you to WebSockets! WebSocket is not used as a replacement for HTTP; rather, it is an upgrade that allows the client and server to communicate in real-time without continuously having to make explicit requests. To initiate Websocket, the client sends the header to the server requesting an upgrade to Websocket. It then uses that same TCP connection that was established to load the page to upgrade. Once Websocket is being used, it essentially becomes a free-for-all. Since WebSocket is stateful, both the client and server are constantly aware of each other. Clients can send unlimited requests and servers can send unlimited responses without having to re-establish new connections. This protocol is great for social media apps or multiplayer games as all the updates and changes to the page will be immediate and in real-time.

Take a look at how the server and client interact…

When using WebSocket, after the initial HTTP request and a handshake, the client and server interact as much as they want without having to establish additional connections. This allows for real-time updates.

Let’s go back to the chatroom scenario when I had to continuously click a button to refresh the page in hopes my friend responded. With WebSocket enabled, this is no longer a problem. Since the TCP connection is established and remains open, there is never a need for the user to trigger explicit requests, as the client is continuously listening and receiving responses from the server. This means that as soon as my friend responds to my message, it will instantly appear on my screen in real-time. This makes user interactions with web applications seamless and convenient.

Now that we have a better understanding of HTTP and WebSocket and how they differ, let’s weigh out the pros and cons of using WebSocket!

What’s Great about WebSocket?

• WebSocket is widely supported by modern browsers including Chrome 16, Firefox 11 +, Internet Explorer 10+, Safari 6 +, Opera 12.1 +, iOS 6.0 +, Blackberry 7 +.
• Headers are not sent every-time information needs to be rendered from the server. This reduces expensive data loads being sent to the server.
• WebSocket has Full-duplex asynchronous messaging. This means that the client-server interactions are continuous and independent.

What’s Not so Great?

• WebSockets do not automatically recover when the connection is closed. This is an additional step that the developer needs to implement.
• Browsers that are older than 2011 don’t support WebSockets connections. As users continue to modernize their technology this becomes less of a problem.

When building a website, it is important to consider the flow of your application and what is most beneficial for the user experience. WebSocket is not perfect for every situation, and the decision to use it should be considered carefully. As a developer, it is imperative to make a user’s interaction with your website positive and seamless. If you are considering building a website that has features with real-time updates or notification, upgrading HTTP to WebSocket is the solution for you.