Click here to Skip to main content
Click here to Skip to main content

Tagged as

Real Time Web Development - Brief

, 3 Nov 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Techniques to achieve real time web development

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

hagerAly
Software Developer
Egypt Egypt
I'm a software engineer, in particular a developer. For me creating a websites is not only for living also for fun, I just love creating them make them more interactive and beautiful. Development in general is so interesting but my favorite part is building website and adding JavaScript and Ajax to it.
 
I believe that technology has no limits and software engineers must be open minded to learn and use new technologies and methodologies.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalS. M. Ahasan Habib3-Nov-13 16:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 3 Nov 2013
Article Copyright 2013 by hagerAly
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid