[Real-time web series] Real-time web Overview

With the advent of the social Internet boom, real-time web is becoming more and more important. On the one hand, from the perspective of business scenarios, real-time message notifications greatly improve the friendliness of the system; on the other hand, from the perspective of performance, new data is automatically pushed by the server rather than automatically refreshed by the user to obtain the page, this greatly reduces the pressure on servers.

Currently, the real-time web implementation technology mainly includes two types of traditional comet technology, flash socket, and HTML5 websocket.

From the perspective of various browsers currently used by users, the mainstream is the long polling Implementation of comet. For detailed implementation of Comet, see an article by IBM. Http://www.ibm.com/developerworks/cn/web/wa-reverseajax1/

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. Now, you need to be able to access fully dynamic applications through the Web. These applications usually need to be as fast as possible to provide near-real-time components. In this 5-part new series, we will learn how to use reverse Ajax (reverse Ajax) technology to develop event-driven Web applications.

In this first article, we need to understand 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.

Back to Top

Ajax, reverse Ajax, and websockets

Asynchronous JavaScript and XML (Ajax), a browser feature that can be accessed through JavaScript, allows the script 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 an Ajax request. The most commonly used data is JSON, which is very close to the Javascript syntax and consumes less bandwidth. Listing 1 listing 1 shows an example where an Ajax request uses a zip code to retrieve the name of a location.

Listing 1. 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 this article
In the downloadable source code, 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.

Back to Top

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 send requests 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

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.

Figure 1 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 you can use jsonp to send cross-origin requests (requests do not belong to your domain ). Listing 1 listing 1 uses jsonp to get the place name through zip code. A jsonp request can be identified by its callback parameters and returned content, which are executable JavaScript code.

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

Listing 2. Listing 2 JavaScript polling

setInterval(function() { $.getJSON('events', function(events) { console.log(events); }); }, 2000);

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

Listing 3. 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 05 15:17:14 EDT 2011 [event] At Sun Jun 05 15:17:14 EDT 2011 [client] checking for events... [client] 1 events [event] At Sun Jun 05 15:17:16 EDT 2011

Advantages and disadvantages of using JavaScript to implement polling.

• Advantage: it is easy to implement. It does not require any server-side functions and can work in all browsers.
• 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 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. There is an implementation example in the download of the article, as shown in Listing 4 below.

Listing 4. Listing 4 piggyback sample code

$('#submit').click(function() { $.post('ajax', function(data) { var valid = data.formValid; // process validation results // then process the other part of the response (events) processEvents(data.events); }); });

Listing 5 listing 5 provides some piggyback output.

Listing 5. Listing 5 piggyback output example

[client] checking for events... [server] form valid ? true [client] 4 events [event] At Sun Jun 05 16:08:32 EDT 2011 [event] At Sun Jun 05 16:08:34 EDT 2011 [event] At Sun Jun 05 16:08:34 EDT 2011 [event] At Sun Jun 05 16:08:37 EDT 2011

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

• 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.
• Disadvantage: you do not know when the events accumulated on the server side need to be sent to the client, because a client action is required to request them.

Back to Top

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 ).CometIs a Web application model. In this model, 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 Figure 3 shows an example. (Part 1 of this series will explain the constraints on the server in more detail .)

Figure 3. Figure 3. Use the reverse Ajax of comet

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

Back to Top

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 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 (or hidden IFRAME), or
Create an Ajax request in JavascriptXMLHttpRequestThe multi-part feature of an object.

Forever iframes

The forever IFRAME (permanent IFRAME) technology involves a hidden IFRAME tag placed on the page.srcProperty pointing to the Servlet Path of the server-side event returned. 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.

• Advantages: simple implementation, available in all browsers that support IFRAME.
• 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-partXMLHttpRequest

The second technology (more reliable) isXMLHttpRequestThe object uses the multi-part flag supported by some browsers (such as Firefox. 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 Listing 6 provides an example.

Listing 6. Listing 6 setting JavaScript code samples for multiple stream requests

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 listing 7 shows how to suspend an HTTP stream request. (Part 1 of this series will talk about these APIs in more detail .)

Listing 7. Listing 7 using 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 the multi-part separator resp to the client. 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. offer (asynccontext );}

Now, when 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 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(); }

This article can
The section in the comet-straming folder of the downloaded file 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, 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, as shown in Figure 4:

Figure 4. firebug view of HTTP stream requests

As usual, there are some advantages and disadvantages.

• Advantage: Only one persistent connection is enabled, which is the comet technology that saves most bandwidth usage.
• 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.

Back to Top

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 simplyXMLHttpRequestObject.

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.

• Advantage: because it is based on HTML tags, all this technology is very easy to implement and can work across domains (by default,XMLHttpRequestRequests cannot be sent to other domains or subdomains ).
• Disadvantage: similar to IFRAME technology, error handling is missing. You cannot obtain the connection status or interfere with the connection.

Back to Top

XMLHttpRequestLong 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 is like closing the servlet response output stream. The client then uses this response and opens a new long-lived Ajax request to the server, as shown in listing 9:

Listing 9. Example of JavaScript code 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 requests, just like the HTTP stream, but you do not need to process all the code. Listing 10 listing 10 provides an example.

Listing 10. Listing 10 suspends a long polling Ajax request

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { AsyncContext 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. Listing 11. Completing long polling Ajax requests when an event occurs

while (!asyncContexts.isEmpty()) { AsyncContext 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
In the downloaded source code, the comet-Long-polling folder contains a long polling sample Web application. You can use MVNjetty:runCommand to run it.

• 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 thatXMLHttpRequestThe object can be sent to a simple Ajax request.
• 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.

Back to Top

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 for reverse Ajax is throughXMLHttpRequestObject, 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, we recommend that you useXMLHttpRequestObject (a simple Ajax request suspended on the server) in the comet mode. all browsers that support Ajax also support this method.

Back to Top

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. However, if you want to have the best compromise in terms of 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 pay attention to part 1 of this series, which 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.