Ajax Push is a common Web 2.0 term that describes a technique of sending (or "pushing") data from the server to the client in an asynchronous manner. Ajax Push in ICEfaces 3 allows the application to incrementally update any part of the page at any time, for any group of clients, enabling collaborative multi-user applications where the actions of one user can be instantaneously communicated to other users. Ajax Push in ICEfaces 3 is based on an underlying asynchronous notification mechanism called ICEpush.
The goal of this tutorial is to create a basic ICEfaces 3 project and add collaborative interactions with Ajax Push. The example will allow multiple client sessions to choose colors and have their selection displayed to everyone looking at the application.
The following tools were used to create the project.
Add the icefaces.jar and icepush.jar (from the ICEfaces 3 bundle) to your project, either through a custom User Library or by putting them into easyAjaxPush/WEB-INF/lib/. The approach doesn't matter as long as the jars are included in the deployed war file.
Create a new page called color.xhtml and paste the code below:
The purpose of this page is very simple and will display a list of messages and a few buttons to choose a color. When you choose a color an associated message will be added and Ajax Push will send this change to any other client sessions viewing the page (because of how the push group will be setup).
Create a new Java class file called MessageBean in the package org.icefaces.tutorial.easyajaxpush.beans and paste the code below:
This class is ApplicationScoped (using annotations) and will store a list of TextModel objects. As you've seen above, the list will be displayed in the view (color.xhtml) using an h:dataTable.
The actual text of each message is generated in this class based on the HTTP session ID and the selected color. The resulting message looks similar to:
Note that this class will stop the list from growing beyond MAX_SIZE (default 25), but otherwise is fairly basic.
Create a new Java class file called ColorBean in the package org.icefaces.tutorial.easyajaxpush.beans and paste the code below:
This class is ViewScoped so one bean instance will be created for each client session. The current HTTP session ID for this client will be tracked. An instance of the MessageBean is injected so that text can be added as needed.
Currently no Ajax Push is used in the above code, since we will add that further below.
Create a new Java class file called TextModel in the package org.icefaces.tutorial.easyajaxpush.model and paste the code below:
This is a very basic model class that maintains and associates text and color, and is used in the MessageBean to display a list of formatted messages.
Once the application is built and deployed and running it will look fairly basic. Clicking a color button will refresh the list of messages, since no Ajax Push has been added yet. Ideally we want to be able to open multiple web browsers and see each others color choices immediately through Ajax Push.
Now that the project files are setup and running, our goal is to improve it by adding Ajax Push, which is the main topic of this tutorial. To do this the ICEfaces class org.icefaces.application.PushRenderer will be used. Developers who used older versions of ICEfaces may be familiar with SessionRenderer, which is similar, and is supported as a wrapper for PushRenderer. If you previously used the ICEfaces 1.x RenderManager you will have to port to the PushRenderer, and the RenderManager and associated classes are not available in ICEfaces 3.
It is also important to understand that the ColorBean is not initialzied until it is first used (it is lazy loaded). To get around this, so all clients are updated even if they have not click on any buttons, we first output the sessionId to the user, which initializes the bean.
All our interaction with Ajax Push will be done inside the ViewScoped bean called ColorBean.java, which was created using the code above.
First open ColorBean.java and add a constant PUSH_GROUP to represent the name of our push group (explained below, or in detail in the ICEpush documentation):
The next step is to add our current client session to a push group, the name of which is based on the PUSH_GROUP variable added above. Then when Ajax Push requests are sent or received for this push group ICEpush will know to update the page.
Add the following at the top of the constructor (around line 24):
For a result of:
Now when a color button is clicked and the message is added to the list an Ajax Push notification should be sent to any other client sessions in the push group "colorPage" (from our variable PUSH_GROUP).
To do this add the following line of code to the ColorBean.java action method chooseColor, after the addToList call before the return (around line 46):
For a result of:
Now after a message is added to the list we request an ICEpush render (aka use Ajax Push) via the PushRenderer.
Re-build and re-deploy the application with the PushRenderer changes.
Open multiple web browsers to the deployed easyAjaxPush application. Now when a color button is clicked in one browser, all other browsers also see the new message. This is thanks to Ajax Push!
An example of how the running application looks:
In future projects that you wish to use ICEpush in, the core two step process explained in detail above of PushRenderer.addCurrentSession and PushRenderer.render is a simple and elegant way to tap into the power and features of Ajax Push!
© Copyright 2021 ICEsoft Technologies Canada Corp.