Real Time Web Development - Brief

Introduction

Real time web development is about giving the client (example: web browsers) the new information when it's available, with no need for the client to frequently ask about it. To achieve that, you need a persistent connection between the client and the server so new data can be sent over it, but as HTTP is a stateless protocol - you make a call, get the response, then the connection is closed - so we cannot achieve that via normal HTTP requests.

Ajax and techniques have been used to get this type of logical persistent connection. HTTP 1.1 Keep-Alive may be used. Now we have WebSockets standard which actually gives you a true full duplex TCP level connection between the browser and the server (raw connection).

Examples for real time uses are as follows:

Social feeds and chat (examples: Facebook, Twitter), live charts, real time web analytics or E-Commerce for showing shopper are looking at online, or pushing out online deals directly to all connected browsers, etc.

Techniques to Achieve Real Time

Let's say we have a part of a web page to update somewhat frequently without the user having to hit the refresh button and do a full page navigation. First thing that comes to mind is using JavaScript to do something like a set interval so that every three or maybe five seconds, you make an AJAX call to the server and ask about the new data. This is really annoying to the server. So let's have a look at the used techniques.

1. AJAX Long Polling

The idea of long polling is that rather than sending a request to the server every 2, 3....seconds, whatever our interval is, we just making an AJAX request to the server that contains some type of token that says this is the last time I received data from the server. And then the server doesn't actually reply to that polling request until there is data to satisfy that request, and so that HTTP connection, that AJAX request, will just stay open until the server is ready to return it. The browser will quickly process it and then immediately send out another AJAX request asking for the next load of data when it is available.

It’s basically just standard AJAX but the request just takes a bit longer than usual. It takes advantage of the fact that you can request something that might take a second or might take a minute and then the connection will fall down while it waits.

2. Server-sent Events

Server-sent events was a protocol. It’s a client side JavaScript DOM object that you can create. It was suggested by Opera quite a while ago. We create new event source and give it an endpoint and the browser takes care of making a request to this endpoint and then keeping this connection open and then recovering if anything goes wrong. A request with a custom header is sent to the server. The server keeps that request open and streams data down to the client using a very simple sort of framing protocol in the standard HTTP response body. So the response actually never ends not like Ajax long polling in which the server sends the new data and the close connection, and the client establishes a new connection.

Server-sent events is a one way technology only. It's only server to client. So to push stuff up to the server, you just make standard AJAX posts.

3. WebSockets

Websockets is a new standard from 2011 which provides full-duplex persistent communication channels over a single TCP connection. To establish this kind of connection, both the server and the client must support the websocket technologies. Most of the recent web browsers supports it.

How It's Done

We make an initial GET request, a standard HTTP GET request with a special header that says I want to upgrade this request to a WebSockets connection. If the server understands that, it sort of switches the request from a normal request to a WebSockets request and then the original HTTP part of it just goes away and then from that point on, you basically have a true TCP connection from the client to the server. So HTTP in this case is just used as a wrapper for a handshaking protocol.

That was a brief about real time web development. There are multiple tools and libraries that wrap and take care of that such as node.js, socket I/O for open source and signalR as .NET implementation.