2. 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.
3. 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
●
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.
●
5. 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)
7. 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.
8. 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.
9. 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.
10. 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>
<crosssiteconstraint>
<alloworigin>http://websocket.irontec.com:80</alloworigin>
<alloworigin>*</alloworigin>
</crosssiteconstraint>
</service>
11. 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.
12. 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
13. 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.
14. 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(quot;/topic/numbersquot;, $numero);
–
15. Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
tutorial.php
<?php
//Necesitamos la librería Stomp.php que hemos bajado
require_once(quot;./phpstomp/Stomp.phpquot;);
//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 quot;numbersquot;
$con>send(quot;/topic/numbersquot;, $numero);
sleep($time); //Hacemos una pausa
}
$con>disconnect(); //Desconectamos
?>
16. 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=quot;ByteSocket.jsquot;></script>
<script src=quot;StompClient.jsquot;></script>
<script src=quot;jquery1.3.2.min.jsquot;></script>
<script src=quot;tutorial.jsquot;></script>
17. Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
tutorial.html
Esto es el código que va dentro del <body>
●
<div style=quot;margin: 10px; width:300px; float: left; border:
solid #000 1px;quot;>
<input type=quot;textquot; size=quot;20quot; name=quot;textoquot; id=quot;textoquot; />
<input type=quot;buttonquot; name=quot;botonquot; id=quot;botonquot;
value=quot;Enviarquot; />
<div id=quot;divtextoquot;>
</div>
</div>
<div id=quot;divnumerosquot; style=quot;margin: 10px; float: left;
width:300px; border: solid #000 1px;quot;>
</div>
18. 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(quot;/topic/numbersquot;);
stomp.subscribe(quot;/topic/chatquot;);
}
//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”] == quot;/topic/numbersquot;) {
$(quot;#divnumerosquot;).append(quot;<p>El número es: quot;+body);
} else if (headers[“destination”] == quot;/topic/chatquot;) {
$(quot;#divtextoquot;).append(body);
}
}
19. 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(quot;ws://websocket.irontec.com:8001/activemqquot;,
{username:quot;quot;, password:quot;quot;});
$(quot;#botonquot;).bind('click',function(){
if ($(quot;#textoquot;).val() != quot;quot;) {
//Al dar a enviar, mandamos al canal /topic/chat lo
escrito en el input
stomp.send($(quot;#textoquot;).val(),quot;/topic/chatquot;);
$(quot;#textoquot;).val(quot;quot;);
}
}
});
20. 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.