JSF2 - p:remoteCommand Example Chat Primefaces

p:remoteCommand chiama un metodo di un backing bean (tramite actionlistener) e, fondamentalemnte, fa da trigger ad uno javascript(oncomplete):

<p:remoteCommand name="nextMessage"
  actionListener="#{messageBean.firstUnreadMessage}"
  oncomplete="javascript:updateMessages(xhr, status, args);" />

Back-End

MessageBean.java

package com;

import java.io.Serializable;
import java.util.Collections;
import java.util.Date;
import java.util.LinkedList;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
import org.primefaces.context.RequestContext;


@ManagedBean
@ViewScoped
public class MessageBean implements Serializable {
 
  
 
    private final List messages;
    private Date lastUpdate;
    private Message message;
 
    /**
     * Creates a new instance of MessageBean
     */
    public MessageBean() {
        messages = Collections.synchronizedList(new LinkedList());
        lastUpdate = new Date(0);
        message = new Message();
    }
 
    public Date getLastUpdate() {
        return lastUpdate;
    }
 
    public void setLastUpdate(Date lastUpdate) {
        this.lastUpdate = lastUpdate;
    }
 
    public Message getMessage() {
        return message;
    }
 
    public void setMessage(Message message) {
        this.message = message;
    }
 
 
    public void firstUnreadMessage(ActionEvent evt) {
       RequestContext ctx = RequestContext.getCurrentInstance();

       ctx.addCallbackParam("ok", message!=null);
       if(message==null)
           return;
 
       lastUpdate = message.getDateSent();
 
       ctx.addCallbackParam("user", message.getUser());
       ctx.addCallbackParam("dateSent", new Date().toString());
       ctx.addCallbackParam("text", message.getMessage());
 
    }
 
}

Message.java

package com;
import java.io.Serializable;

public class Message implements Serializable {
    private Date dateSent;
    private String user;
    private String message;
 
    public Date getDateSent() {
        return dateSent;
    }
 
    public void setDateSent(Date dateSent) {
        this.dateSent = dateSent;
    }
 
    public String getMessage() {
        return message;
    }
 
    public void setMessage(String message) {
        this.message = message;
    }
 
    public String getUser() {
        return user;
    }
 
    public void setUser(String user) {
        this.user = user;
    }
}

Front-End

Chat1.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:p="http://primefaces.org/ui">
<h:head>
 <title>Chat test!</title>
 <script type="text/javascript"
  src="#{facesContext.externalContext.requestContextPath}/util.js"></script>

</h:head>

<h:body>
 <h:form prependId="false">
  <h:panelGrid columns="2">
                Name: <p:inputText value="#{messageBean.message.user}" />
                Text: <p:inputText
    value="#{messageBean.message.message}" />
   <p:commandButton type="reset" value="Clear" />
   <p:commandButton value="Send!"
    actionListener="#{messageBean.sendMessage}" onclick="nextMessage();" />
  </h:panelGrid>
  <p:remoteCommand name="nextMessage"
   actionListener="#{messageBean.firstUnreadMessage}"
   oncomplete="javascript:updateMessages(xhr, status, args);" />
 </h:form>

 <hr />
 <h3>Live chat</h3>
 <div id="chat"></div>
</h:body>
</html>

util.js


        function updateMessages(xhr, status, args) {
            if(!args.ok) return;
            $('#chat').append('<div class="msg">[' +args.dateSent+ '] <strong>'+args.user+'</strong>: '+args.text+'</div>');
        }

Esecuzione

lanciando da browser l’url

http://localhost:8080/JSFProject/faces/chat1.xhtml

si ha una simulazione di chat

JSF2 – p:remoteCommand Example Chat Primefaces

Lascia un commento Annulla risposta