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.


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(quot;/topic/numbersquot;, $numero);
–


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
?>


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>


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>


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);
}
}


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;);
}
}
});


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.


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 <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).

Kaazing Gateway + Apache Active MQ + Javascript + Stomp

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Kaazing Gateway + Apache Active MQ + Javascript + Stomp

Similar a Kaazing Gateway + Apache Active MQ + Javascript + Stomp (20)

Más de Irontec

Más de Irontec (20)

Último

Último (15)

Kaazing Gateway + Apache Active MQ + Javascript + Stomp