Skip to main content

HTML5 WebSocket vs Long Polling vs AJAX vs WebRTC

Web socket - Ajax - long poll


WebSockets - is definitely the future. Long polling is dirty workaround of preventing creating connections for each request like AJAX does. But long polling was created when WebSockets didn't existed. Now due WebSockets, Long Polling is going away.
Here is a chart of Browsers that supports WebSockets right now.
Comparison of different communication techniques:
  • AJAX - create connection to server on each request, sends request (with possible extra data as like request methods GET, POST, PUT, DELETE, .. , and arguments in url), and gets response from server. Then connection closes. It is single request > response for each AJAX call.
  • Long poll - creates connection to server like AJAX does, but keep-alive connection open for some time (not long though), during connection open client can receive data from server. Client have to reconnect periodically after connection is closed due to timeouts. On server side it still treated like HTTP request same as AJAX.
  • WebSockets - create TCP connection to server, and keep is as long as needed. Server or client can easily close it. Bidirectional communication - so server and client can exchange data both directions at any time. It is very efficient if application requires frequent messages. WebSockets do have data framing that includes masking for each message sent from client to server so data is simply encrypted.
  • WebRTC - Is peer-to-peer type of transport and is transport-agnostic so uses UDP, TCP or even more abstract layers. By design it allows to transport data in reliable as well as unreliable ways. This is generally used for high volume data transfer such as video/audio streaming where reliability - is secondary and few frames or reduction in quality progression can be sacrificed in favour of response time and at least delivering something. Both sides (peers) can push data to each other independently. While it can be used totally independent from any centralised servers it still require some way of exchanging endPoints data, where in most cases developers still use centralised servers to "link" peers. This is required only to exchange essential data for connection establishing - after connection is established server on aside is not required.
Main advantage of WebSockets for server, is that it is not HTTP request (after handshake), but proper message based communication protocol. That allows you to achieve huge performance and architecture advantages. For example in node.js you can share same memory for different socket connections, so that way they can access shared variables. So you don't need to use database as exchange point in the middle (like with AJAX or Long Polling and for example PHP). You can store data in RAM, or even republish between sockets straight away.
Remember that WebSockets generally have very different approach of logic for networking, more like real-time games had all this time, and not like http.


LONG POLLING VS SHORT POLLING


There are 2 ways to create real-time content, the push and the pull technologies. Push is when the server initiates the traction, the server is “pushing” data into the client. This is in contrast with pull where the client initiates the transaction, the client “pulls” data from the server.
Implementing push is more efficient than pull, but a bit more complicated to implement. On the other hand, pulling is easier.
Polling, or polled operation, in computer science, refers to actively sampling the status of an external device by a client program as a synchronous activity. It’s basically just a continuous ajax request to a server. And it works with your typical LAMP server.

HOW TO IMPLEMENT POLLING

There are 2 types of polling, namely, Short Polling and Long Polling. Both of them are implemented using ajax technology and are both commonly used in today’s websites.

SHORT POLLING

The easier of the two is the short polling. Basically, it uses a timer and asks the server if data is available and the server returns it. It’s ROUGHLY similar to refreshing the page in a regular interval. It useful when you don’t need your data to be exactly real-time or data changes are not too often. This method uses less server resources.

LONG POLLING

Long Polling is the more advanced of the two and a bit more complex. Instead of using a timer, it has an event based algorithm as summarized below.
  1. Client sends the ajax request AJAX
  2. The server checks if there are changes in the data
  3. IF yes, the returns the data and go back to #1
  4. IF no, the server waits for a very short time and goes back to #2
Long polling is useful when you want your data to be extremely close to exact real-time. It’s because instead of waiting for a timer, it actually waits for something to happen until it makes a move. But this method has a downside, it uses more server resources than its counterpart since the server-side script will always be running in long extents instead of just short bursts.

CONCLUSION

Use Short polling for not so real-time updates and use only Long Polling when you really need it to be real-time like in a chat box. Then, don’t use both of them for extremely heavy real-time data. 


Popular posts from this blog

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to...
8 comments
Read more

ExtJS 4 with Spring MVC Example

Introduction When developing a brand new application for the company I work for, one of the first thing I implement is "authentication". Not only is this process generally a prerequisite to access many other functions but it is also very simple and covers every layer of an application, from GUI to the database. So instead of another minimalistic "Hello World" tutorial, here is a "Login/Password" example, using 2 famous technologies : Spring MVC and ExtJS 4.   Prerequisites Because this tutorial is quite long, I won't go into the details of each technology I used but I will mainly focus on how ExtJS and Spring can be nicely used together. So here are the things you should know before continuing : Spring framework (good knowledge) Spring MVC (basic knowledge. See  Spring MVC Official Documentation  for details) ExtJS "application architecture" (see  Sencha Docs  for details) Eclipse IDE + Tomcat 6 (or any other web container) You a...
16 comments
Read more

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( ...
Post a Comment
Read more