PrimeFaces Push CHAT showcase source code

bhanu · 31 Jul 2013, 07:33

thanks for your response..

smithh032772 · 02 Aug 2013, 20:39

bhanu wrote:thanks for your response..

yet, another short response, what does this mean? what are your latest test results? is primefaces push CHAT working different or as-expected for you?

a nice detailed response, please. thank you.

teja1524 · 07 Aug 2013, 13:17

hai when i run your code posted in this forum i got the screen but user list invisable .can you give me any idea what mistake i did?

bhanu · 08 Aug 2013, 16:35

Is there any jars needed for using @inject in our application..???

smithh032772 · 08 Aug 2013, 17:53

I edited the first/initial topic (on page 1 of this forum topic), and added the following:

JSF ChatUsers.java
JSF ChatView.java

and do NOT use

CDI ChatUsers.java
CDI ChatView.java

since it seems as though you prefer not to do research about CDI, @Inject, etc... (as I advised you to do earlier in this forum topic or another forum topic).

bhanu · 09 Aug 2013, 06:49

when i am using your code users list cannot updated..

bhanu · 16 Aug 2013, 09:36

chat.xhtml

Code: Select all

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>PrimePush - Chat</title>
        
        <style>
            .chatlogs {
                height: 200px;
                overflow: auto;
                padding: 0.5em 1em 0.5em 0.5em;
            }
            .messageInput {
                width: 400px;
            }            
            .usersList {
                height: 200px;
                overflow: auto;
               
            }
        </style>
        <script>
            function handleMessage(msg) {
                msg.severity = 'info';
                growl.show([msg]);
            }
        </script>
    </h:head>
    <h:body>
        
        <p:growl id="growl" showDetail="true" />

        <h:form id="form">

            <p:fieldset id="container" legend="PrimeChat" toggleable="true">

                <h:panelGroup rendered="#{chatView.loggedIn}">

                    <h:panelGrid columns="2" columnClasses="publicColumn,usersColumn" style="width:100%">
                        <p:outputPanel id="public" layout="block" styleClass="ui-corner-all ui-widget-content chatlogs"/>

                        <p:dataList id="users" var="user" value="#{chatUsers.users}" styleClass="usersList" >
                            <f:facet name="header">
                                Users
                            </f:facet>

                            <p:commandButton title="Chat" icon="ui-icon-comment" oncomplete="pChat.show()" update=":form:privateChatContainer">
                                <f:setPropertyActionListener value="#{user}" target="#{chatView.privateUser}" />
                            </p:commandButton>
                            #{user}
                        </p:dataList>
                    </h:panelGrid>

                    <p:separator />

                    <p:inputText value="#{chatView.globalMessage}" styleClass="messageInput" />
                    <p:spacer width="5" />
                    <p:commandButton value="Send" actionListener="#{chatView.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>
                    <p:spacer width="5" />
                    <p:commandButton value="Disconnect" actionListener="#{chatView.disconnect}" global="false" update="container" />
                </h:panelGroup>

                <h:panelGroup rendered="#{not chatView.loggedIn}" >
                    Username: <p:inputText value="#{chatView.username}" />

                    <p:spacer width="5" />
                    <p:commandButton value="Login" actionListener="#{chatView.login}" update="container" 
                                        icon="ui-icon-person" />
                </h:panelGroup>

            </p:fieldset>

            <p:dialog widgetVar="pChat" header="Private Chat" modal="true" showEffect="fade" hideEffect="fade">
                <h:panelGrid id="privateChatContainer" columns="2" columnClasses="vtop,vtop">
                    <p:outputLabel for="pChatInput" value="To: #{chatView.privateUser}" />
                    <p:inputTextarea id="pChatInput" value="#{chatView.privateMessage}" rows="5" cols="30" />

                    <p:spacer />
                    <p:commandButton value="Send" actionListener="#{chatView.sendPrivate}" oncomplete="pChat.hide()" />
                </h:panelGrid>
            </p:dialog>

        </h:form>

        <p:socket onMessage="handleMessage" channel="/chat" autoConnect="false" widgetVar="subscriber"/>

        <script type="text/javascript">
            function handleMessage(data) {
                var chatContent = $(PrimeFaces.escapeClientId('form:public'));
                chatContent.append(data + '<br />');

                //keep scroll
                chatContent.scrollTop(chatContent.height());
            }
        </script>                            
    </h:body>
</html>

ChatUsers.Java

Code: Select all

package com.nitspl;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.inject.Named;


@Named
@SuppressWarnings("serial")
public class ChatUsers implements Serializable {
    
    private List<String> users;
    
    public ChatUsers() {
    	 this.users = new ArrayList<String>();
    }
    
  /* @PostConstruct
    public void init() {
    	 this.users = new ArrayList<String>();
    }*/

    public List<String> getUsers() {
        return users;
    }

    public void setUsers(List<String> users) {
        this.users = users;
    }
    
    public void addUser(String user) {
        this.users.add(user);
    }
    
    public void removeUser(String user) {
        this.users.remove(user);
    }
    
    public boolean contains(String user) {
        return this.users.contains(user);
    }
}

ChatView.java

Code: Select all

package com.nitspl;

import java.io.Serializable;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.inject.Inject;
import javax.inject.Named;
//import javax.inject.Inject;
//import javax.inject.Named;
import org.primefaces.context.RequestContext;
import org.primefaces.push.PushContext;
import org.primefaces.push.PushContextFactory;

@Named
@SuppressWarnings("serial")
public class ChatView implements Serializable {
    
	 private final PushContext pushContext = PushContextFactory.getDefault().getPushContext();  
   
    @Inject
    private ChatUsers users;

    private String privateMessage;
    
    private String globalMessage;
   
    private String username;

    private boolean loggedIn;
    
    private String privateUser;
    
    private final static String CHANNEL = "/chat/";
    
    
    
    FacesContext fc=FacesContext.getCurrentInstance();
	ChatUsers users1=fc.getApplication().evaluateExpressionGet(fc, "#{chatUsers}", ChatUsers.class);
	
	
	public ChatView() {
    	//users =new ChatUsers();
		 FacesContext fc=FacesContext.getCurrentInstance();
		 users=fc.getApplication().evaluateExpressionGet(fc, "#{chatUsers}", ChatUsers.class);
    }
    
	
	
    public ChatUsers getUsers1() {
		return users1;
	}

	public void setUsers1(ChatUsers users1) {
		this.users1 = users1;
	}

	
	public void setUsers(ChatUsers users) {
        this.users = users;
    }

    public ChatUsers getUsers() {
		return users;
	}

	public String getPrivateUser() {
        return privateUser;
    }

    public void setPrivateUser(String privateUser) {
        this.privateUser = privateUser;
    }

    public String getGlobalMessage() {
        return globalMessage;
    }

    public void setGlobalMessage(String globalMessage) {
        this.globalMessage = globalMessage;
    }

    public String getPrivateMessage() {
        return privateMessage;
    }

    public void setPrivateMessage(String privateMessage) {
        this.privateMessage = privateMessage;
    }
    
    public String getUsername() {
        return username;
    }
    
    public void setUsername(String username) {
        this.username = username;
    }

    public boolean isLoggedIn() {
        return loggedIn;
    }
    
    public void setLoggedIn(boolean loggedIn) {
        this.loggedIn = loggedIn;
    }

    public void sendGlobal() {
        pushContext.push(CHANNEL + "*", username + ": " + globalMessage);

        globalMessage = null;
    }
    
    public void sendPrivate() {
        pushContext.push(CHANNEL + privateUser, "[PM] " + username + ": " + privateMessage);
        
        privateMessage = null;
    }
   
    public void login() {
        RequestContext requestContext = RequestContext.getCurrentInstance();

        if(users.contains(username)) {
            loggedIn = false;
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Username taken", "Try with another username."));

            requestContext.update("growl");
        }
        else {
            users.addUser(username);
        	//users.getUsers().add(username);
            PushContext pushContext = PushContextFactory.getDefault().getPushContext();  
            pushContext.push(CHANNEL, username + " joined the channel.");         
            requestContext.execute("subscriber.connect('/" + username + "')");
            loggedIn = true;
        }
    }
    
    public void disconnect() {
        //remove user and update ui
        users.removeUser(username);
        RequestContext.getCurrentInstance().update("form:users");
        
        //push leave information
        pushContext.push(CHANNEL, username + " left the channel.");
        
        //reset state
        loggedIn = false;
        username = null;
    }
}

web.xml

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Production</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>org.apache.myfaces.EL_RESOLVER_COMPARATOR</param-name>
        <param-value>org.apache.myfaces.el.unified.OpenWebBeansELResolverComparator</param-value>
    </context-param>
    <context-param>
        <param-name>org.apache.myfaces.CACHE_EL_EXPRESSIONS</param-name>
        <param-value>always</param-value>
    </context-param>
    <context-param>
        <param-name>org.apache.myfaces.COMPRESS_STATE_IN_SESSION</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>org.apache.myfaces.NUMBER_OF_VIEWS_IN_SESSION</param-name>
        <param-value>10</param-value>
    </context-param>
    <context-param>
        <param-name>org.apache.myfaces.SERIALIZE_STATE_IN_SESSION</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.FACELETS_REFRESH_PERIOD</param-name>
        <param-value>-1</param-value>
    </context-param>
    <context-param>
        <param-name>org.apache.myfaces.CHECK_ID_PRODUCTION_MODE</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>org.apache.myfaces.VIEW_UNIQUE_IDS_CACHE_ENABLED</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>org.apache.myfaces.SAVE_STATE_WITH_VISIT_TREE_ON_PSS</param-name>
        <param-value>false</param-value>
    </context-param>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    
    <servlet>
        <servlet-name>Push Servlet</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.HeaderBroadcasterCache</param-value>
        </init-param>
        <init-param>
            <param-name>org.atmosphere.cpr.broadcasterClass</param-name>
            <param-value>org.atmosphere.cpr.DefaultBroadcaster</param-value>
        </init-param>
        <init-param>
            <param-name>org.atmosphere.cpr.broadcastFilterClasses</param-name>
            <param-value>org.atmosphere.client.TrackMessageSizeFilter</param-value>
        </init-param>
        <init-param>
            <param-name>org.atmosphere.cpr.sessionSupport</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Push Servlet</servlet-name>
        <url-pattern>/primepush/*</url-pattern>
    </servlet-mapping>
    
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>faces/chat.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

facesconfig.xml

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<faces-config
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd"
    version="2.1">
	<managed-bean>
		<managed-bean-name>chatUsers</managed-bean-name>
		<managed-bean-class>com.nitspl.ChatUsers</managed-bean-class>
		<managed-bean-scope>application</managed-bean-scope>
	</managed-bean>
	<managed-bean>
		<managed-bean-name>chatView</managed-bean-name>
		<managed-bean-class>com.nitspl.ChatView</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>

</faces-config>

i got result like below

[img]http://i1272.photobucket.com/albums/y38 ... 680a4c.png[/img]

[img]http://i1272.photobucket.com/albums/y38 ... 0bae70.png[/img]

who are logged in first thier users list can not updated in that browser.but messages will be displayed correctly.please
give me the solution for this.

sorry for my english.

smithh032772 · 16 Aug 2013, 15:13

1. in chat.xhtml, add remoteCommand to make an AJAX request to bean and update 'users' datalist on the page

Code: Select all

<p:remoteCommand name="updateUserList" update="users"/>

2. in chat.xhtml, modify the <script>...</script> to invoke the remoteCommand, if message includes the string, "updateUserList()", which will update 'users' datalist on the page

Code: Select all

<script type="text/javascript">
    function handleMessage(data) {
        if (data.indexOf("updateUserList()") !== -1) {
            updateUserList();
        }
        else {
            var chatContent = $(PrimeFaces.escapeClientId('form:public'));
            chatContent.append(data + '<br />');

            //keep scroll
            chatContent.scrollTop(chatContent.height());
        }
    }
</script>

3. add the following to ChatView.java login() and disconnect() methods

Code: Select all

pushContext.push(CHANNEL + "*", "updateUserList()");

4. I updated the initial post with these code changes (and a few more code changes).

bhanu · 17 Aug 2013, 07:03

thanks for your great help.its working fine.but i have small issue i.e. when i refresh my browser the message are not visible.

smithh032772 · 17 Aug 2013, 15:56

topic title: PrimeFaces Push CHAT showcase source code

the 'only' goal of PrimeFaces Push CHAT showcase example is to show you how you can use PrimeFaces PUSH to push messages in a 'simple' CHAT JSF 'example'. this is not a CHAT 'app' like Google Hangouts. there is no database to store messages and no server memory used to 'store' messages.

if you want to store messages 'sent', then you need to do-it-yourself and write your own CHAT app which saves 'chat' messages somewhere in your app, in memory or database.

why are you asking all these questions about CHAT anyway? are you trying to write your own CHAT 'app' or are you adding PrimeFaces Push CHAT 'example' to your app for some company or something? you may want to search google for JSF chat application. I am sure you will find what you are looking for.

PrimeFaces Push CHAT showcase source code

Who is online