Cloud Push Chat Tutorial

The goal of this tutorial to is to create a chat application that uses Cloud Push to deliver chat messages between users in a chat room. If a chat message cannot be delivered directly to the UI, an email alert will be sent to the user.

Cloud Push delivers real time notifications to mobile devices, alerting the user of some state change of interest that has occurred in the network cloud. It is extremely easy to use by simply adding the following:

1.

For additional details on Cloud Push we strongly recommend reviewing the following:

There are no images attached to this page.

Join Chat Room

We will prompt the user to join our chat room by adding a <mobi:inputText> bound to a User object. Once logged in, we will un-render these fields by setting hasJoined to true which is bound to the rendered attribute of our <mobi:fieldSetRow>. Please add the following to your main page:

<mobi:fieldsetGroup inset="true" style="width:350px">
	<mobi:fieldsetRow rendered="#{!user.hasJoined}">
		<mobi:inputText value="#{user.username}" />
		<mobi:commandButton value="Join Chat" actionListener="#{user.join}" />
	</mobi:fieldsetRow>
</mobi:fieldsetGroup>

Send Message

After a user has joined the chat room, an <mobi:inputText> and <mobi:commandButton> will be rendered that will allow the user to send a chat message to other users. Please add the following below the <mobi:fieldsetRow> above:

<mobi:fieldsetRow rendered="#{user.hasJoined}">
	<h:outputText value="Welcome #{user.username}" />
	<br />
	<mobi:inputText value="#{user.message}" />
	<mobi:commandButton value="Send Message" actionListener="#{user.sendMessage}" />
</mobi:fieldsetRow>

Display Chat Messages

Messages sent to users of the chat room will be displayed using <mobi:outputList> and <ui:repeat> tags. The <ui:repeat> will iterate over a list of messages and render them within a <mobi:outputListItem>. Please add the following markup below our 'Send Message' <mobi:fieldsetRow> but above the closing </mobi:fieldsetGroup>:

<mobi:outputList rendered="#{user.hasJoined}" style="height:450px;overflow:scroll;" inset="true">
	<mobi:fieldsetRow>
		<ui:repeat value="#{chatRoom.messages}" var="message">
			<mobi:outputListItem group="true">
				<h:outputText value="#{message}" />
				<br />
			</mobi:outputListItem>
		</ui:repeat>
	</mobi:fieldsetRow>
</mobi:outputList>

Add User.java

User.java will contain fields specific to each user such as username, the current message and whether they have joined the chat room. This class also contains the join and sendMessage methods which use an injected instance of our soon to be added ChatRoom object to add a user to the chat room and add a message to the chat.

Important: Notice the User() constructor which calls PushRenderer.addCurrentSession(ChatRoom.GROUP);. When the User class is instantiated, the user's current session will be added to a render group. For this tutorial, only 1 render group will be used but more complex use cases may require that we have render groups for each chat room, etc..

Please add the User.java class and generate getters/setters:

@ManagedBean
@ViewScoped
public class User {

	private String username;
	private String message;
	private boolean hasJoined;

	@ManagedProperty(value = "#{chatRoom}")
	private ChatRoom chatRoom;

	public User() {
		hasJoined = false;
		PushRenderer.addCurrentSession(ChatRoom.GROUP);
	}

	public void join(ActionEvent event) {
		hasJoined = true;
		chatRoom.addUser(this);
	}

	public void sendMessage(ActionEvent event) {
		chatRoom.addMessage(this, message);
	}

        //TODO GENERATE GETTERS/SETTERS
}

Add ChatRoom.java

ChatRoom.java will contain the application's main functionality such as adding/removing a user from the chat and sending a chat message to members of the chat room. Here are the two main Cloud Push calls:

PushRenderer.render(GROUP, new PushMessage("Missed Chat Message", message)); - A priority push, with option to do a cloud push.

PushRenderer.render(GROUP); - A standard Ajax Push notification.

The main difference is that the first call contains the option of sending a PushMessage which will use a common network protocol to send either an email or SMS. For this specific tutorial we will be sending a 'missed chat' notification via email. Please add the following class to the application:

@ManagedBean
@ApplicationScoped
public class ChatRoom {

    private Map users = new Hashtable();
    private List messages = new Vector();
    
    public static final String GROUP = "main";
    private String subject = "subject";
    private String message = "message";
  
    protected void addMessage(User user,String message) {
        messages.add(user.getUsername( )+ " says: " + message);
        PushRenderer.render(GROUP, new PushMessage("Missed Chat Message", message));
    }    

    public void addUser(User user) {
        if (!users.containsKey(user.getUsername())) {
            users.put(user.getUsername(), user);
            messages.add(user.getUsername() + " joined");
            PushRenderer.render(GROUP);
        }
    }

    public void removeUser(User user) {
        Object removedUser = users.remove(user.getUsername());
        if (removedUser != null) {
            messages.add(user.getUsername() + " left");
        }
        PushRenderer.render(GROUP);
    }

    public List getMessages() {
        return messages;
    }
}

Add Email Alert Configuration

When a chat room user is not actively using the application (UI not visible), the application will be unable to deliver new messages to the user. As such, missed chat messages will be delivered to the user via a PushMessage email alert. Please add the mail.jar to the WEB-INF/lib folder and the following to the WEB-INF/web.xml:

    <context-param>
    <param-name>smtp.host</param-name>
    <param-value>smtp.gmail.com</param-value>
</context-param>
<context-param>
     <param-name>smtp.from</param-name>
     <param-value>your_email@gmail.com</param-value>
</context-param>
<context-param>
     <param-name>smtp.port</param-name>
     <param-value>465</param-value>
</context-param>
<context-param>
     <param-name>smtp.user</param-name>
     <param-value>your_email@gmail.com</param-value>
</context-param>
<context-param>
     <param-name>smtp.password</param-name>
     <param-value>your_password</param-value>
</context-param>
<context-param>
  <param-name>smtp.security</param-name>
  <param-value>SSL</param-value>
</context-param>
<context-param>
  <param-name>smtp.verify-server-certificate</param-name>
  <param-value>false</param-value>
</context-param>

Send Email Alert

If the UI is inactive, we will alert the user to new chat messages via email. The first step is to add the following javascript call to the <head> tag of the page:

<script type="text/javascript">
	function sendEmail() {
             // If alert cannot be delivered, send via email
	     ice.push.parkInactivePushIds('mail:email@address.com');
	}
</script>
\\

The second step is to add an onclick to the 'Send Message' <mobi:commandButton> like so:

\\

<mobi:commandButton onclick="sendEmail();" value="Send Message" actionListener="#

Unknown macro: {user.sendMessage}

" />

Run Application

Open two separate browsers (with 1 being a mobile browser) and login to the chat. Send a message and notice that it is automatically delivered to all users of the chat room using ICEsoft's Ajax Push mechanism. If we minimize the application in a mobile browser, any missed messages will be delivered to the user via email.

Unable to render embedded object: File (iceman.png) not found.

Cloud Push Chat Tutorial