Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
Kaazing Gateway + Apache ActiveMQ + 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.

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
¿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
●

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
¿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.
●

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
¿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)

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
Diagrama

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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.

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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.

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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.

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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>
<cross­site­constraint>
<allow­origin>http://websocket.irontec.com:80</allow­origin>
<allow­origin>*</allow­origin>
</cross­site­constraint>
</service>

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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.

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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.

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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);
–

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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 enviando
while (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
?>

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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=\"jquery­1.3.2.min.js\"></script>
<script src=\"tutorial.js\"></script>

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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\" />
&nbsp;<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>

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
tutorial.js
$(document).ready(function(){
var stomp; //Variable donde vamos a guardar el objeto Stomp
stomp = new StompClient(); //Creamos el objeto Stomp
stomp.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 canales
stomp.subscribe(\"/topic/numbers\");
stomp.subscribe(\"/topic/chat\");
}
//Cuando se reciban datos de la conexión
stomp.onmessage = function(headers, body) {
//En body se guardan los datos que se reciben
//En headers[“destination”] indica a que canal se han
mandado los datos
if (headers[“destination”] == \"/topic/numbers\") {
$(\"#divnumeros\").append(\"<p>El número es: \"+body);
} else if (headers[“destination”] == \"/topic/chat\") {
$(\"#divtexto\").append(body);
}
}

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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 input
stomp.send($(\"#texto\").val(),\"/topic/chat\");
$(\"#texto\").val(\"\");
}
}
});

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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.

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
Licencia Copyleft
Copyright

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
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 <david@irontec.com>
Copyright © 2009 Irontec <contacto@irontec.com>
Se permite la copia, modificación, distribución, uso
comercial y realización de la obra, siempre y cuando se
reconozca la autoría de la misma, a no sea ser que se
obtenga permiso expreso del autor. El autor no permite
distribuir obras derivadas a esta.
Esta nota no es la licencia completa de la obra, sino
una traducción de la nota orientativa de la licencia
original completa (jurídicamente válida).