XMLHttpRequest vs WebSocket

In 2001, Microsoft introduced the XMLHTTP object into Internet Explorer 5. This is the active X object. It will become XMLHttpRequest in the Mozilla browser .
Microsoft renames the object Internet Explorer 6, but remains Active X.

On February 18, 2005, an Ajax article, a new approach to JJ Garrett's web applications, launches the word Ajax.
The existence of the term alone is enough to make this way of designing web pages very popular, and since then the number of sites dedicated to Ajax has not been counted.

In August 2011, WebSocket is implemented and enabled by default in Firefox 6, while the standard is still being defined. After the asynchronous mode provided by the XHR object, this is a new progress - bi-directional communication.

Asynchronous versus bidirectional

In a traditional web application, when a user performs an action, it is executed and the browser waits for the result to return the user's hand. If this action requires exchange with the server and updating the page, it leads to delays and user expectations.

Asynchronous mode eliminates this expectation. Requests to the server are launched without pausing interaction with the browser, and the page is updated if the necessary data is available. The asynchronous side is obtained with the XMLHttpRequest object.

While HTTP works through a sequence of alternative requests and responses, WebSocket is two-way: a static connection is established between the server and the client, and both sides send data as they see fit.

Retrieving data using an XMLHttpRequest object

Starts with the creation of an object

Instantiating:

xhr = new XMLHttpRequest();

For the object to work, the event handler is assigned a function that must be executed when the server responds to a request that is executed by calling the open () and send () methods.

xhr.onreadystatechange = function() { ... };
xhr.open(...);
xhr.send();

GET command

It allows you to check out a file to the server.

xhr.open('GET',  url);                  
xhr.send(null);

In this case, the send () method has no parameters, while the file being read is the url parameter of the open method.

POST Command

It is suitable for sending data to a script on the server .

xhr.open("POST", url, true);
xhr.send(data);

The script is a url parameter, true sets the mode to asynchronous, and the data is provided as data arguments as a string of variables and values as follows:

var data = "nom1=valeur1&nom2=valeur2...";

As with GET, in the body of the function associated with onreadistatechange, the function is called to execute when a request is received and a response is received to this function.

Data exchange via WebSocket connection

At the initiative of the customer, a connection is established with this command:

var connection = new WebSocket('ws://iqlevsha.ru');

You can then send the data:

connection.onopen=function() 
{
   connection.send('Message xxx');
}; 

And receive from the server:

connection.onmessage=function(e) 
{
    console.log('Received: ' + e.data);  
};

The onmessage event waits for the data sent by the server and is stored in the data variable of the e object.

It can be seen that WebSocket is a little simpler than XMLHttpRequest, but it exacerbates the problems created with asynchronous mode: data arrives at any time that is not related to the order in which the request is made with the server. The client to put in order what he receives.

Application: Gimp in browser

GTK 3.2 provides the ability to display applications in the browser, while rotating either locally or on the server. This allows Gimp to run without installation if it runs on a server to which the browser connects using a protocol such as WebSocket.

This is thanks to the evolving API, HTML 5 GDK, version 3.2.
To test it on Firefox 4, you need to download the GTK 3.0 source code and compile it with this directive:

- enable-x11-backend-enable-broadway-backend

You also need to enable the web socket in Firefox 4. Enter about: config in the address bar to include the following two flags:

network.websocket.enabled = true
network.websocket.override-security-block = true

Another example of an application is presented on this site with the Advanced Explorer file manager, which communicates with the system via a WebSocket connection managed by Node.js. Both the interface and the backend are written in JavaScript. There is no difference in work between this version and the previous one written in Java.

References: XMLHttpRequest W3C specification and WebSocket specification.