AJAX Over WebSockets

I have seen so many AJAX vs. WebSockets discussions that I thought it would be cool if one could combine the two of them. I might be biased, but I have always gravitated towards using WebSockets as the preferred communication mechanism. However, since AJAX is so rooted in many web developers, I thought it would be interesting to see if one could implement AJAX on top of WebSockets.

You may think AJAX and REST are the best technologies since sliced bread; however, the entire AJAX protocol can be built using Websockets technology. This makes Websockets literally a superset of AJAX so it may make sense that we use WebSockets as the main communication link.

There are several benefits to running AJAX over WebSockets, such as:

• Less overhead, thus much faster (including less overhead than HTTP/2).
• Much easier to implement stateful services, if needed.
• Both AJAX and asynchronous WebSocket data can be multiplexed over the same connection.

AJAX returns a single response to a single request. However, AJAX is asynchronous; thus, a web front-end can send any number of AJAX requests without having to wait for each response.

WebSockets, on the other hand, can handle multiple bidirectional messages between the browser and the server. There is no correlation between the messages sent in either direction. It is up to the application to interpret and manage these messages. However, implementing AJAX on a WebSocket connection is conceptually very easy:

1. The data is encoded as JSON.
2. The JSON data is sent to the server over the WebSocket connection.
3. The server reconstructs the data from the JSON string.
4. The server finds the AJAX service and calls the service.
5. Response data from the AJAX service is encoded as JSON.
6. The server sends the JSON response data to the browser via the WebSocket connection.
7. The AJAX response is managed in the browser.

There are a few AJAX specific features we need to think about when designing the code. As we mentioned above, AJAX is asynchronous on the client-side, thus many AJAX requests can be in-flight at the same time. Each AJAX request is associated with a JavaScript callback that gets called when the server sends the response. We must find a way to uniquely identify each in-flight request such that each AJAX response triggers the correct callback function. The following figure depicts three asynchronous and in-flight AJAX requests:

Figure 1: Three asynchronous in-flight AJAX requests

Each of the asynchronous responses A', B', and C' must trigger the correct response callback function for the request A, B, and C, even if the response messages should be in a different order.

The easiest way to implement the client side AJAX callback handling is to store each callback in an object and give each callback a unique ID. The ID, which can for example be a number, is sent to the server as part of the message. The server side then bundles this ID with the response data.

Download the AJAX Over WebSockets JavaScript Library

If you are interested in the JavaScript library we implemented, head over to the original article and download the AJAX over WebSockets JavaScript source code.