PushServer + Jetty + Primefaces + WebSockets = PrimePush

abril 10, 2012 6 comentarios

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

Categorías:glassfish, Java, JSF, Linux, NetBeans, Web 2.0 Etiquetas:

Los números de 2011

enero 1, 2012 Los comentarios están cerrados

Los duendes de las estadísticas de WordPress.com prepararon un reporte para el año 2011 de este blog.

Aqui es un extracto

La sala de conciertos de la Ópera de Sydney contiene 2.700 personas. Este blog fue visto cerca de 23.000 veces en 2011. Si fuese un concierto en la Ópera, se necesitarían alrededor de 9 actuaciones agotadas para que toda esa gente lo viera.

Haz click para ver el reporte completo.

Categorías:Uncategorized

Cambiar el text a un botón Ext-js

agosto 18, 2011 Los comentarios están cerrados

Después de buscar mucho por allí me encontré este código preciso para cambiar el nombre de un botón en ext-js, no hace falta más que poner:

Ext.getCmp('btnLogin').setText('Ingresar');

Muy útil cuando se hace aplicaciones dinámicas.

saludos

 

Christian Mora

@christmo

Categorías:web, Web 2.0 Etiquetas: , ,

Leer archivo properties desde el path donde se ejecuta el *.jar

abril 29, 2011 4 comentarios

Hola retomando las publicaciones por cuestiones de tiempo, he querido poner esto ya que es bastante útil al momento de realizar una aplicación que requiera parámetros de configuración que sean obtenidos de alguna fuente externa como un archivo de propiedades (*.properties), este método que se presenta más abajo hace la lectura de las propiedades de una archivo de este tipo *.properties que se encuentre junto al .*jar ejecutable de nuestra aplicación, esto quiere decir que los dos archivos tienen que estar dentro del mismo directorio. A mi me ha funcionado muy bien con este método lo que tendrían que hacer es ponerlo en una clase genérica y de allí si referenciarlo cada vez que sea necesario, este recibe el nombre del archivo de propiedades que queremos leer.

    public static Properties obtenerArchivoPropiedades(String arc) throws FileNotFoundException {
        Properties prop = null;
        try {
            CodeSource codeSource = funcionesUtilidad.class.getProtectionDomain().getCodeSource();
            File jarFile = new File(codeSource.getLocation().toURI().getPath());
            File jarDir = jarFile.getParentFile();

            if (jarDir != null && jarDir.isDirectory()) {
                File propFile = new File(jarDir, arc);
                prop = new Properties();
                prop.load(new BufferedReader(new FileReader(propFile.getAbsoluteFile())));
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(funcionesUtilidad.class.getName()).log(Level.SEVERE, null, ex);
        } catch (FileNotFoundException ex) {
            //System.err.println("No se encuentra el archivo: " + ex.getMessage());
            throw new FileNotFoundException("No se econtró el archivo de propiedades...");
        } catch (IOException ex) {
            Logger.getLogger(funcionesUtilidad.class.getName()).log(Level.SEVERE, null, ex);
        }
        return prop;
    }

Saludos

Christian Mora
@christmo

FLISOL Virtual 2011

marzo 29, 2011 1 comentario

Me he unido a unos amigos bloguers con la idea de formar La Comunidad Latinoamericana de Bloggers de Software Libre (CLABSOL), en ella se pretende a parte de compartir como comunidad distintos problemas y ayuda en distintos temas, difundir a todo el mundo virtual las ventajas de utilizar software libre de una forma que le puedan sacar el mayor provecho en sus actividades, para ello se ha planeado realizar este 9 de Abril el Festival Latinoamericano de Instalación de Software Libre más grande en Latinoamérica. Este año se desarrollará una versión Virtual del evento, el cual será emitido desde la plataforma Virtual 3D Second Life, así mismo por IRC y por Stream Multimedia.

El Installfest se dará inicio a partir de las 19:00 UTC con transmisión en vivo, sin embargo el canal de IRC y El entorno virtual 3D estarán abierto horas antes con diferentes tipos de entretenimientos.

Va ser un evento creado para dar a conocer las ventajas de utilizar software libre y discutir sobre algunos temas importantes que rondan este interesante mundo. La información relacionada al evento se encuentra disponible aquí http://flisol.info/FLISOL2011/flisolvirtual.

Flisol Virtual 2011

 

El stream (se activará en las siguientes horas):
El IRC:
- Servidor: irc.freenode.net
– Canal: #flisol-virtual

Aquí hay una imagen del lugar donde va ser este evento los esperamos allí para poder compartir conocimientos, percepciones y conceptos sobre el software libre y si te llama la atención este es el momento para que te unas y puedas aprender nuevas cosas.

Flisol virtual sitio

Nos vemos allí saludos…

Christian Mora
@christmo

Categorías:FLISOL, Linux, Software Libre

FLISOL Loja 2011

marzo 29, 2011 Los comentarios están cerrados

No te olvides el sábado 9 de abril, pasar por el hall del Municipio de Loja para que veas como es el mundo del software libre y como se esta desenvolviendo en nuestra ciudad te esperamos no faltes…

Por cierto en el Diario la Hora el domingo 3 de abril circulará un cupón con el cual se podrá retirar un cd de una distribución linux gratis. ;-)

Así que atentos a todos los premios y sorpresas que se brindarán ese día…

Saludos

Christian Mora
christmo

Categorías:Uncategorized Etiquetas:

Android

febrero 22, 2011 1 comentario
Categorías:Android, Java, Linux, Software Libre
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.