Reverse Ajax:websockets a powerful solution

This article also discusses some of the constraints of using reverse Ajax technology on the server side.

Users now expect to be able to access fast, dynamic applications from the Web. This series of articles shows how to use reverse Ajax http://www.aliyun.com/zixun/aggregation/7332.html "> Technology to develop event-driven Web applications." Reverse Ajax, Part 1th: Comet Introduction introduces reverse Ajax, polling, streaming, Comet, and long polling. You should have learned that using HTTP long polling Comet is the best way to reliably reverse Ajax because all browsers now provide this support.

With this article, you will learn how to implement reverse Ajax using WebSockets. Code examples help illustrate WebSockets, flashsockets, server-side constraints, requesting scope services, and suspending long-term requests.

For

Ideally, if you want to make the most of this article, you should know about JavaScript and Java. The example created in this article is built using Google Guice, and Google Guice is a Java-written dependency injection framework. To understand this article, you need to familiarize yourself with the concept of a dependency injection framework, such as Guice, Spring, or Pico.

To run the examples in this article, you will also need to use the latest version of Maven and JDK.

WebSockets

WebSockets in HTML5 is a reverse Ajax technology newer than Comet. WebSockets supports two-way, Full-duplex communication channels, and many browsers (Firefox, Google Chrome, and Safari) support it. A connection is through an HTTP request (also known as a websockets handshake) and some special headers (header). The connection is always active, and you can write and receive data in JavaScript just as you would with the original TCP socket.

Start the WebSocket URL by entering ws://or wss://(on SSL).

The timeline in Figure 1 shows how to communicate using WebSockets. The HTTP handshake is sent to the server with a specific header. You can then provide some type of socket on the JavaScript server or on the client. You can use this socket to receive data asynchronously through an event handler.

Figure 1. Perform reverse Ajax via WebSockets

There is a WebSocket example in the download source code for this article. When you run the example, the output is similar to Listing 1. It shows how events occur on the server side and immediately appears on the client. When a client sends some data, the server reflects it on the client.

Listing 1. Examples of WebSocket written in JavaScript

[Client] WebSocket connection opened [Server] 1 events [Event] ClientID = 0 [Server] 1 events [Event] at Fri June 21:12:01 E DT [Server] 1 events [Event] from 0:QQQ [Server] 1 events [Event] at Fri June 21:12:05 EDT [Server] 1 events [Event] F Rom 0:VV

Typically, you use WebSockets in JavaScript the same way as shown in Listing 2 (if your browser supports it).

Listing 2. JavaScript Client Code

var ws = new WebSocket (' Ws://127.0.0.1:8080/async '); Ws.onopen = function () {//Called when connection is opened}; Ws.onerror = function (e) {//called in case of error while connection is broken in example}; Ws.onclose = function () {//Called when Connexion is closed}; Ws.onmessage = function (msg) {//Called when the server sends a message to the client.//Msg.data contains the message. Here are how to send some data to the server Ws.send (' some data '); To close the Socket:ws.close ();

You can send and receive any type of data. WebSockets can be considered a TCP socket, so the client and the server decide which data type to send. The example given here is a JSON string.

After you create a JavaScript WebSocket object, you should see the WebSocket-specific header if you are in the browser's console (or Firebug) to see the handshake in the HTTP request in depth.