Implementing Reverse Ajax using IcePush Plugin

In this blog I will explain about the hottest topic in the programming world these days, i.e. "Reverse Ajax", using one of the best & flexible MVC framework, i.e. Grails.

But some of you mignt not be actually aware of Reverse Ajax & its capabilities.So first of all i would like to elaborate & make you understand what this magical technology Reverse Ajax is , & also its powerful functionalities.

What is this Reverse Ajax thing ?

Many of you programmers out there must already be knowing the answer of this question "What is AJAX ? "

But for others I'll brief it.Actually AJAX stands for "Asynchronous Javascript And Xml" which deals with the capability of updating a part of a webpage without actually reloading or refreshing the webpage.This simply works on the request & response architecture but whenever a user triggers some action & response ,after processing the request, is sent back to the same page from where the request came and update some particular webpage area.

The most common example of Ajax is Google Search ,in which as soon as we start typing, the browser start sending the request with our queries & updating us with the results on the same page without updating the page.

Ajax in Google Search

Now this is AJAX , so you guys must be thinking what is this "Reverse Ajax".I simply say that you should think a little bit more & you will just find it.By the way,test your IQ some other time, today you will find this answer here only.

As the name suggests "Reverse Ajax" is a technology which works in simply opposite way as the AJAX.In Reverse Ajax the resuest is not send by "Triggering Some User Action".Mind my words here,these are of utmost importance & everything is hidden in it.Actually in this case, the server send you some response which you have not explicitly requested by hitting some button or clicking some link.

This might be getting too confusing for some of you.But don't worry, thats totally ok.I'll try to explain it to you using a simple example.

I'm sure you all must have your Facebook account.May be some of you actually have noticed this Reverse Ajax effect there in Facebook Chat.Whenever any of our friend send a chat message to you,a pop-up box at the bottom-right just actually appears there with the chat message.

Have you actually clicked any button or triggered any action there on Facebook.All of you must say a big NO & thats true.

What happens here is that whenever some of your friend starts a new chat session with you,he actually requests the server to find you & sends you the message.Then server finds you & shows you the pop-up on your screen,thus actually responding you,without even you requesting the action.

May be at that time this thing haven't got this clicked in your mind.But no issues,I was also among you initially, but not now anymore.

Reverse Ajax in Facebook Chat Pop-Up

Using Reverse Ajax

Now you all must have noticed what "Reverse Ajax" is & how it works.But now how to implement & use it in our project according to the required situation.

Some of you might be thinking that as it is a "Big Thing", there must be some complex way to integrate & use it.

But there is no situation to worry about.

Implement Reverse Ajax in Grails MVC

You can simply use the IcePush plugin in Grails to implement the features of Reverse Ajax in Garils MVC

grails install-plugin icepush

This will install latest icePush plugin into your existing project.And yes thats all, you anly need to do this to have Reverse Ajax capabiliities.Thats simple, isn't it ?

For further documentation on IcePush you can check official docs here

Simple Chat App Using IcePush Plugin in Grails

For all you programmers & friends I have made a small app using the IcePush plugin in Grails MVC to show how easy is this Reverse Ajax functionality to use.

Here is a webpage which requires your name  for chatting.

Simple Chat homepage

After entering the chat room here the page comes which already has the magic implemented in its code

Chat Message Page

This line of code is used to get all the Reverse Ajax capabilities on this page using IcePush plugin.

This code generates a region from where the ajax calls goes to

the action whose name is "chatList'.

Now you must be thinking how it works , actually when the page loads up

for the first time , it just loads the content initially from the usual controller & action

but subsequent Ajax calls are made to this action

(chatList) when this region is notified by its GROUP-NAME attribute.

Now lets move to controller :

import org.icepush.PushContext
import org.codehaus.groovy.grails.web.context.ServletContextHolder as SCH

class IcePustController {

    def index() { }
	
	def showChat={
		[name:params.name]
	}
	
	def showChatData={
		new ChatData(chatItem:params.name+" : "+params.message).save();
		push 'notifyGroup'
	}
	
	def push(String s) {
		PushContext.getInstance(SCH.servletContext).push s
	}
	
	def chatList={
		def fullChatList = ChatData.list()
		log.debug"params are chatList"+fullChatList
		 render(template:"chatUpdate",model:[fullChatList:fullChatList])
	}
	
}

Dont forget to include these classes as they provide the functionality for IcePush & are included in the plugin itself.

import org.icepush.PushContext
import org.codehaus.groovy.grails.web.context.ServletContextHolder as SCH

Here is the code of the domain, which saves the name of the user as well as its chat message

class ChatData {
String chatItem;
    static constraints = {
    }
}

Now when the user hits send button, showChatData action is called & the message as well as the user is saved in the database, & then further calling the push(Group_Name) method which initiates the Reverse Ajax call.This push() method is associated to the '<icep:region>' in the gsp page from where it calls up the action chatList & finally rendering the chat messages on the page itself.

Functionality of the Chat App

User1 logs in from chrome, hits the send button after entering his message it just shows up there in the same webpage.

User2 logs in from firefox , hits the send button after entering his message it just shows up there in the same webpage but also the chat entered by User1.

User3 logs in from IE, hits the send button after entering his message it just shows up there in the same webpage but also the chat entered by User1 & User2.

All in all all the messages send by these 3 different users will be updated on every screen as soon as they type & send the message,without any updating of the page. "Even if any of the user stop sending his own messages ,the messages from other two will be updated continuously without any action triggered by the user on their screen."

Now you can create and explore more features by the use of this plugin.And also I know the demo is

the most simplest it could have been ,but if i get across the point, its worth my efforts.

So friends you can even enhance this Awesomeness by using this Plugin & its other features also.

And if you have any comments , queries or suggestions, do post them here.

Enjoy & Keep Reverse Ajax'ing.

Thanks

Ankit