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. For additional details on the Cloud Push architecture please see the following guides:
Cloud Push Chat
The full source can be found at the bottom of the tutorial here.
We will prompt the user to join our chat room by adding a <mobi:inputText> bound to a User object. Once joined, we 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 page:
After the user has joined the chat room, a <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 'join' <mobi:fieldsetRow>:
Messages posted in the chat room will be displayed using <mobi:outputList> and <ui:repeat> tags. The <ui:repeat> will iterate over the list of sent messages and render each as a <mobi:outputListItem>. Please add the following markup below our 'Send Message' <mobi:fieldsetRow> but above the closing </mobi:fieldsetGroup>:
Instead of using inline CSS, we will create a custom css file and add our page specific styles. In the web directory of the project, create the folder structure resources/css and custom.css. In custom.css, add the following:
We also need to add the CSS stylesheet reference to our page. Add the following to the <head> section of the page, below the <mobi:deviceResource> tag so that this stylesheet takes precedence:
User.java will contain fields specific to each user and the methods to join the chat and send a message. These methods use an injected instance of our soon to be added ChatRoom object. The ChatRoom class will be our main controller class.
Notice that the User() constructor 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 we will have one render group but more complex use cases may require that we have multiple render groups for multiple chat rooms, a lobby, private messages, etc..
Please add the User.java class and ensure that you generate the getters/setters:
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. In addition to adding a user's session to a render group, here are the only other two required Cloud Push calls:
The difference between the two is that the first call contains the option to send 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:
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 Cloud Push PushMessage email alert. For this tutorial, we will use a gmail account to send to our alert email. Here is what is required:
1. Add the mail.jar to the WEB-INF/lib folder
2. Add the following to the WEB-INF/web.xml:
When the UI is inactive, we will alert the user to new chat messages via email thanks to Cloud Push. There are two steps required:
|The email address could be dynamically configured like so:|
2. Add an onclick event to the 'Send Message' <mobi:commandButton>:
Open two separate browsers (with 1 being a mobile browser) and login to the chat. Send a message and see that it is automatically delivered to all users of the chat room. If we minimize the application in our mobile browser, any missed messages to that device will be delivered to the user with the email configured in ice.push.parkInactivePushIds.
Enter a username to join the chat:
Send a message to all users of the chat:
Another user has sent a message: