One day Minnie was taking a walk at the university campus when she saw Mickey running towards her
Mickey – Hey Minnie!
Minnie – Hi Mickey. Take a breath, What happened?
Mickey – Today in my class, I need to explain and teach about WebSockets
Minnie – Okay, so what’s the problem
Mickey – The class is in 10 min from now
Minnie – So what?
Mickey – You know I went for a short trip this weekend and almost forgot to prepare
Minnie – Okay, do not worry
Mickey – No Minnie, you do not understand, I have a class in 10 min and I do not know anything
Minnie – Do not worry, You will know all about it in the next 5 min
Mickey – Wow
Minnie – Let me tell you a story
Mickey – Oh Yes
Minnie – There was a beautiful village. In that village, there was a river and people had to get water from that river for their daily use
Mickey – Ok
Minnie – They used buckets to get water from the river. Every time anyone needed water, he would go to the river, fill the bucket with water and come back
Mickey – Nice
Minnie – One day they all the villagers met and thought, it is difficult to go to the river every time we need water. And we have the only option to get a bucket of water every time. In case we need a tank full, will have to go to the river multiple times.
Mickey – Yeah! It’s difficult
Minnie – So the clever people thought, instead of using buckets, they will use a hose and connect it to the river
Mickey – Great Idea
Minnie – Now you can run it anytime you want and get the quantity as per your needs, a glass or a tank full
Mickey – Smart people
Minnie – Now think of when we browse the web, how do the request and response work
Mickey – I do not know
Minnie – Well in the typical HTTP protocol a user (or client) sends a request to a server and the server sends the response and the connection is closed
Mickey – Okay
Minnie – In case the user sends another request, the connection is re-established and closed after the request is served
Mickey – Yes
Minnie – Now this works fine in most cases where you do not need to keep a consistent open connection. But think about a chat application or a real-time feed application like Twitter, Facebook, etc where we need to be connected always to the server(s) to get real-time updates, feeds, chats, etc
Mickey – Yeah, how do they manage
Minnie – This is where WebSockets come into the picture
WebSocket is a communication protocol used in client-server communication, like HTTP
WebSocket is an API that makes it possible to open a two-way interactive communication session between the user’s browser (client) and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server every-time for a reply
Mickey – I have started getting this but how do I relate it with the story
Minnie – In the story, think of the river as the website or server, the house as a browser or client. Buckets are HTTP requests and responses and water is the data
Initially, whenever the client needs he sends the request to the server, and the server responds with the data as requests and the event is closed
But, later, we used hose pipes. The hoses are like WebSockets, that keeps the stream open unless one of the client or server closes it. And the data can be exchanged without setting up a new connection every-time
Mickey – So I got it, what is the real use of having web sockets or having a 2-way open session
Minnie – WebSockets can be used in
Chat Applications
Real-time web applications
Gaming applications
Location-based apps
Etc
Mickey – Okay so both HTTP and WebSockets are communication protocols
Minnie – Yes, and
HTTP is Unidirectional
WebSocket is Bidirectional
Mickey – How?
Minnie –
HTTP is unidirectional where the client sends the request and the server sends the response. Let’s take an example when a user sends a request to the server this request goes in the form of HTTP or HTTPS, after receiving a request server sends the response to the client, each request is associated with a corresponding response, after sending the response the connection gets closed, each HTTP or HTTPS request establish the new connection to the server every time and after getting the response the connection gets terminated by itself
WebSocket is bidirectional, a full-duplex protocol that is used in the same scenario of client-server communication, unlike HTTP it starts from ws:// or wss://. It is a stateful protocol, which means the connection between client and server will keep alive until it is terminated by either party (client or server). after closing the connection by either of the client and server, the connection is terminated from both the end
Mickey – Okay, but when I work on my browser and go to any site, it starts with http:// or https://, I have never observed ws:// or wss://
Minnie – You see, the initial web address to any resource or any web page is with http(s) but internally when establishing connection and when needed, it sends ws:// or wss://
You can see this if you goto the developer options of your browser and check the Networks tab
This can be seen when you are on some chat apps or any other application that requires real-time feeds
Mickey – Oh wow, I wish I could see it and show it to my class
Minnie – Yes, you can
Mickey – How?
Minnie – You can do this on your browser
Check this video
Mickey – Wow
Minnie – So Mickey, can you now explain this to your class
Mickey – I can now explain this to anyone in the world
Minnie – Wow
Mickey – Minnie, You are my best friend
Minnie – I am always here for you 🙂
about the author | more stories
References
https://dev.to/ben/explain-websockets-like-im-five
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
https://www.geeksforgeeks.org/what-is-web-socket-and-how-it-is-different-from-the-http/
https://www.websocket.org/echo.html
Websockets demo
https://stackoverflow.com/questions/43081107/how-do-you-inspect-websocket-traffic-with-chrome-developer-tools
https://kaazing.com/inspecting-websocket-traffic-with-chrome-developer-tools/
