Kaazing Gateway + Apache Active MQ + Javascript + Stomp

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp



¿Qué es Kaazing Gateway?

● Es un open source HTML 5 WebSocket Server.● Proporciona comunicación full-duplex entre el

navegador y cualquier servicio back-end basado en TCP.

● Si el navegador no soporta WebSocket, la conexión entre los navegadores y Kaazing Portal Server es emulado con dos conexiones HTTP.

● Soporta varios protocolos, entre ellos STOMP, que permite la comunicación con populares implementaciones de JMS como Apache ActiveMQ.


¿Qué es Apache ActiveMQ?

● Es un Message Broker open-source.● Soporte de varios lenguajes de cliente (Java, C, C++,

C#, Ruby, Perl, Python, PHP)● Soporte de varios protocolos (OpenWire, REST, Stomp,

WS Notification, XMPP, AMQP)● Total soporte de JMS 1.1 y J2EE 1.4


¿Qué es JMS?

● JMS es la solución creada por SUN para el uso de colas de mensajes.

● Dos modelos de la API JMS:– Modelo Punto a Punto (point to point): Hay dos clientes, uno

que envía el mensaje y otro que lo recibe. El mensaje siempre llega. Si el receptor no esta disponible para recibir el mensaje, el mensaje es enviado y se guarda en cola. Cuando entre el receptor, recibe el mensaje.

– Modelo Publicador/Suscriptor (Publish/Subscribe): Hay varios clientes. Los que publican temas o eventos y los que ven estos tópicos.

● Son clientes los que envían como los que reciben.


¿Qué es STOMP?

● Streaming Text Orientated Messaging Protocol● Proporciona un formato para que un cliente Stomp

pueda comunicarse con cualquier Stomp Message Broker (Apache ActiveMQ).

● Clientes Stomp (C, C++, C# and .Net, Delphi, Flash, Java o Gozirra, Perl, PHP, Pike, Python, Ruby and Rails, Smalltalk)

● Stomp Brokers (Apache ActiveMQ, StompConnect, StompServer, Gozirra)


Diagrama


Diagrama

● Servidor Web Apache sirve una página HTML (con PHP también puede ser) al cliente.

● El cliente se conecta mediante la librería de Stomp al servidor Kaazing Gateway, y se subscribe a un canal (o varios)

● El servidor Kaazing Gateway crea un proxy TCP con el servidor ActiveMQ.

● El cliente envía datos a un canal (mediante Javascript) a Kaazing. Kaazing lo reenvía a ActiveMQ. ActiveMQ envía esos datos a todos los clientes conectados al canal, incluido Kaazing. Kaazing lo manda a todos los conectados, incluido el cliente que lo ha mandado.


Diagrama

● En el servidor web Apache, hay un script en PHP corriendo continuamente.

● Está conectado al servidor ActiveMQ. Manda datos al servidor y a un canal específico. No necesita de Kaazing para mandar datos vía Stomp.

● ActiveMQ recoge los datos y los manda a todos los clientes conectados a ese canal, incluido Kaazing.

● Kaazing recoge los datos y los reenvía a todos los clientes conectados a ese canal mediante la librería de JavaScript.


Instalación de Kaazing y ActiveMQ

● Descargamos las últimas versiones de:● http://www.kaazing.org/confluence/display/KAAZING/Download● http://activemq.apache.org/download.html

● Descomprimimos los archivos. En Apache ActiveMQ no cambiamos nada, lo dejamos tal como viene.

● Editar el fichero conf/gateway-config.xml de Kaazing.● Entre las etiquetas <gateway-config> y </gateway-

config> solo nos interesa un proxy a una dirección tcp para conectarnos con el Apache ActiveMQ usando el protocolo STOMP.

http://www.kaazing.org/confluence/display/KAAZING/Download

http://activemq.apache.org/download.html


Configuración de gateway-config.xml

● Todo lo que esté entre <gateway-config> lo comentamos y ponemos lo siguiente.<! Proxy to STOMP server ><service><! ws:// scheme refers to WebSocket ><! wss:// scheme refers to WebSocket (secure) ><accept>ws://websocket.irontec.com:8001/activemq</accept><accept>wss://websocket.irontec.com:9001/activemq</accept>

<type>proxy</type><properties><connect>tcp://websocket.irontec.com:61613</connect></properties>

<crosssiteconstraint><alloworigin>http://websocket.irontec.com:80</alloworigin><alloworigin>*</alloworigin></crosssiteconstraint></service>


Configuración de gateway-config.xml

● <accept>● ponemos las conexiones que vamos a aceptar para este servicio.

Son de tipo ws (web socket) y wss (web socket secure). Cuando un cliente se quiera conectar mediante JavaScript tendrá que hacerlo a esta dirección.

● <connect>● ponemos la dirección del servidor Apache ActiveMQ, y el puerto

donde va a escuchar el protocolo STOMP, por defecto en el 61613.

● <allow-origin>● hay que indicar desde donde permitimos acceder al servicio. Si

ponemos *, aceptamos las peticiones desde cualquier sitio. Si queremos restringirlo solo al nuestro, ponemos su dirección. Se pueden poner varios.


Activar los servicios

● Entramos en la carpeta bin dentro del Apache ActiveMQ y ejecutamos ./activemq.

● Entramos en la carpeta bin dentro del Kaazing Gateway y ejecutamos ./gateway-start


Librerías JS y PHP

● Una vez que ya tenemos los dos servicios corriendo, nos queda programar la parte del cliente. Vamos a usar unas librerías JS que vienen con el Kaazing, que se encargarán de emular los WebSocket, para poder conectarnos vía JavaScript al servidor. Dentro de web/html5 cogemos la libreria ByteSocket.js y de web/protocol cogemos StompClient.js. Con estas dos, ya nos vale para conectarnos con JavaScript.

● También vamos a necesitar una librería de PHP, que vamos a usar para mandar datos. Para bajarla, vamos a http://code.google.com/p/stompcli/downloads/list.


tutorial.php

● En primer lugar hacemos el script PHP. Vamos a hacer que el script envíe cada cierto tiempo (entre 1 y 5 segundos, de forma aleatoria) un número entre 1 y 100.

● Creamos un objeto Stomp conectándonos a tcp://websocket.irontec.com:61613 (que es donde Apache ActiveMQ va a escuchar el protocolo Stomp)

● Enviamos datos a un canal de esa dirección tcp (vamos a usar el canal /topic/test)– $con->send("/topic/numbers", $numero);


tutorial.php

<?php//Necesitamos la librería Stomp.php que hemos bajado require_once("./phpstomp/Stomp.php");//Creamos un objeto Stomp, conectandonos al servidor que va a escuchar el Stomp$con = new Stomp('tcp://websocket.irontec.com:61613');$con>connect(); //Hacemos la conexión//Un bucle infinito si queremos que esté siempre enviandowhile (true) {

$time = rand(1,5); //Tiempo aleatorio de espera$numero = rand(1,100); //Número a enviar//Enviamos el numero al canal "numbers"$con>send("/topic/numbers", $numero);sleep($time); //Hacemos una pausa

}$con>disconnect(); //Desconectamos?>


tutorial.html

● Vamos con el html. Ponemos un input para hacer un mini chat, a la vez que se reciben los números del php anterior. En la página html solo vamos a tener incluidos los archivos js que nos hacen falta (ByteSocket y StompClient para los websockets, JQuery, y tutorial.js donde meteremos nuestro código para recibir y mandar datos a través de Stomp.<script src="ByteSocket.js"></script><script src="StompClient.js"></script><script src="jquery1.3.2.min.js"></script><script src="tutorial.js"></script>


tutorial.html

● Esto es el código que va dentro del <body><div style="margin: 10px; width:300px; float: left; border: solid #000 1px;"><input type="text" size="20" name="texto" id="texto" /> <input type="button" name="boton" id="boton" value="Enviar" /><div id="divtexto"></div></div><div id="divnumeros" style="margin: 10px; float: left; width:300px; border: solid #000 1px;"></div>


tutorial.js

$(document).ready(function(){var stomp; //Variable donde vamos a guardar el objeto Stompstomp = new StompClient(); //Creamos el objeto Stompstomp.onopen = function(headers) {

//Cuando se conecte al servidor Kaazing, nos subscribimos al canal /topic/chat y /topic/numbers, para recibir los datos que se envíen a esos canalesstomp.subscribe("/topic/numbers");stomp.subscribe("/topic/chat");

}//Cuando se reciban datos de la conexiónstomp.onmessage = function(headers, body) {

//En body se guardan los datos que se reciben//En headers[“destination”] indica a que canal se han mandado los datosif (headers[“destination”] == "/topic/numbers") {$("#divnumeros").append("<p>El número es: "+body);} else if (headers[“destination”] == "/topic/chat") {$("#divtexto").append(body);}

}


tutorial.js

stomp.onclosed = function(headers) {//Si se desconecta, podemos meter código para reconectar de nuevo o sacar un alert

}//Hacemos la conexión al servidor Kaazing. Username y password lo dejamos vacio.stomp.connect("ws://websocket.irontec.com:8001/activemq", {username:"", password:""});

$("#boton").bind('click',function(){if ($("#texto").val() != "") {

//Al dar a enviar, mandamos al canal /topic/chat lo escrito en el inputstomp.send($("#texto").val(),"/topic/chat");$("#texto").val("");

}}});


Ejecutando el tutorial

● Ya tenemos los 3 archivos. Abrimos tutorial.html desde el navegador http://websocket.irontec.com/tutorial.html desde 2 ordenadores (o 2 navegadores) para probar el mini chat.

● Si escribimos en el input y damos a enviar, se ira añadiendo el texto debajo del input, en todos los navegadores donde tenga abierta la página.

● Para mandar los datos desde tutorial.php lo ejecutamos desde consola con “php tutorial.php” e irán apareciendo los números a la derecha del mini chat.

http://websocket.irontec.com/tutorial.html


Licencia Copyleft

Copyright


Licencia Copyleft

● Este documento está protegido bajo la licencia Reconocimiento-SinObraDerivada 2.1 España de Creative Common (http://creativecommons.org/licenses/by-nd/2.1/es/)David Lores <[email protected]>Copyright © 2009 Irontec <[email protected]>

Se permite la copia, modificación, distribución, usocomercial y realización de la obra, siempre y cuando sereconozca la autoría de la misma, a no sea ser que seobtenga permiso expreso del autor. El autor no permitedistribuir obras derivadas a esta.

Esta nota no es la licencia completa de la obra, sinouna traducción de la nota orientativa de la licenciaoriginal completa (jurídicamente válida).

Kaazing Gateway + Apache Active MQ + Javascript + Stomp

Technology