Reverse ajax in 2014

Reverse AjaxTechniques, libraries and support in 2014

Ajax (Asynchronous JavaScript and XML)

• Group of interrelated Web development techniques used on the client-side to create asynchronous Web applications.

• With Ajax, Web applications can send data to, and retrieve data from a server asynchronously (in the background) without the need for a page reload.

• It is a browser feature accessible to a web page through the JavaScript.

• Though the name includes XML, nearly anything can be transfered with an Ajax request.

• The most commonly used data is JSON, which is close to JavaScript syntax and consumes less bandwidth.

• Ajax requests are stateless by default, and can only be opened from the client to the server.

Reverse Ajax• Reverse Ajax is essentially a concept for sending data from the server to

the client.

• It can be simulated with a repeated Ajax request from client – simple polling, piggyback polling.

• Comet – umbrella term for various techniques for Reverse Ajax

• Coined by Alex Russel in 2006.

• It can be simulated with a long-held Ajax request from client .

• Server can send events to the client without the client specifically requesting it.

• Also known as Ajax Push, Two-way-web, HTTP Streaming, and HTTP server push,

• First implementations appeared in 2000 with Pushlets and LightStreamer media server

Reverse AjaxBasic polling techniques

Reverse Ajax – simple polling

Reverse Ajax – simple polling• Basic Ajax with regular interval requests (every few seconds).

• To get the server events as soon as possible, the polling interval (time between requests) must be as low as possible.

• If interval is reduced, the client will issue many more requests, many of which won't return any useful data, and will consume bandwidth and processing resources for nothing.

• Advantages: It's really easy to implement and does not require any special features on the server side. It also works in all browsers.

• Disadvantages: This method is rarely employed because it does not scale at all. Example: 100 clients each issuing polling requests for 2 seconds, where 30% of the requests returns no data.

Reverse Ajax – piggyback polling

Reverse Ajax – piggyback polling• Piggyback polling removes all redundant requests (which return

no data)

• There is no interval

• Requests are sent when the client needs to send a request to the server

• The difference lies in the response, which is split into two parts: the response for the requested data server events, if any

• Advantages: Less resource consumption. Works in all browsers, does not require special features on the server side.

• Disadvantages: You have no clue when the events accumulated on the server side will be delivered to the client.

Reverse Ajax – Comet

Reverse Ajax – Comet• Request is sent to the server and kept alive for a long time, until a

time-out or a server event occurs.

• When the request is completed, another long-lived Ajax request is sent to wait for other server events.

• With Comet, web servers can send the data to the client without having to explicitly request it.

• The server can push events on the clients by immediately committing (completing) the responses, or it can accumulate them and send bursts.

• Special features are required on the server side to handle all of these long-lived requests (Servlet 3.0 or Websockets)

• Implementations of Comet can be separated into two types: those using streaming mode, and those using long polling.

Reverse AjaxComet - Streaming Mode

Comet – Streaming mode• In streaming mode, one persistent connection is opened

• It requires a way to separate the different responses coming through the same connection on the client side.

• Technically speaking, two common techniques for streaming include:

Forever Iframes (hidden Iframes) or

Multi-part feature of the XMLHttpRequest object used to

create Ajax requests in JavaScript.

Comet – Forever Iframes• Forever Iframes technique involves a hidden Iframe tag put in the

page with its src attribute pointing to the servlet path returning server events.

• Each time an event is received, the servlet writes and flushes a new script tag with the JavaScript code inside.

• The iframe content will be appended with this script tag that will get executed.

• Advantages: Simple to implement, and it works in all browsers supporting iframes.

• Disadvantages: There is no way to implement reliable error handling or to track the state of the connection, because all connection and data are handled by the browser through HTML tags. You don't know when the connection is broken on either side.

Comet – Multi-part XMLHttpRequest• This technique uses the multi-part flag supported by some browsers

(Chrome, Firefox) on the XMLHttpRequest object.

• An Ajax request is sent and kept open on the server side. Each time an event comes, a multi-part response is written through the same connection

• On the server side it is required to set up the multi-part request, suspend the connection and return responses asynchronously (Servlet 3.0)

• Advantages: Only one persistent connection is opened. This is the Comet technique that saves the most bandwidth usage.

• Disadvantages: The multi-part flag is not supported by all browsers. Some widely used libraries, such as CometD in Java, reported issues in buffering. For example, chunks of data (multi-parts) may be buffered and sent only when the connection is completed or the buffer is full, which can create higher latency than expected.

Reverse AjaxComet - HTTP long polling

Comet - HTTP long polling• The long polling mode involves techniques that use repeated long-

held client requests.

• When client initiates a connection, it is kept open by the server, and as soon as an event occurs, the response is committed and the connection is closed.

• New long-polling connection is reopened immediately by the client waiting for the new events to arrive.

• You can implement HTTP long polling by using

Script tags

XMLHttpRequest object.

Comet – Script tags• Similar to the iframe technique, the goal is to append a script tag in

your page to get the script executed.

• The server will: suspend the connection until an event occurs, send the script content back to the browser, and then reopen another script tag to get the next events.

• Advantages: Because it's based on HTML tags, this technique is easy to implement and works across domains (by default, XMLHttpRequest does not allow requests on other domains or sub-domains).

• Disadvantages: Similar to the iframe technique, error handling is missing, and you can't have a state or the ability to interrupt a connection.

Comet - XMLHttpRequest long polling• Recommended method to implement Comet

• Client opens an Ajax request to the server and waits for the response.

• The server requires specific features on the server side to allow the request to be suspended (Servlet 3.0).

• As soon as an event occurs, the server sends back the response in the suspended request and closes it.

• The client then consumes the response and opens a new long-lived Ajax request to the server.

• On the back end, the code also uses the Servlet 3 API to suspend the request, as in HTTP streaming, but without multi-part handling.

Comet - XMLHttpRequest long polling• Advantages: It's easy to implement on the client side with a good error-

handling system and timeout management. This reliable technique also allows reusing connections on the server side, since connections are not persistent (a good thing, when you have a lot of clients on your application). It also works on all browsers; you only make use of the XMLHttpRequest object by issuing a simple Ajax request.

• Disadvantages: There is no main disadvantage compared to other techniques. But, like all techniques we've discussed, this one still relies on a stateless HTTP connection, which requires special features on the server side to be able to temporarily suspend it.

• Several well-known libraries implement Comet in Java and Javascript: DWR CometD Atmosphere

Reverse AjaxLibraries

DWR• DWR – direct web remoting

• Well known library for integration between client-side JS and server-side Java code

• Reverse Ajax Modes

Early Closing Mode (default, low performance for large number of clients)

Full Streaming Mode (Not available to IE users)

Long Polling (best option)

Piggyback mode

• Advantages: Highly configurable and stable library.

• Disadvantages: Development is slow, Websocket support is uncertain.

Atmosphere• Atmosphere is a Java technology framework that provides a common API for

using the Comet and WebSocket features of many of the web servers, including Tomcat, Jetty, GlassFish, Weblogic, Grizzly, JBossWeb, JBoss, and Resin.

• Atmosphere has been around for more than two years, and it is still in active development. It is used in large web applications such as JIRA

• Advantages: Atmosphere's strength remains on the server side: it provides a standardized API that covers all of the different solutions and ways to communicate with WebSockets or Comet.

• Disadvantages: Atmosphere does not use a protocol between the client and server, like DWR and CometD.

CometD – our choice• CometD framework is an event-driven communication solution based on HTTP.

It provides a Java server part and a Java client part, plus JavaScript client libraries based upon jQuery and Dojo.

• It has been around for several years. It supports WebSockets. Reverse Ajax Mode is implemented with XMLHttpRequest long-polling.

• All of the components communicate through a bus to send notifications and receive events. All communication is asynchronous.

• Advantages: CometD offers a complete solution, from client and server side, and also from a standalone Java client to a server. The framework is well-documented and is easy to use. It supports many features - reconnection, reliable timeout detection, error handling, low-latency communication ...

• Disadvantages: CometD currently does not support any Servlet 2.5 containers other than Jetty for Comet (Tomcat), and it does not support Glassfish/Grizzly WebSocket

WebsocketsOverview

Websockets• WebSockets, which comes from HTML5, is a new technique for

bidirectional, full-duplex communication.

• The connection is opened through a HTTP Upgrade request (HTTP request with special headers), called a WebSockets handshake.

• The connection is then kept alive, and data is exchanged between both sides directly.

• Best option for bidirectional communication, future standard

• Supported in Chrome 14+, Firefox 6+, Safari 6+, IE 10+

• Supported on Tomcat 8, JBoss 8, Glassfish 3, Jetty 7

• Supported in CometD along with long polling.

ReferencesIBM Developerworks: Reverse Ajax series

http://www.ibm.com/developerworks/library/wa-reverseajax1/

Javabeat: An introduction to Comet and Reverse Ajax http://www.javabeat.net/introduction-to-comet-and-reverse-ajax/

DWR: Reverse Ajax

http://directwebremoting.org/dwr/documentation/reverse-ajax/

CometD:

http://docs.cometd.org/reference/

Atmosphere Framework:

http://async-io.org/

ReferencesOracle: Asynchronous Notifications with Servlet 3.0

http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/async-servlet/async-servlets.html

Javabeat: Asynchronous Servlet

http://www.javabeat.net/asynchronous-servlet-servlet-3-0/

Google groups: CometD users

https://groups.google.com/forum/#!topic/cometd-users

Wikipedia: Comet

http://en.wikipedia.org/wiki/Comet_(programming)#Implementations