Cloud Push Chat Tutorial
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: The full source can be found at the bottom of the tutorial here. Join Chat Room
chat-push.xhtml <mobi:fieldsetGroup> <mobi:fieldsetRow rendered="#{!user.hasJoined}"> <mobi:inputText value="#{user.username}" /> <mobi:commandButton value="Join Chat" actionListener="#{user.join}" /> </mobi:fieldsetRow> </mobi:fieldsetGroup> Send Message
chat-push.xhtml <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
chat-push.xhtml <mobi:outputList rendered="#{user.hasJoined}" styleClass="chat"> <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 CSSInstead 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: custom.css .chat { height: 450px; overflow: scroll; } 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: chat-push.xhtml <h:outputStylesheet library="css" name="custom.css" /> Add User.java Managed Bean
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: User.java @ManagedBean @ViewScoped public class User implements Serializable{ private String username; private String message; private boolean hasJoined; // injected instance of chatRoom managed bean @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 Managed Bean
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: ChatRoom.java @ManagedBean @ApplicationScoped public class ChatRoom implements Serializable{ 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); // if user is unavailable, send chat message to their email 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 Configuration
1. Add the mail.jar to the WEB-INF/lib folder 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 Cloud Push Email Alert
1. 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>
2. Add an onclick event to the 'Send Message' <mobi:commandButton>: <mobi:commandButton onclick="sendEmail();" value="Send Message" actionListener="#{user.sendMessage}" /> Run ApplicationOpen 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.
![]()
![]()
![]() Source |
Cloud Push Chat Tutorial
© Copyright 2016 ICEsoft Technologies Canada Corp.