Saturday, May 30, 2015

PrimeFaces Push with Atmosphere

PrimeFaces Push is based on Atmosphere to establish WebSocket communication in an easy way. Bellow I will share the configuration to be able to do such kind of communication.
1- Adding the PrimeFaces and Atmosphere to the pom.xml for Maven dependency. Also, I added the dependency of the Apache Commons Lang3 to use the StringEscapeUtils while sending the notification message.
<dependency>
 <groupId>org.atmosphere</groupId>
 <artifactId>atmosphere-runtime</artifactId>
 <version>2.1.7</version>
</dependency>

<dependency>
 <groupId>org.apache.commons</groupId>
 <artifactId>commons-lang3</artifactId>
 <version>3.4</version>
</dependency>

<dependency>
 <groupId>org.primefaces</groupId>
 <artifactId>primefaces</artifactId>
 <version>5.0</version>
</dependency>
2- The web.xml configuration for the push servlet.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>PrimePushNotify</display-name>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
  <servlet>
    <servlet-name>PrimePushServlet</servlet-name>
    <servlet-class>org.primefaces.push.PushServlet</servlet-class>
    <init-param>
      <param-name>org.atmosphere.cpr.broadcasterCacheClass</param-name>
      <param-value>org.atmosphere.cache.UUIDBroadcasterCache</param-value>
    </init-param>
    <load-on-startup>0</load-on-startup>
    <async-supported>true</async-supported>
  </servlet>
  <servlet-mapping>
    <servlet-name>PrimePushServlet</servlet-name>
    <url-pattern>/primepush/*</url-pattern>
  </servlet-mapping>
</web-app>
3- Finally, let's try the notify example from the PrimeFaces showcase at http://www.primefaces.org/showcase/push/notify.xhtml.
First, notify.xhml
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui">

<h:head>
 <title>Test</title>
</h:head>
<h:body>

 <p:growl widgetVar="growl" showDetail="true" />

 <h:form>
  <h:panelGrid columns="2">
   <p:outputLabel for="summary" value="Summary: " />
   <p:inputText id="summary" value="#{notifyView.summary}"
    required="true" />

   <p:outputLabel for="detail" value="Detail: " />
   <p:inputText id="detail" value="#{notifyView.detail}" required="true" />
  </h:panelGrid>

  <p:commandButton value="Send" actionListener="#{notifyView.send}" />
 </h:form>

 <p:socket onMessage="handleMessage" channel="/notify" />

 <script type="text/javascript">
        function handleMessage(facesmessage) {
            facesmessage.severity = 'info';
 
            PF('growl').show([facesmessage]);
        }
 </script>
</h:body>
</html>
Second, NotifyView.java
package com.ithinkisink.primepush.notify;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

import org.apache.commons.lang3.StringEscapeUtils;
import org.primefaces.push.EventBus;
import org.primefaces.push.EventBusFactory;
 
@ManagedBean
@RequestScoped
public class NotifyView {
     
    private final static String CHANNEL = "/notify";
     
    private String summary;
     
    private String detail;
     
    public String getSummary() {
        return summary;
    }
    public void setSummary(String summary) {
        this.summary = summary;
    }
     
    public String getDetail() {
        return detail;
    }
    public void setDetail(String detail) {
        this.detail = detail;
    }
     
    public void send() {
        EventBus eventBus = EventBusFactory.getDefault().eventBus();
        eventBus.publish(CHANNEL, new FacesMessage(StringEscapeUtils.escapeHtml3(summary), StringEscapeUtils.escapeHtml3(detail)));
    }
}
Third, NotifyResource.java
package com.ithinkisink.primepush.notify;

import javax.faces.application.FacesMessage;
import org.primefaces.push.annotation.OnMessage;
import org.primefaces.push.annotation.PushEndpoint;
import org.primefaces.push.impl.JSONEncoder;

@PushEndpoint("/notify")
public class NotifyResource {

 @OnMessage(encoders = { JSONEncoder.class })
 public FacesMessage onMessage(FacesMessage message) {
  return message;
 }
}
I created that example as I have read some questions on stackoverflow.com that some guys wasn't able to do the configuration between PrimeFaces and Atmosphere.
You can find the complete example on my Github from this link:
https://github.com/belalgalal/Blogging/tree/master/PrimePushNotify

No comments:

Post a Comment