CODEWITHSUNDEEP
jsfasynchronouspush
Rohit Banga
Rohit Banga

Reputation: 18916

How can server push asynchronous changes to a HTML page created by JSF?

When we create a JSF page, a client request allows generation of HTML dynamically using a combination of Java code and HTML. Can we introduce hooks in the HTML page using JSF framework, that allow server to update the HTML page based on asynchronous events occurring later at the server, usually via different threads?

Upvotes: 25

Views: 22043

Answers (4)

BalusC
BalusC

Reputation: 1109112

JSF 2.3+

You can use @Push and <f:websocket> for this. Below is a kickoff example with an applicaiton scoped socket which updates a data table upon an event fired by the backend via Event#fire() which the managed bean @Observes.

<h:dataTable id="notifications" value="#{bean.notifications}" var="notification">
    <h:column>#{notification.message}</h:column>
</h:dataTable>

<h:form>
    <f:websocket channel="push">
        <f:ajax event="updateNotifications" render=":notifications" />
    </f:websocket>
</h:form>

@Named @ApplicationScoped
public class Bean {

    private List<Notification> notifications;

    @Inject
    private NotificationService service;

    @Inject @Push
    private PushContext push;

    @PostConstruct
    public void load() {
        notifications = service.list();
    }

    public void onNewNotification(@Observes Notification newNotification) {
        notifications.add(0, newNotification);
        push.send("updateNotifications");
    }

    public List<Notification> getNotifications() {
        return notifications;
    }

}

@Stateless
public class NotificationService {

    @Inject
    private EntityManager entityManager;

    @Inject
    private BeanManager beanManager;

    public void create(String message) {
        Notification newNotification = new Notification();
        newNotification.setMessage(message);
        entityManager.persist(newNotification);
        beanManager.getEvent().fire(newNotification);
    }

    public List<Notification> list() {
        return entityManager
            .createNamedQuery("Notification.list", Notification.class)
            .getResultList();
    }

}

JSF 2.2-

If you're not on JSF 2.3 yet, you need to head to 3rd party JSF libraries.

Noted should be that the <o:socket> was the basis for the JSF 2.3 <f:websocket>. So if you have found a lot of similarities, then that's correct.

PrimeFaces uses Atmosphere under the hoods (which is troublesome to setup without Maven). Atmosphere supports websockets with fallback to SSE and long polling. ICEfaces is based on ancient long polling technique. All of those do not implement native JSR356 WebSocket API which was only later introduced in Java EE 7.

OmniFaces uses native JSR356 WebSocket API (supported in all Java EE 7 servers and Tomcat 7.0.27+). It is therefore also most simple to setup and use (one JAR, one context param, one tag and one annotation). It only requires CDI (not hard to install on Tomcat), but it enables you to even push from a non-JSF artifact on (e.g. a @WebServlet). For security and JSF view state keeping reasons, it only supports one-way push (server to client), not the other way round. For that you can keep using JSF ajax the usual way. The JSF 2.3 <f:websocket> is largely based on OmniFaces <o:socket>, hence you'll find a lot of similarities in their APIs (JSF - OmniFaces).

Alternatively, you can also use polling instead of pushing. Pretty much every ajax aware JSF component library has a <xxx:poll> component, such as PrimeFaces with <p:poll>. This allows you to send every X seconds an ajax request to the server and update the content whenever necessary. It's only less efficient than push.

See also:

Upvotes: 39

Scott Wilson
Scott Wilson

Reputation: 1660

If you need fully-featured Comet updates (reverse Ajax) and so on, then its worth taking a look at the DWR library.

Upvotes: -1

Andriy Sholokh
Andriy Sholokh

Reputation: 872

Simplest for you can be introduction of ajax4jsf library's "poll" component: https://ajax4jsf.dev.java.net/nonav/documentation/ajax-documentation/entire.html#d0e1955

It will not need application reconfiguration and big changes in JSF page (only adding a4j:poll component)

It worked very good in couple of my projects.

Upvotes: 0

Aaron Digulla
Aaron Digulla

Reputation: 328714

You can have a look at Seam (see this article for a discussion to use Seam with JSF and AJAX).

When I used Seam the last time, it was pretty slow, though. You may want to create your own JSF component that generates JavaScript (for example using jQuery as explained in this article).

Upvotes: -1

Related Questions