Inicio > glassfish, Java, JSF, Linux, NetBeans, Web 2.0 > PushServer + Jetty + Primefaces + WebSockets = PrimePush

PushServer + Jetty + Primefaces + WebSockets = PrimePush

abril 10, 2012

Después de haber recorrido internet buscando a una solución para implementar AjaxPush con el framework para JSF de Primefaces 3, pues al fin lo he logrado, como nos comentan los creadores de primefaces dentro de la documentación oficial, para hacer este tipo de implementaciones es necesario crear un servidor paralelo a nuestra aplicación, este va ser un servidor de Push y se va a encargar exclusivamente de ese trabajo, conservando nuestro proyecto mucho más modular y escalable. Actualmente nos dicen que solo existe soporte para el servidor push implementado con las librerías de jetty, así que para comprobarlo he realizado unas cuantas pruebas obteneniendo un resultado excelente. Como se realizó esto lo voy a mostrar ahora:

  1. Lo primero que debemos hacer es descargar la librería de Jetty, en este casó la última versión que he podido encontrar es Jetty 8.1.2.
  2. Luego voy a crear un proyecto java estándar como los de escritorio o de consola en Netbeans 7.1.
  3. Agregar estas librerías al proyecto.
    jetty-websocket-8.1.2.v20120308.jar
    servlet-api-3.0.jar
    jetty-server-8.1.2.v20120308.jar
    jetty-servlet-8.1.2.v20120308.jar
    jetty-annotations-8.1.2.v20120308.jar
    jetty-io-8.1.2.v20120308.jar
    jetty-util-8.1.2.v20120308.jar
    jetty-http-8.1.2.v20120308.jar
    jetty-security-8.1.2.v20120308.jar
    jetty-continuation-8.1.2.v20120308.jar
  1. Creamos una clase principal con un método main como está.
import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.servlet.ServletContextHandler;
import org.eclipse.jetty.servlet.ServletHolder;
import servlet.PushServlet;

/**
* @author christmo
*/
public class JettyServerPush {

    public static void main(String[] args) throws Exception {
        Server server = new Server(8081);

        ServletContextHandler context = new ServletContextHandler(ServletContextHandler.SESSIONS);
        context.setContextPath("/");
        server.setHandler(context);

        context.addServlet(new ServletHolder(new PushServlet()), "/*");

        server.start();
        server.join();
    }
}

Luego lo que queda es agregar la clase PushServlet que se tiene que desplegar con el servicio de websockets, esta clase la podemos encontrar íntegra en el código de primefaces, yo he hecho un par de modificaciones para hacer las pruebas pero uds la pueden personalizar como gusten.

import java.io.IOException;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import org.eclipse.jetty.websocket.WebSocket;
import org.eclipse.jetty.websocket.WebSocketServlet;

public class PushServlet extends WebSocketServlet {

    private static final long serialVersionUID = 1L;

    private final Map<String,Set> connectedClients = new ConcurrentHashMap>();

    @Override
    public void init() throws ServletException {
        super.init();
        String[] channels = {"chat","counter"};

        for(String channel : channels) {
            this.connectedClients.put(channel, new CopyOnWriteArraySet());
        }
    }

    @Override
    public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol) {
        String channel = request.getRequestURI().split("/prime-push/")[1];
        System.out.println("Canal:"+channel);
        return new PrimeWebSocket(channel);
    }

    private class PrimeWebSocket implements WebSocket, WebSocket.OnTextMessage {
        Connection connection;
        String channel;

        public PrimeWebSocket(String channel) {
            this.channel = channel;
        }

        public void onClose(int closeCode, String message) {
            connectedClients.get(this.channel).remove(this);
        }

        public void onOpen(Connection connection) {
            this.connection = connection;
            connectedClients.get(this.channel).add(this);
        }

        public void onMessage(String message) {
            System.out.println(message);
            try {
                for(PrimeWebSocket ws : connectedClients.get(this.channel)) {
                    ws.connection.sendMessage(message);
                }
            }catch(IOException e) {
                System.out.println(e);
            }
        }
    }
}

Finalmente ejecutamos nuestro servidor Jetty el cual ya es un servidor de PUSH, este está corriendo en el puerto 8081, podemos hacer pruebas rápidamente a través de esta página http://websocket.org/echo.html donde tenemos un cliente de websockets.

Lo que debemos poner para probar es está ruta ws://localhost:8081/prime-push/counter y conectar, si nos aparece el mensaje conectado pues todo ha salido muy bien y el servidor está listo, podemos hacer pruebas con este enviando algo desde allí y abriendo esa página en más pestañas.

Cliente Primefaces – PrimePush

Para hacer la misma prueba desde un proyecto con primefaces debemos crear un proyecto web, descargar la librería de primefaces añadirla al proyecto que estamos creando y haremos lo siguiente:

Crearemos un archivo JSF con el nombre de index.xhtml y pondremos lo que se muestra a continuación.

<?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>Facelet Title</title>
        <style type="text/css">
            .display {
                font-size: 36px !important;
            }
        </style>

        <script type="text/javascript">
            //<![CDATA[
            function handleMessage(evt, data) {
                $('.display').html(data);
            }
            //]]>
        </script>
    </h:head>
    <h:body>
        <h:form>
            <h:outputText value="#{beanPush.count}" styleClass="ui-widget display" />

            <br />

            <p:commandButton value="Click" actionListener="#{beanPush.increment}" />
        </h:form>

        <p:push onmessage="handleMessage" channel="counter" />

    </h:body>
</html>

Luego crearemos una clase dentro de código que maneje la lógica de la aplicación en este caso un contador, este va ser nuestro manejador de bean.

package bean;

import java.io.Serializable;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import org.primefaces.context.RequestContext;

/**
 * @author christmo
 */
@ManagedBean
@ApplicationScoped
public class BeanPush implements Serializable {

    private int count;

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public void increment() {
        count++;
        RequestContext.getCurrentInstance().push("counter", count);
    }
}

Finalmente necesitamos hacer que la aplicación apunte a nuestro servidor de Push creado anteriormente eso lo debemos hacer añadiendo lo siguiente dentro del archivo web.xml

    <context-param>
        <param-name>primefaces.PUSH_SERVER_URL</param-name>
        <param-value>ws://localhost:8081/</param-value>
    </context-param>

Y eso es todo espero que les funcione, si todo lo que escribí por aquí sonó a chino aquí les dejo los proyectos para que los revisen…

Proyectos 😉

Saludos

Christian Mora

@christmo

Anuncios
Categorías:glassfish, Java, JSF, Linux, NetBeans, Web 2.0 Etiquetas:
  1. Pablo
    mayo 18, 2012 en 10:11 pm

    Buenisimo lo tuyo !!! pero tengo un problema, a ver si me podés ayudar.
    Puedo levantar el server PUSH correctamente porque puedo conectarme desde la web que pasaste para probarlo.
    En mi proyecto con primefaces(3.1) creo la página y bean que pusistes como ejemplo, y agrego lo que hay que poner en el web.xml(aunque creo hay que sacarle la última barra a ws://localhost:8081/).
    Mi problema es que corro la aplicación (primefaces) y no se registra nunca ni manda mensajes, e inspecciono el botón y correctamente tiene la ruta ws://localhost:8081/prime-push/counter.
    Qué puede ser ? que estè usando tomcat ?
    Gracias y saludos !

  2. oriuken
    mayo 21, 2012 en 2:38 pm

    Loco ! encontré el problema ! era el browser que estaba usando… el PUSH de la versión 3.1 de primefaces no funciona con firefox 10, 11 ni 12 !! Tengo entendido que la 3.3 de primefaces si, pero para los que tenemos versiones anteriores usemos el Chrome que anda de maravilla ! Gracias por el tutorial de nuevo ! ayudó muchísimo.
    Acordarse para el que lea esto que en el web.xml del ejemplo, hay que sacarle la última barra a ws://localhost:8081/ para que quede ws://localhost:8081

    Saludos

  3. septiembre 19, 2012 en 10:34 pm

    Tengo un problema, localmente funciona de maravilla, lo implemente con un chat pero via red no, alguna duda o pista??

    • septiembre 19, 2012 en 10:40 pm

      el web.xml podrias poner la ip de tu servidor, aunque regularmente sabe ser solo el firewall revisale si lo has bajado o si puedes hacer ping al server. pueden ser cuestiones solo de red. suerte con eso…

  4. febrero 3, 2013 en 6:22 pm

    Tengo un problema con esta linea me sale error

    push(“counter”, count);

    the method push (String,int) is undefined for the type requestcontext

    Y la otra este es un chat todos con todos oh hay forma de que sea segun una lista de usuarios uno a uno?

  5. mayo 16, 2013 en 12:23 am

    I think that everything said made a ton of sense.
    However, think on this, what if you were to write a killer title?
    I am not saying your information isn’t good, however what if you added a post title that makes people desire more? I mean PushServer + Jetty + Primefaces + WebSockets = PrimePush | christmo’s Blog is kinda vanilla.

    You ought to look at Yahoo’s front page and watch how they write article headlines to get people interested. You might add a video or a related pic or two to get readers excited about everything’ve got to say.

    Just my opinion, it could bring your posts a little bit more interesting.

  1. No trackbacks yet.
Los comentarios están cerrados.
A %d blogueros les gusta esto: