Every day we spend a lot of time on the internet, searching for information, checking our social media like Twitter, chatting with our friends, playing games online, and so many other exciting things. How do these applications give and show the contents we want?
Hypertext Transfer Protocol (HTTP)
Some people may notice that when we want to visit a website, we need to type the URL into the browser, and it begins with “http”. HTTP is a protocol we use to communicate between client and server. It uses a request-response model, in which a client machine sends a request to the server, then the server sends back a response message to the client. The response contains completion status information about the request and may also contain requested content in its message body.
Real-time Applications (RTA)
Through HTTP, the client-server communication is closed after the initial request is done. It is good enough for static content, however, if we want to do more instant interactions with our apps such as social media feeds, live chats and video conferences, HTTP is not enough. The clients and servers need to communicate with each other continuously with low latency, here is where RTA comes. A Real-time Application is an application that functions within a time frame that the user senses as immediate or very close to it.
Options for Building RTAs
How to make a real-time application?There are several ways of realizing these real-time goals, at the beginning, it was made by Polling method.
Polling
Polling is a method implemented by AJAX. Clients send a request to servers after every certain time period to get the update of data. Later, an upgraded version of this method called long polling was invented. This time, a request stays until a response with new data is sent back by a server, and send another request after that. While these approaches might be still used, most developers tend to use other ways because long polling can come with high latency.
WebSockets
In 2011, Websockets protocol came out. WebSockets can provide full-duplex communication between clients and servers, which means both sides communicate and exchange data at the same time with low latency. With these features, WebSockets help us realize many new functionalities, and improve the responsiveness of our applications.
As shown above, to use WebSockets, a client needs to send a request to a server asking for upgrading to a WebSocket connection. This step is usually called handshaking. After being agreed upon by the server side, the connection is long-lived, they can send messages to each other at the same time. Because the headers of messages are omitted during the communication, Websockets have much faster performance than Long Polling.
Here is a simple example how the client side WebSocket API looks like.
// Create a socket instance
var socket = new WebSocket('ws://localhost:8080');
// Open the socket
socket.onopen = function(event) {
// Send an initial message
socket.send('I am the client and I\'m listening!');
// Listen for messages
socket.onmessage = function(event) {
console.log('Client received a message',event);
};
// Listen for socket closes
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
// To close the socket....
// socket.close()
};Popular WebSockets Libraries
To use WebSockets, there are a bunch of popular WS libraries for different languages and frameworks:
- Node.js: SockJS, ws, Socket.IO
- Ruby: Faye-websocket-ruby, Scorched, websocket-rails
- Python: Django Channels
- Java: Jetty, nv-websocket-client
Some of them have awesome features such as falling back to long polling with old browsers that don’t support WebSockets, load balancing, easy-to-use, and so on.
Here is a example how the client side Socket.IO API looks like. Socket.IO simplifies the WebSocket API and unifies the APIs of its fallback transports.
// Create SocketIO instance, connect
var socket = new io.Socket('localhost',{
port: 8080
});
socket.connect();
// Add a connect listener
socket.on('connect',function() {
console.log('Client has connected to the server!');
});
// Add a connect listener
socket.on('message',function(data) {
console.log('Received a message from the server!',data);
});
// Add a disconnect listener
socket.on('disconnect',function() {
console.log('The client has disconnected!');
});
// Sends a message to the server via sockets
function sendMessageToServer(message) {
socket.send(message);
}Paid and Managed Solutions
Besides the open sources introduced above, there are also paid and managed solutions such as Pusher. Pusher is a hosted WebSockets solution for building powerful real-time interactive apps. Compared with other APIs, Pusher can help you implement WebSockets with less work and better scalability.