Integración de Vert.x con AngularJS

Como vimos en un post anterior Vert.x es un framework que permite la creación de aplicaciones real time, escalables y de alto rendimiento. En este post nos focalizaremos en un ejemplo sencillo en el cuál integramos Vert.x con AngularJS para demostrar el poder de ambos frameworks.

El archivo al final del post consta de dos proyectos, angular-vertx-client y angular-vertx-server los cuales pueden ser importados en eclipse.

El proyecto angular-vertx-server (Vert.x) se puede correr con maven, ejecuntando primero el comando mvn install (es necesario tener instalado maven o tener el plugin de maven instalado en eclipse llamado m2e) y después el comando mvn vertx:runMod el cual levantará el modulo de Vert.x en una JVM, dicho módulo despliega un servidor web escuchando en el puerto 8080 y una Verticle (AngularjsVerticle), habilitando en el servidor web la configuración bridge (true) permite expandir el Vert.x event bus al browser/navegador (SockJS event bus bridge explanation and how to configure it in the web server module) posibilitando el intercambio de mensajes entre cliente y servidor.

El proyecto angular-vertx-client se puede correr con el comando npm start (es necesario tener instalado nodejs, npm y bower) el cual levantará el cliente en un servidor web en el puerto 8000.

Luego abriendo un navegador web escribimos http://localhost:8000/app, el cual puede soportar o no websockets, por ello es que utilizamos SockJS quien provee diferentes transportes entre el browser y el servidor, y eligiendo uno en tiempo de ejecución de acuerdo al browser y la capacidades de la red. Todo esto es transparente para el usuario, simplemente presenta una interfaz tipo WebSocket que funciona.

Real websocket support screenshot

websockets

Simulated websocket support screenshot

simulated-websockets

La interfaz es un input que nos permitirá enviar un mensaje al servidor y recibir en el cliente dos respuestas, una en la misma dirección en la cual enviamos el mensaje (angularjs.send) y otra en otra dirección distinta (angularjs.receive) para mostrar el poder del event bus de Vert.x

Los archivos controller.js (proyecto angular-vertx-client) y AngularjsVerticle.java (proyecto angular-vertx-server) son los que poseen la lógica de conexión entre el cliente y servidor, utilizando el Vert.x event bus (especificando las respectivas direcciones) para el intercambio de mensajes. El archivo AngularjsDeploy.java contiene el código para desplegar el modulo web io.vertx~mod-web-server (permite extender el event bus al navegador y especificar las direcciones a utilizar) como así también la Verticle encargada de subscribirse a la dirección angularjs.send y responder al cliente en ambas direcciones.

Link al archivo de ejemplo

Get in Touch