HTTP protocol and WebSockets: What You Need To Know!

Image for post
Image for post

How does an HTTP protocol work?

Image for post
Image for post

Let’s say a website sends 5 different requests to the server in order to retrieve 5 different information, it’s going to create 5 different connections separately. If we take any REST connection, it’s also the same thing when we’re hitting a REST endpoint form UI, from Postman, or from different servers, these connections will be closed when the responses are received. If a Trading website sending hundreds of requests to the backend web server while it’s doing some trade processing, it’s going to retrieve those 100 pieces of information with 100 sets of new connections. Every time a request is made, a new connection is created. In other words, a new connection is established every single time.

What is WebSocket?

Image for post
Image for post

One of the major differences between the HTTP connection and the Websocket is that: HTTP is unidirectional (sender has to create a request in order to get a response) and Websockets are bi-directional (the receiver could also send data). In other words, bidirectional communication means data could flow in both ways — from the client to the server and also from the server to the client. But how are they achieving it? They don’t close the connection which they opened for the first time. Whenever a client has established a connection with the server, this connection stays there until the client or the server decides to terminate the connection. And because these WebSockets are always open, it allows real-time data flow in the application.

Image for post
Image for post

Let’s consider a client and a server. Whenever we initiate a connection between them, a handshake is made. The client and the server decide to create a connection that is going to be there forever. Once it’s open, the communication happens in terms of bidirectional message processing. The connection will exist until the client or the server dies. If one of the sides decides to close the connection, the connection gets terminated permanently from both the ends. This is how WebSocket works, unlike HTTP where a connection is closed once the response is received.

Where/When can WebSockets be used?

Image for post
Image for post

Imagine we have a chat application that is hosted on this black server here. All the clients are different people around the world. They all go to our black server through their web browsers (might be Chrome, Edge, Safari..) to request our chat application. If one person sends a message to our chat app, this message will be simultaneously updated in all other client’s browsers around the world viewing that chat as well. This is how chat works and also Websockets in action.

Q: But what is really going on?

When we first request our chat app in the browser, we’re opening a WebSocket between the client and server. That’s also mean, other clients have their own WebSocket opened while connecting to our server as well. Because these are always open, data can flow back and forth between it in real-time. So when a person writes and clicks Send, our server receives it and distributes it to all other people in the Chat room (all each individual web socket). All of them will be notified that a new message has arrived.

This data transfer occurs in real-time and will not use any kind of Ajax request from each of these different clients to get any new data from the server. In other words, the client doesn’t have to make any additional requests at all.

There are tons of different uses for Websockets, not just chat rooms. They include:

  • Multiplayer browser games. The game UI is automatically refreshed without us having to reestablish a new connection
  • Collaborative code editing (you might see it in Google Docs)
  • Chat application
  • Live text for sports/news websites
  • Online drawing canvas
  • Real-time running apps with multiple users

When not to use WebSockets?

More articles from Designveloper:

Written by

Designveloper is leading software development company in Vietnam. We offer Web development, mobile application, UI/UX Design, VOIP. www.designveloper.com

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