Real-time apps, or evented apps that incorporate push-based interactivity, are the basis for a new generation of in-browser capabilities such as chat, large-scale games, collaborative editing and low-latency notifications

Node.Js will bve mainly used for the Push based application. Where the data from the existingt server side application like java/ruby will create a message and push it to node.js using the MongoDb/Reddis, which in turn push the chnages to the Connected webclients.

The Node.js web application serves up a single index.html page that uses Socket.IO to open a connection to the server and create a listener attached to message types ‘all’ and ‘complex’.

var socket = io.connect(‘/’);

socket.on(‘all’, function (data) { … }

socket.on(‘complex’, function (data) { â€¦ }

True bi-directional messaging with WebSockets is not yet available.

In reality, the client is polling the server for more data as the server-side Socket.IO configuration forces the connection to utilize XHR-polling with a 10-second timeout.

io.configure(function () {

io.set(“transports”, [“xhr-polling”]);

io.set(“polling duration”, 10);

});

Once the browser has shown all available messages it will stop. As new messages are inserted into the database, the browser will be pushed the new messages and resume.

Node tells the operating system (through epoll, kqueue, /dev/poll, or select) that it should be notified when a new connection is made, and then it goes to sleep. If someone new connects, then it executes the callback. Each connection is only a small heap allocation.

A faster, more responsive web server is only one building block to creating real-time web applications. Next we need to examine how the client browser and web server communicate, a.k.a. the transport layer. Traditionally, all communications are initiated by the client browser and the web server responds to requests. So, for example, in a traditional “real-time” web application, the client browser sends a constant stream of requests to the web server asking for updates (a process known as “polling”). If an update is available, the server responds and sends the new information to the client. The application is only “near” real-time because it is dependent on the frequency of requests and as the number of requests grow, the web server needs to greatly increase resources to handle them. Socket.io is a Node.js package that provides WebSockets functionality, allowing the server to push information to connected clients without the need for polling. Socket.io also provides a number of fallback transport options to achieve the widest range of browser and platform support possible.

The final piece of the stack is Now.js. Now.js provides a shared namespace between the web server and the client browser. This allows servers to directly call functions and access variables on the client and vice versa. A simple chat application in Now.js would involve the client browser calling a server function to send a message to everyone connected. The server function would in turn call a function on all connected clients to display the message.

In this article I will explore the other pieces you need via a working demo I built which you can interact with.

My Live Example

There are two parts to this example and you can play with both of them.

The Editing Application allows you to add, update and remove polygons from a map. Think of it as a community collaboration tool that anyone can use to add/update data on a map. Open the Editing Application

The Real-Time Display Application allows you to see a realtime feed of the data being edited in the editing application above. Open the Real-Time Display Application

How to Play with the Example

The idea is that you open both applications. You can then make edits to the polygons in the editing application, and instantly view the edits you/anyone else made in the display application without having to refresh. To make it a bit more fun I added a Twitter stream to the display application which shows a live feed of all the edits being made.