WebSockets For Beginners. Part 1.
Theory.
What are WebSockets?
Based on MDN definition, the WebSocket API (WebSockets) is an advanced technology that makes it possible to open a two-way communication session between the user’s browser and a server. But what exactly does that mean and how does it work in real life?
Let’s start at the very beginning. When you are trying to get to your favorite website, you usually start with typing an address in the browser.
The browser then sends a request to the server (a virtual place where information is stored).
The server then checks if the requested webpage exists, and sends the response back to the browser. If the page exists, the server sends it back. If it doesn’t exist, the server sends back an error.
Let’s dig deeper!
When the browser sent a request to the server to get to our letsgosurfing.com page, it used a protocol known as HTTP (Hypertext Transfer Protocol), which defines how messages are formatted and transmitted, and what actions web servers and browsers should take in response to various commands.
The main principle of HTTP is, in order to get information from the webpage, the browser first has to ask the server if this information exists. The server then goes to check and sends a response. For example, to get an update on a baseball game score, you would have to constantly check the game webpage.
Here is where WebSockets really shines. If you want to get updates in real-time, WebSockets allows a persistent connection between your browser and the server and typically run over TCP/IP (Transmission Control Protocol/Internet Protocol). WebSockets uses sockets — continuous channels of communication between two ends — in their implementation. Whenever the server receives new information, it automatically sends it to the client through the socket.
Let’s look over an example with a chat-room:
When Kira opens a chat-room in her browser, she opens a socket connection to the server. And so did everyone else already connected to that chat room. When she types “Hi humans!” and presses send to all, this message is delivered to the server through the socket which automatically sends the message to all the users in this public chat-room.
Our chat uses WebSockets, which means the server is waiting (listening) to receive any new messages from the client. When the server receives a message from Kira, it sends it to all users (clients) in the chat.
This is a kind of circle: the client sends a new message to the server, which “listens” to updates from the client, then as soon as the server receives the message, it sends it through the socket connection to all clients, who were listening to receive updates from the server.
And this is repeated until the user leaves the chat.
Enough theory, let’s get our hands dirty and build a simple real-time chat-room, which eventually is going to look like the one below.
