WebSockets and SocketIO

I came to know about WebSockets and SocketIO library when I was building a Chat Application.

👉 What are WebSockets ?

WebSocket is a two-way computer communication protocol over a single TCP. There is bidirectional data flow between client and server as well as real time nature due to always open TCP connection.

👉 Difference between HTTP and Web Sockets ?

‣ HTTP is unidirectional in which client sends the request and server sends the response and connection is terminated. Again when a request is made new connection is made. WebSockets is bidirectional and connection between server and client is kept alive until it is terminated by either party.

‣ HTTP starts with http:// wheras Websockets starts with ws:// or wss://

👉 Socket IO

Socket Io is a JavaScript Library that enables real time bidirectional communication between browser and server.

👉 Polling vs WebSocket vs SocketIo

As you may already know most of the internet works over HTTP request/response model. In this the client sends the request to the server and based on this request the server sends back a response so in a simple example when we click on a link and request the server to show us a page, the server would respond with the contents of the page. The important thing to note here is that the client has to initiate a request before the server sends back a response.

The server is just sitting there constantly listening. For any requests the server cannot independently push data to the client without the client having requested. At first this model works fine if you're requesting data which is already in the server. For example, if you want to view a web page and the page is already there in the server then the server can send us the page the moment we request it, but this model is not going to work well for a chat application.

Can you see why that's right? When the server receives a new message, that our friend sends us it cannot proactively push this message to us because in a typical HTTP client server model the client has to request the data before the server can send it, so the server has to patiently sit on this new data till the time the client asks the server to send this new data so one way around it is to use what is called as short polling.

In short polling the client will automatically check with the server for new data at predefined intervals. The server still cannot send a response without a request from the client, however since the client automatically places the request periodically the new data is also sent to the client at regular intervals. You can think of this like a kid in the car who after every couple of seconds will ask are we there yet? are we there yet? are we there yet?  depending on how short is the time gap between each automatic request that the client sends.

Short polling can feel like real time now. An alternative method for achieving the experience of real time is long polling. It's similar to short polling except the client does not blindly keep checking for new information at a set interval instead in this model the client makes a request, the server holds on to the request till new data is available. Only when the new data is available will the server send the data to the client and the moment the client receives the new data it immediately pulls the server for new data again the server once again holds on to this request till any new data is available and the moment new data is available it sends it to the client right away and the client again automatically holds the server for new data so even this seems like a viable option for a chat application.

Let's talk about WebSockets after the initial handshake both the client and the server established a permanent connection through which they can simultaneously send and receive messages to and from each other. So in WebSockets protocol, the server does not have to wait for a request from the client to send any new data, the moment server receives any new data it sends it automatically to the client so this is bi-directional and is different from the request response model we have seen so far. This connection is permanent till either the client or the server chooses to close it .

Let's talk about socket IO. Socket IO is a JavaScript library to enable real time web applications. So how is this any different from web sockets? Web sockets is a protocol like HTTP. It's a piece of technology while socket IO is a JavaScript library.

👉 Use Case

‣ Chat Application

‣ Online Gaming Leaderboard

‣ Notifications

👉 Cons. of WebSockets

The disadvantage with using websockets is that it keeps the connection open on the server for the duration of the time the user is interacting the page. This will increase the demand on the server.