An Introduction to WebSockets
As a child of the 90's, I vividly remember my first experiences chatting with friends using a desktop application called AOL Instant Messenger (“AIM” for short). It instantly felt like an upgrade from normal text messaging, where you can see and send messages to your friends in real time. We were all obsessed!
Fast forward to the present, recent years have seen the rise of “the real-time web.” Real-time web apps we use daily (think Gmail, Slack, and Twitch) are dependent on real-time features. These features allow the user to receive new messages, emails, videos, and more at the top of their feeds without ever having to refresh the page.
The reliance on real-time data rendering represents a major departure from Hypertext Transfer Protocol (HTTP)’s strict request-response pattern for the World Wide Web. In the real-time web, users receive new information from the server as soon as it is available whenever it is created — no request required.
The WebSocket Protocol has been rising to dominate real-time technologies since it’s development in 2009. But what makes this iteration more special than previous technologies of real-time tech?
What are WebSockets?
Let’s first go over the previous protocol of HTTP. When a user surfs the web, the browser (client) sends certain requests via RESTful routes (‘GET’, ‘PATCH’, ‘POST’, etc) to the server that hosts the website they are trying to access. The server receives the requests and sends information as responses back to the client, which receives and renders the response information on the page.
WebSockets are different because they work by holding the connection from the client to the server open at all times. This way, the server can send information to the client, even in the absence of an explicit request from the client. Clients can still make HTTP requests to the server like normal; however, the WebSocket connection allows for constant communication in the case of new data being created and therefore needing to be rendered client-side. This is how Gmail emails pop up on your feed instantly, without you have to refresh (and therefore send a GET request to the server). We call this “full-duplex” communication between the server and the client.
In this post we’ve discussed the WebSocket protocol and how it’s different than the usual HTTP request/response information flow. WebSockets represent a big step in the evolution of the internet — having the ability to open bidirectional connections enables a whole new generation of real-time web applications!
If you’re interested in learning more about WebSockets and how they are implemented in common technology stacks (React, Rails, etc), I recommend checking out some of the links below.
Resources and Further Reading
