Push not received in originating browser

UI Components for JSF
Post Reply
zobbo
Posts: 13
Joined: 07 Dec 2015, 23:19

14 Dec 2015, 21:48

Hello,

I'm new to Primefaces and JSF in general. I have been trying to get a datagrid to update via Push. I do this by submitting a form to alter a list in a backing bean and then push an event to update the component. However this only works if I open a second browser, i.e. I submit the form in the originating browser, the datagrid doesn't update or fire the event handlers, however it works perfectly in a second browser window. I don't really understand why this is the case.

These are my javascript handlers:

Code: Select all

<script type="text/javascript">
				function handleMessage(data) 
				{
					console.log("handle message fired")
					console.log(data);
					updateWidgets();
				} 
			
				function handleOrder(data) 
				{
					console.log("handleorder fired")
					console.log(data);
					checkOrders();
				} 
		</script>
And these are my jsf tags:

Code: Select all

  <p:socket onMessage="handleMessage" channel="/prices" />
		
		<p:remoteCommand name="updateWidgets"
                 actionListener="#{parliamentManager.findLatestPrices}"
                 update="resultDisplay"/>
        
         <p:socket onMessage="handleOrder" channel="/order" />
		<p:remoteCommand name="checkOrders"
                 actionListener="#{parliamentManager.checkOrders}" /> 
       
And my onMessage handlers:

Code: Select all

@PushEndpoint("/prices")
	public class PricesResource {
		
		private static final Logger logger = Logger.getLogger("web.PricesResource");
		
	    @OnMessage(encoders = {JSONEncoder.class})
	    public OrderBook onMessage(OrderBook orderBook) throws InterruptedException {
	    	logger.log(Level.INFO, "PricesResource.onMessage price {0}", orderBook.getPrice());
	        return orderBook;
	    }
	}

Code: Select all

@PushEndpoint("/order")
	public class OrderResource {
	    @OnMessage(encoders = {JSONEncoder.class})
	    public Object onMessage(Object obj) {
	        return obj;
	    }
}
And the dataGrid itself:

Code: Select all

 <h:panelGroup id="resultDisplay">                          
				<p:dataGrid id="prices" var="orderBooks" value="#{parliamentManager.latestPricesResults}" columns="3" rows="12">
					<p:column>
   					<p:panel header="#{orderBooks.bidOrderId.member.memberId}">
      			<h:panelGrid columns="1">
   				<h:outputText value="#{orderBooks.price}" />
				</h:panelGrid>
   				</p:panel>
				</p:column>
			</p:dataGrid>
</h:panelGroup>
So I would like to see the component updated in the orignating browser as well as the other browsers. Any pointers would be appreciated.

Thanks,
Zobbo
JSF2.2/Glassfish 4/Primefaces 6.1

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

17 Dec 2015, 17:20

My recommendation(s)/response:

1. use only one p:socket
2. study PrimeFaces Push CHAT source code
3. do something similar to this
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

zobbo
Posts: 13
Joined: 07 Dec 2015, 23:19

19 Dec 2015, 17:46

smithh032772 wrote:My recommendation(s)/response:

1. use only one p:socket
2. study PrimeFaces Push CHAT source code
3. do something similar to this
Hi Smithh032772,

Thanks for that I'm going to look into those points.

Cheers,
Zobbo
JSF2.2/Glassfish 4/Primefaces 6.1

zobbo
Posts: 13
Joined: 07 Dec 2015, 23:19

20 Dec 2015, 16:57

Ok, so what I have done so far is drop the second socket and use one socket, then use a javascript handler to differentiate between the two events.

Code: Select all

<script type="text/javascript">
				function handleMessage(data) 
				{
					console.log("handle message fired")
					console.log(data);
					if(data == 'order')
					{
						console.log("data is order");
						checkOrders();
					}
					
					if(data == 'price')
					{
						console.log("data is price");
						updateWidget();
					}
				} 
		</script>
However I still have the same behaviour in that updateWidget isn't called in the originating browser in normal circumstances. But I have discovered that it will work if I put a breakpoint in my onMessage handler in my resource class. So could it be a timing issue? Seems odd. Anyway I'll see if I can make sense of the chat code in the meantime.

Thanks,
Zobbo
JSF2.2/Glassfish 4/Primefaces 6.1

zobbo
Posts: 13
Joined: 07 Dec 2015, 23:19

20 Dec 2015, 17:24

Well I seem to have resolved the problem by adding

Code: Select all

autoRun="true"
to my remotecommand that updates the datagrid. I guess the problem was caused by reloading of the page after the form is submitted.

Thanks,
Zobbo
JSF2.2/Glassfish 4/Primefaces 6.1

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

20 Dec 2015, 23:36

Can you reply with all of your xhtml?
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

zobbo
Posts: 13
Joined: 07 Dec 2015, 23:19

22 Dec 2015, 15:48

Hi Howard,

Yes, I've posted it below:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
    
        <title>Index</title>
 			<script type="text/javascript">
				function handleMessage(data) 
				{
					console.log("handle message fired")
					console.log(data);
					if(data == 'order')
					{
						console.log("data is order");
						checkOrders();
					}
					
					if(data == 'price')
					{
						console.log("data is price");
						updateWidget();
					}
				} 
		</script>
    </h:head>
    <h:body>
    <h:form>         
            <h:commandButton value="findParties" action="#{parliamentManager.findParties}" />
            <h:commandButton value="AddMember" action="#{parliamentManager.submitMember}" />
            <h:commandButton value="findMembers" action="#{parliamentManager.findMembers}" />
            <h:commandButton value="findTraders" action="#{parliamentManager.findTraders}" />
            <h:commandButton value="findAskOrders" action="#{parliamentManager.findAskOrders}" />
            <h:commandButton value="findBidOrders" action="#{parliamentManager.findBidOrders}" />
             <h:commandButton value="findAllOrderBooks" action="#{parliamentManager.findAllOrderBooks}" />
             <h:commandButton value="findLatestPrices" action="#{parliamentManager.findLatestPrices}" />
             <p:commandButton value="findLatestPrices2" actionListener="#{parliamentManager.findLatestPrices}" />     
        
              <h:dataTable var="party" 
                         summary="Table of parties"
                         value="#{parliamentManager.partyResultsId}"
                         rules="all"
                         cellpadding="5"
                         rendered="true">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Party" />
                    </f:facet>
                    <h:outputText value="#{party}" />
                </h:column>
            </h:dataTable>
            
             <h:dataTable var="member" 
                         summary="Table of members"
                         value="#{parliamentManager.memberResults}"
                         rules="all"
                         cellpadding="5"
                         rendered="true">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Member" />
                    </f:facet>
                    <h:outputText value="#{member.memberId}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Forename" />
                    </f:facet>
                    <h:outputText value="#{member.forename}" />
                </h:column>
            </h:dataTable>
        <div class="messagecolor">
            <h:messages showSummary="true" 
                        showDetail="true"
                        errorStyle="color: #d20005" 
                        infoStyle="color: blue"/>
        </div>  
        
        <h:dataTable var="askOrder" 
                         summary="Table of orders"
                         value="#{parliamentManager.askOrderResults}"
                         rules="all"
                         cellpadding="5"
                         rendered="true">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Ask Order" />
                    </f:facet>
                    <h:outputText value="#{askOrder.orderId}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Amount" />
                    </f:facet>
                    <h:outputText value="#{askOrder.amount}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Price" />
                    </f:facet>
                    <h:outputText value="#{askOrder.price}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="lastUpdate" />
                    </f:facet>
                    <h:outputText value="#{askOrder.lastUpdate}" />
                </h:column>
                 <h:column>
                    <f:facet name="header">
                        <h:outputText value="member" />
                    </f:facet>
                    <h:outputText value="#{askOrder.member.memberId}" />
                </h:column>
                 <h:column>
                    <f:facet name="header">
                        <h:outputText value="trader" />
                    </f:facet>
                    <h:outputText value="#{askOrder.trader.traderId}" />
                </h:column>
            </h:dataTable>
            
             <h:dataTable var="bidOrder" 
                         summary="Table of orders"
                         value="#{parliamentManager.bidOrderResults}"
                         rules="all"
                         cellpadding="5"
                         rendered="true">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Bid Order" />
                    </f:facet>
                    <h:outputText value="#{bidOrder.orderId}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Amount" />
                    </f:facet>
                    <h:outputText value="#{bidOrder.amount}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Price" />
                    </f:facet>
                    <h:outputText value="#{bidOrder.price}" />
                </h:column>
                 <h:column>
                    <f:facet name="header">
                        <h:outputText value="lastUpdate" />
                    </f:facet>
                    <h:outputText value="#{bidOrder.lastUpdate}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="member" />
                    </f:facet>
                    <h:outputText value="#{bidOrder.member.memberId}" />
                </h:column>
                 <h:column>
                    <f:facet name="header">
                        <h:outputText value="trader" />
                    </f:facet>
                    <h:outputText value="#{bidOrder.trader.traderId}" />
                </h:column>
            </h:dataTable>
            
       
        <h:selectOneMenu value="#{parliamentManager.bidMemberSelected}">
    		<f:selectItems value="#{parliamentManager.memberResultsId}" />
		</h:selectOneMenu>
		
		<h:selectOneMenu value="#{parliamentManager.bidTraderSelected}">
    	<f:selectItems value="#{parliamentManager.traderResultsId}" />
		  </h:selectOneMenu>          
            
            
            <h:inputText id="bidPrice"
                         title="add bidprice"
                         value="#{parliamentManager.bidPrice}"
                         required="false"
                         requiredMessage="Error: A name is required."
                         maxlength="10" 
                         />
             <h:inputText id="bidAmount"
                         title="add amount"
                         value="#{parliamentManager.bidAmount}"
                         required="false"
                         requiredMessage="Error: A name is required."
                         maxlength="10" 
                         />
             <h:commandButton value="SubmitOrder" action="#{parliamentManager.submitBidOrder}" />
             
              <h:inputText id="askPrice"
                         title="add askprice"
                         value="#{parliamentManager.askPrice}"
                         required="false"
                         requiredMessage="Error: A name is required."
                         maxlength="10" 
                         />
             <h:inputText id="askAmount"
                         title="add amount"
                         value="#{parliamentManager.askAmount}"
                         required="false"
                         requiredMessage="Error: A name is required."
                         maxlength="10" 
                         />
                         
                         <h:dataTable var="orderbook" 
                         summary="Table of orderbooks"
                         value="#{parliamentManager.orderBookResults}"
                         rules="all"
                         cellpadding="5"
                         rendered="true">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="AskOrderId" />
                    </f:facet>
                    <h:outputText value="#{orderbook.askOrderId.orderId}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="BidOrderId" />
                    </f:facet>
                    <h:outputText value="#{orderbook.bidOrderId.orderId}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Member" />
                    </f:facet>
                    <h:outputText value="#{orderbook.bidOrderId.member.memberId}" />
                </h:column>
                 <h:column>
                    <f:facet name="header">
                        <h:outputText value="Price" />
                    </f:facet>
                    <h:outputText value="#{orderbook.price}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="lastUpdate" />
                    </f:facet>
                    <h:outputText value="#{orderbook.lastUpdate}" />
                </h:column>
            </h:dataTable>
             <h:commandButton value="SubmitOrder" action="#{parliamentManager.submitAskOrder}" />  
             <h:panelGroup id="resultDisplay">                          
				<p:dataGrid id="prices" var="orderBooks" value="#{parliamentManager.latestPricesResults}" columns="3" rows="12">
					<p:column>
   					<p:panel header="#{orderBooks.bidOrderId.member.memberId}">
      			<h:panelGrid columns="1">
   				<h:outputText value="#{orderBooks.price}" />
				</h:panelGrid>
   				</p:panel>
				</p:column>
			</p:dataGrid>
</h:panelGroup>

<p:remoteCommand name="updateWidget"
                 actionListener="#{parliamentManager.findLatestPrices}"
                 update="prices"
                 autoRun="true"/>
                 
 <p:remoteCommand name="checkOrders"
                 actionListener="#{parliamentManager.checkOrders}" /> 
</h:form>

		<p:socket onMessage="handleMessage" channel="/notify" />
         
                 
</h:body>
</html>
JSF2.2/Glassfish 4/Primefaces 6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 44 guests