Reverse Ajax, Part 1: Introduction to comet

In the past few years, web development has undergone great changes. Now, we expect to be able to quickly and dynamically access applications through the Web. In this new article series, we learned how to use reverse Ajax (reverse Ajax) technology to develop event-driven Web applications for a better user experience. The client-side example uses the jquery JavaScript library. In this first article, we explored different reverse Ajax technologies and used downloadable examples to learn how to use streaming) comet of method and long polling method.

Preface

Web development has made great progress in the past few years, and we have already surpassed the practice of linking static Web pages together. This will cause refreshing of browsers, wait for the page to load. What is needed now is completely dynamic applications that can be accessed through the web. These applications usually need to be as fast as possible and provide almost real-time components. In this new five-part article series, we learned how to use reverse Ajax (reverse Ajax) technology to develop event-driven Web applications.

In this first article, we need to know about reverse Ajax, polling, streaming, Comet, and long polling ), learn how to implement different reverse Ajax communication technologies and explore the advantages and disadvantages of each method. You can download the source code of the example in this article.

Ajax, reverse Ajax, and websocket

Asynchronous JavaScript and XML (Asynchronous JavaScript and XML, Ajax), a browser feature that can be accessed through JavaScript, it allows scripts to send an HTTP request to the website behind the scenes without reloading the page. Ajax has been around for more than ten years. Although its name contains XML, You can transmit almost anything in Ajax requests. The most common data is JSON, it is very similar to the Javascript syntax and consumes less bandwidth. Listing 1 provides an example where Ajax requests retrieve the name of a location using a zip code.

Listing 1. Ajax request example

VaR url = 'HTTP: // www.geonames.org/postalcodelookupjson? Postalcode ='
+ $ ('# Postalcode'). Val () + '& Country ='
+ $ ('# Country'). Val () + '& callback =? ';
$. Getjson (URL, function (data ){
$ ('# Placename'). Val (data. postalcodes [0]. placename );
});

In the source code that can be downloaded in this document, you can see the role of this example in listing1.html.

Reverse Ajax (reverse Ajax) is essentially a concept that can send data from the server to the client. In a standard HTTP Ajax request, data is sent to the server. Reverse AJAX can simulate an Ajax request in some specific ways, which will be discussed in this article, the server can send events (low-latency communication) to the client as quickly as possible ).

Websocket technology comes from HTML5, a technology that has only recently appeared. Many browsers have supported it (Firefox, Google Chrome, Safari, and so on ). Websocket enables two-way, full-duplex communication channels. It opens connections through an HTTP request called websocket handshake and uses some special headers. The connection remains active. You can use JavaScript to write and receive data, just as you are using an original TCP interface. Websocket will be discussed in the second part of this article series.

Reverse Ajax technology

The purpose of reverse Ajax is to allow the server to push information to the client. Ajax requests are stateless by default and can only be sent from the client to the server. You can bypass this restriction by simulating responsive communication between the server and the client using technology.

HTTP Round Robin and jsonp round robin

Polling involves sending requests from the client to the server to obtain some data. This is obviously a pure Ajax HTTP request. To obtain server events as soon as possible, the polling interval (the time between two requests) must be as small as possible. However, there is a drawback: If the interval is reduced, the client browser will send more requests, and many of these requests will not return any useful data, this will waste bandwidth and processing resources in vain.

The timeline in Figure 1 shows that the client sends some polling requests, but no information is returned. The client must wait until the next round robin to obtain the events received by the two servers.

Figure 1. Reverse Ajax with HTTP polling

Jsonp Round Robin is basically the same as HTTP round robin. The difference is that jsonp can send cross-domain requests (not in your domain ). Listing 1 uses jsonp to get place names through postal code. jsonp requests can usually be identified through its callback parameters and returned content, which are executable JavaScript code.

To implement polling in Javascript, you can use setinterval to periodically send Ajax requests, as shown in Listing 2:

Listing 2. Javascript round robin

Setinterval (function (){
$. Getjson ('events', function (events ){
Console. Log (events );
});
},2000 );

The Round Robin in the source code of the article demonstrates the bandwidth consumed by the round robin method, with a small interval, but we can see that some requests do not return events. Listing 3 shows the output of this Round Robin sample.

Listing 3. Polling the output of the demo

[Client] Checking for events...
[Client] No event
[Client] Checking for events...
[Client] 2 events
[Event] at Sun Jun 0515: 17:14 EDT 2011
[Event] at Sun Jun 0515: 17:14 EDT 2011
[Client] Checking for events...
[Client] 1 events
[Event] at Sun Jun 0515: 17: 16 EDT 2011

Advantages and disadvantages of polling with javascript:

1. advantages: it is easy to implement. It does not require any server-specific functions and can work in all browsers.

2. disadvantage: This method is rarely used because it is completely non-scalable. Imagine the amount of bandwidth and resources lost when each of the 100 clients sends a 2-Second round-robin request. In this case, no data is returned for 30% of requests.

Piggyback

Piggyback polling is a smarter method than polling because it deletes all non-essential requests (those with no returned data ). The time interval does not exist. The client sends a request to the server as needed. The difference is that the response is divided into two parts: the response to the request data and the response to the server event, if any part occurs. Figure 2 provides an example.

Figure 2. Reverse Ajax with piggyback polling

When piggyback technology is implemented, a mixed response may be returned for all Ajax requests on the server. The download of this article contains an implementation example, as shown in Listing 4 below.

Listing 4. Piggyback sample code

$ ('# Submit'). Click (function (){
$. Post ('ajax ', function (data ){
VaR valid = data. formvalid;
// Process the verification result
// Then process other parts of the response (events)
Processevents (data. events );
});
});

Listing 5 provides some piggyback output.

Listing 5. Piggyback output example

[Client] Checking for events...
[Server] form valid? True
[Client] 4 events
[Event] at Sun Junn 0516: 08: 32 EDT 2011
[Event] at Sun Jun 0516: 08: 34 EDT 2011
[Event] at Sun Jun 0516: 08: 34 EDT 2011
[Event] at Sun Jun 0516: 08: 37 EDT 2011

You can see the result of Form Verification and the event appended to the response. This method also has some advantages and disadvantages:

1. Advantage: there are no requests that do not return data, because the client controls when to send the request and consumes less resources. This method is also available in all browsers and does not require special features on the server.

2. disadvantage: you do not know when the events accumulated on the server end need to be sent to the client, because a client action is required to request them.

Comet

The use of reverse Ajax with polling or logging is very limited: it is not scalable and does not provide low-latency communication (as long as events arrive at the server side, they arrive at the browser side as quickly as possible ). Comet is a Web application model in which requests are sent to the server and kept for a long period of time until timeout or a server event occurs. After the request is completed, another long-lived Ajax request is sent to wait for another server event. With comet, the web server can send data to the client without explicit requests.

A major advantage of comet is that each client always has a communication link opened to the server. The server can push the event to the client by immediately submitting (completing) A response when the event arrives, or it can even accumulate and send it continuously. Because requests remain open for a long time, the server needs special functions to process all these long-lived requests. Figure 3 provides an example. (Part 1 of this Article series will explain the constraints on the server in more detail ).

Figure 3. Reverse Ajax using comet

The implementation of comet can be divided into two types: those using streaming and those using long polling.

Use http stream comet

In streaming mode, a persistent connection is enabled. Only one long-lived request exists (#1 in figure 3), because each event arriving at the server side is sent through the same connection. Therefore, the client needs to separate different responses sent through the same connection. Technically speaking, two common stream technologies include forever IFRAME (hidden IFRAME), or multi-part of the XMLHTTPRequest object used to Create Ajax requests in Javascript) features.

Forever IFRAME

Forever IFRAME (permanent IFRAME) technology involves a hidden IFRAME tag placed on a page. The src attribute of this tag points to the Servlet Path for returning server events. Each time an event arrives, the servlet writes and refreshes a new script tag with JavaScript code. The IFRAME content is appended with this script tag, the content in the tag is executed.

1. Advantages: simple implementation, available in all browsers that support IFRAME.

2. disadvantage: there is no way to implement reliable error processing or trace the connection status, because all connections and data are processed by the browser through HTML tags, therefore, you cannot know at which end of the connection has been disconnected.

Multi-part XMLHttpRequest

The second technology is more reliable. It is the multi-part mark supported by some browsers (such as Firefox) on the XMLHTTPRequest object. The Ajax request is sent to the server and kept open. Each time an event arrives, multiple responses are written through the same connection. Listing 6 provides an example.

Listing 6. JavaScript code example for setting multi-part XMLHttpRequest

VaR xhr = $. ajaxsettings. xhr ();
Xhr. multipart = true;
Xhr. Open ('get', 'ajax ', true );
Xhr. onreadystatechange = function (){
If (xhr. readystate = 4 ){
Processevents ($. parsejson (xhr. responsetext ));
}
};
Xhr. Send (null );

On the server side, it is a little complicated. First, you must set multiple requests and then suspend the connection. Listing 7 shows how to suspend an HTTP stream request. (The first part of this series will talk about these APIs in more detail .)

Listing 7. Use servlet 3 API to suspend an HTTP stream request in Servlet

Protected void doget (httpservletrequest req, httpservletresponse resp)
Throws servletexception, ioexception {
// Start request suspension
Asynccontext = Req. startasync ();
Asynccontext. setTimeout (0); // returns multiple separators to the client.
Resp. setcontenttype ("multipart/X-mixed-replace; boundary = \""
+ Boundary + "\"");
Resp. setheader ("connection", "keep-alive ");
Resp. getoutputstream (). Print ("-" + boundary );
Resp. flushbuffer ();

// Put the asynchronous context in the list for future use only
Asynccontexts. Offer (asynccontext );
}

Now, every time an event occurs, you can traverse all the pending connections and write data to them, as shown in listing 8:

Listing 8. Use the servlet 3 API to send events to multiple pending requests

For (asynccontext: asynccontexts ){
Httpservletresponse peer = (httpservletresponse)
Asynccontext. getresponse ();
Peer. getoutputstream (). println ("Content-Type: Application/JSON ");
Peer. getoutputstream (). println ();
Peer. getoutputstream (). println (New jsonarray ()
. Put ("at" + new date (). tostring ());
Peer. getoutputstream (). println ("-" + boundary );
Peer. flushbuffer ();
}

The section in the comet-straming folder that can be downloaded in this article describes the HTTP stream. When you run the example and open the home page, you will see that once the event arrives at the server side, although not synchronized, they almost immediately appear on the page. In addition, if you open the firebug console, you can see that only one Ajax request is opened. If you look down, you will see the JSON response is attached to the Response tab, 4 shown:

Figure 4. firebug view of HTTP stream requests

As usual, there are some advantages and disadvantages:

1. Advantage: Only one persistent connection is enabled, which is the comet technology that saves most bandwidth usage.

2. disadvantage: not all browsers support the multi-part flag. Some widely used libraries, such as cometd implemented in Java, are reported to have buffer problems. For example, some data blocks (multiple parts) may be buffered and sent only when the connection is complete or the buffer zone is full, which may lead to a higher latency than expected.

Use http long-polling comet

The long polling mode involves the connection enabling technology. The connection is enabled by the server. when an event occurs, the response is submitted and the connection is closed. Next. A New persistent polling connection will be re-opened by the client waiting for the arrival of the new event.

You can use the script tag or a simple XMLHTTPRequest object to implement HTTP long polling.

Script tag

Like IFRAME, the goal is to append the script tag to the page for script execution. On the server side, the connection is suspended until an event occurs. Then, the script content is sent back to the browser, and another script tag is re-opened to obtain the next event.

1. Advantage: because it is based on HTML tags, all this technology is very easy to implement and can work across domains (by default, XMLHttpRequest cannot send requests to other domains or subdomains ).

2. Disadvantages: similar to IFRAME technology, error handling is missing. You cannot obtain the connection status or interfere with the connection.

XMLHttpRequest long polling

Second, it is also recommended to implement comet by opening an Ajax request to the server and waiting for response. The server needs some specific functions to allow the request to be suspended. when an event occurs, the server sends a response to the pending request and closes the request, it's like you shut down the servlet response output stream. Then the client uses this response and opens a new long-lived Ajax request to the server, as shown in listing 9:

Listing 9. JavaScript code example for setting long polling requests

Function long_polling (){
$. Getjson ('ajax ', function (events ){
Processevents (events );
Long_polling ();
});
}
Long_polling ();

At the backend, the Code also uses the servlet 3 API to suspend the request, just like the HTTP stream, but you do not need to process all the code. Listing 10 provides an example.

Listing 10. Pending a long polling Ajax request

Protected void doget (httpservletrequest req, httpservletresponse resp)
Throws servletexception, ioexception {
Asynccontext = Req. startasync ();
Asynccontext. setTimeout (0 );
Asynccontexts. Offer (asynccontext );
}

When an event is received, all pending requests are retrieved and completed, as shown in listing 11:

Listing 11. Completing long polling Ajax requests when an event occurs

While (! Asynccontexts. isempty ()){
Asynccontext = asynccontexts. Poll ();
Httpservletresponse peer = (httpservletresponse)
Asynccontext. getresponse ();
Peer. getwriter (). Write (
New jsonarray (). Put ("at" + new date (). tostring ());
Peer. setstatus (httpservletresponse. SC _ OK );
Peer. setcontenttype ("application/JSON ");
Asynccontext. Complete ();
}

In the attached download source file, the comet-Long-polling folder contains a long-polling sample Web application. You can run it using the MVN jetty: Run Command.

1. Advantage: the client can easily implement a good error handling system and time-out management. This reliable technology also allows a round-trip between the connection and the server, even if the connection is non-persistent (this is a good thing when your application has many clients ). It is available in all browsers; you only need to ensure that the XMLHTTPRequest object you use is sent to a simple Ajax request.

2. disadvantages: compared with other technologies, there are no important disadvantages. Like all the technologies we have discussed, this method still relies on stateless HTTP connections, it requires the server to have special functions to temporarily suspend the connection.

Suggestions

Because all modern browsers support the cross-origin resource share (CORS) specification, this specification allows xhr to execute cross-origin requests, therefore, script-based and IFRAME-based technologies have become outdated.

The best way to implement and use comet as a reverse Ajax is through the XMLHTTPRequest object, which provides a real connection handle and error handling. Considering that not all browsers support the multi-part flag and many streams may encounter buffering problems, therefore, we recommend that you use the comet mode of the XMLHTTPRequest object (a simple Ajax request suspended on the server side) through HTTP long polling. This mode is also supported by all browsers that support Ajax.

Conclusion

This article provides an entry-level introduction to reverse Ajax technology. It explores different methods for implementing reverse Ajax communication and illustrates the advantages and disadvantages of each implementation. Your specific situation and application requirements will affect your selection of the most appropriate method. But in general, if you want to have a best compromise on low-latency communication, timeout and error detection, simplicity, and good support for all browsers and platforms, then select the comet that uses the Ajax long polling request.

Continue to read Part 1 of this series: This part will explore the third reverse Ajax technology: websocket. Although not all browsers support this technology, websocket must be a very good reverse Ajax communication medium. websocket eliminates all the limitations related to the stateless features of HTTP connections. Part 2 also talks about server constraints brought about by Comet and websocket technologies.

Code download

　　Reverse_ajaxpt1_source.zip

About the author

Mathieu carbou is a Java Web architect and consultant of ovea who provides services and development solutions. He is a contributor and leader in several open-source projects and also a speaker and leader in the Java User Group of Montreal. Mathieu has a strong background in code design and best practices. He is an expert in event-driven web development from the client to the backend. His focus is on providing event-driven and message-based solutions in highly scalable Web applications. You can take a look at his blog.