PushServer + Jetty + Primefaces + WebSockets = PrimePush

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

Cambiar el text a un botón Ext-js

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

CLIENTE DE GOOGLE MAPS PARA LOS CENTROS DE LA UTPL UTILIZANDO REST, MYSQL Y NETBEANS 6.1

REST Y APLICACIONES WEB LIGERAS!…

La Transferencia de Estado Representacional (REST),  es una técnica de arquitectura software para sistemas hipermedia distribuidos como la World Wide Web, en la actualidad se utiliza para describir cualquier interfaz web simple que utiliza XML y HTTP.

Transacciones REST

Un concepto importante en REST es la existencia de recursos que pueden ser accedidos utilizando un Identificador Uniforme de Recurso (URI).  Para manipular estos recursos, los componentes de la red (clientes y servidores) se comunican a través de un interfaz estándar (HTTP) e intercambian representaciones de estos recursos (los ficheros que se descargan y se envían).

La petición puede ser tramitada por cualquier número de conectores (por ejemplo clientes, servidores, cachés, túneles, etc.) pero cada uno lo hace sin «ver más allá» de su propia petición (lo que se conoce como separación en capas, otra restricción de REST, que es un principio común con muchas otras partes de la arquitectura de redes y de la información). Así, una aplicación puede interactuar con un recurso conociendo por la URI y la acción requerida, no necesitando conocer si existen cachés, proxys, cortafuegos, túneles o cualquier otra cosa entre ella y el servidor que guarda la información. La aplicación, sin embargo, debe comprender el formato de la información devuelta (la representación), que es por lo general un documento HTML o XML, aunque también puede ser una imagen o cualquier otro contenido.

Mediante XML, nuestra aplicación hace el consumo del servicio del servidor de Google Maps , se le envía algunos parámetros y el servidor GOOGLE nos devolverá el respectivo mapa ubicando el lugar que se desea localizar.

Ahora que ya tenemos una ligera idea de lo que es REST, vamos ha detallar el proyecto que hemos realizado con esta tecnología:

El proyecto que se ha desarrollado hace uso de varias tecnologías y herramientas que están siendo utilizadas actualmente para el desarrollo de aplicaciones Web, grandes empresas han hecho uso de ellas teniendo un gran éxito en Internet tales como: eBay, Amazon.com, Yahoo, y muchas más; es por ello que hemos creído conveniente emplearlas en nuestro proyecto, el cual será de mucha importancia para nuestro desarrollo intelectual con lo cual nos hemos introducido en el manejo de herramientas Web 2.0. La elaboración de éste proyecto lo hemos conseguido utilizando el servicio de Google Maps, para obtener a partir del: país, provincia y cantón, la ubicación correspondiente a la ciudad en donde se encuentra ubicado cada centro universitario de la UTPL en todo el mundo, la información de cada uno de estos centros, se tiene almacenada en una base de datos elaborada en MySQL, de la cual se extraen los datos para complementarse con la ubicación en el mapa y poder dar una información correspondiente y adecuada de cada centro.

Las herramientas empleadas en el proyecto son:

Netbeans 6.1: en éste IDE, ya viene integrado el plugin para el trabajo con REST, pero es necesario actualizarla, ya que es una versión anterior la que viene integrada de la que se trabajó, en el primer vídeo se muestra como hacer esto.

MySql 5.0: se deberá cargar el scrip con los datos proporcionados en este proyecto para el optimo funcionamiento de la aplicación, en el primer vídeo se muestra como realizar esta operación .

Experiencias Comentarios y Problemas:

Es necesario que trabajen con la versión actualizada del REST (versión 0.7) en Netbeans, por lo que podrían tener problemas al realizar la conexión con el Google Maps, ya que podría cambiar la forma de realizar la conexión al trabajar con la versión anterior.

Es interesante trabajar con este tipo de aplicaciones, ya que con las herramientas que se cuenta actualmente se facilita mucho el trabajo en el desarrollo de éstas.

Vídeo demostrativo, se explica a detalle los pasos para hacer funcionar la aplicación correctamente, también se hace un análisis a a breves rasgos del contenido del proyecto para el uso de REST con nuestro proyecto de Netbeans, también se explica la elaboración del cliente y unión con el proyecto que hace de servidor de recursos mediante los Stubs de Netbeans.

Este Video se muestra en si el resultado de todo el proyecto, la aplicación 100% funcional.

Aquí tienes las fuentes de consulta utilizadas para hacer este proyecto: http://del.icio.us/christmo/rest

Download Código fuente de la aplicación:

Google Maps Centros UTPL

Yo también estoy en Plurk

Hola amigo siguiendo la materia de redes sociales colaborativas tuve el agrado de conocer esta maravillosa herramienta de microbloggin, y porque es tan especial, cansados de la rutina de Twitter, que sin duda tiene una interfaz fea a mi parecer, aparece plurk completamente dinámico e interactivo, muy amigable al usuario, gracias a usar AJAX, Lo primero que nos llamará la atención de Plurk es que su línea de tiempos es horizontal, al estilo de los servicios de lifestream gráficos. Otra cosa cosa que diferencia al resto de servicios de microblogging es que al principio tendremos que seleccionar una acción de una lista desplegable para después continuarla con nuestra frase de hasta 140 caracteres, donde también podemos añadir algunos emoticones.

Como en cualquier red social de las que nos encontramos últimamente, tenemos nuestra lista de amigos y nuestra lista de fans, ésta compuesta de Plurkeros que nos siguen pero que aún no los hemos añadido como amigos.

Nuestras actualizaciones pueden ser públicas, para determinados amigos o privadas, y en todo caso nuestra actividad nos dará puntos en nuestro karma. También conseguiremos puntos si reclutamos a nuestros amigos desde diferentes formas, para que se unan a Purk.

Y para que sirven los puntos y que suba el karma, hay diferentes niveles de karma mientras vamos aportando con plurk nuestro carma sube y con ello iremos ganando nuevos emoticones para porderlos utilizar en nuestros post.

Pero eso no es todo, podemos compartir enlaces, que podremos ver en una ventana flotante dentro de la misma página sus contenidos. Así, podemos publicar enlaces a vídeos de YouTube o a imágenes de Flickr, entre otros servicios, también podemos personalizar nuestro espacio, nuestra línea de tiempos, podemos usarlo vía mensajería, disponer de widget, etc. Yo ya soy adictivo a el…

Saludos y se los recomiendo…