WebSocket in Web Development World
In a client-server environment, one of the client’s responsibility is to request data from server, and a server’s responsibility is to fulfill those requests which went unchallenged for many years. Around 2005, Ajax was introduced to communicate with server which is an asynchronous request. With this many people are going ahead to delve into the possibilities of making connections between a client and server bidirectional. Let’s dive deep into the WebSocket protocol and API and know how it works to create real-time web applications.
Latency in the process:
If we consider an email application, to check the new mail, client need to send a request to the server. However, in most cases there may not be any new mail available, yet the client has to always send new request and it causes huge load on the server. This process is referred as polling. To overcome this issue, long-polling technique has been introduced where the client will check if there is a new mail and the server will respond as soon as there is a mail available. Even though this technique is a bit better than polling, we still have to send a request, causing a lot of unnecessary traffic. The problem with all of these solutions is that every time we make an HTTP request a bunch of headers and cookie data are transferred to the server. This can add up to a reasonably large amount of data that needs to be transferred, which in turn increases latency.
Persistent low latency connection:
With WebSockets (WS), we can establish a persistent and low latency connection between server and client based on WS protocol. It provides a full-duplex connection stream. (Full-duplex connection is like a telephone conversation where both parties can speak and hear at the same time).
Talking about websockets:
Websockets in HTML5 is considered as a type of PUSH technology. Though it’s not yet standardized by W3C, the browsers (Chrome/Safari) started to include support for Web Sockets.
How is it useful?
IT can reduce their infrastructure cost. Companies who built real time applications which required hundreds of servers to run their processes (based on http) and suddenly drop to only few servers (two/three servers) after they have been ported to WebSocket.
How it works?
1. The browser sends a request to the server, indicating that it wants to switch protocols from HTTP to WebSocket. (Via headers i.e. upgrade header)
2. If the server understands the WebSocket protocol, it agrees to the protocol switch through the Upgrade header.
3. At this point the HTTP connection breaks down and is replaced by the WebSocket connection over the same underlying TCP/IP connection.
a. The WebSocket connection uses the same ports as HTTP (80) and HTTPS (443), by default. Once established, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode
Now the technical part, Using WebSockets via Interface
WebSockets API is available to javascript and making a connection with WebSocket is simple. We just need to pass url to WebSocket constructor.
// url refers to server url, protocols refers to connections i.e., single server can have multiple interactions
WebSocket WebSocket(
in DOMString url,
in optional DOMString protocols
);
var newSocket = new webSocket(‘ws://newWebCon/api’,[‘connection1’,’connection2’]) ;
Once the connection has been set up, the open event will be fired on your WebSocket instance.
Checking for Errors:
By listening to on error event,we can handle errors
newSocket.onerror = function(error) {
console.log(‘error in connection is’, error);
};
Sending data:
Sending data should be in UTF-8 format.
Whenever a connection is open, onopen event will be fired and send() function will send the information.
newSocket.onopen = function(event){
var data ={
“meta”: “gray”,
“reason”: “white”,
“verbose”: “gray”,
“error”: “red”,
“noproblem”: “green”
}
newSocket.send(JSON.stringify(data));
}
Receive data:
Whenever an incoming message is there, onmessage event will be fired.
function(event){
message = JSON.parse(event.data);
}
Closing the connection:
To close the connection,a close function is available withWebSocket instance.
newSocket.close();
WebSockets signifies a big step in improving a new and revolutionary web based communications. Just as AJAX changed the game in the mid 2000s; having the ability to open bidirectional, low latency connections allows a whole new generation of real-time web applications.