Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                        ¿Qué es Kaazing Gateway?

...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                        ¿Qué es Apache ActiveMQ?

...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                             ¿Qué ...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                    ¿Qué es STOMP?...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                           Diagrama
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                              Diag...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                              Diag...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                    Instalación de Kaazing y Activ...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                Configuración de gateway-config.xm...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                   Configuración de gateway-config...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                  Activar los serv...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                    Librerías JS y...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                             tutor...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                        tutorial.p...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                            tutori...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                            tutori...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                           tutoria...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                           tutoria...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                Ejecutando el tuto...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                  Licencia Copyleft




      Copy...
Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp

                                                      Licencia Cop...
Upcoming SlideShare
Loading in …5
×

Kaazing Gateway + Apache Active MQ + Javascript + Stomp

3,717
-1

Published on

Integración de Kaazing, ActiveMQ, Javascript mediante STOMP, para evitar pooling en entornos web.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,717
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
75
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Kaazing Gateway + Apache Active MQ + Javascript + Stomp

  1. 1. Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp
  2. 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. 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. 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. 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)
  6. 6. Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp Diagrama
  7. 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. 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. 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. 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> <cross­site­constraint> <allow­origin>http://websocket.irontec.com:80</allow­origin> <allow­origin>*</allow­origin> </cross­site­constraint> </service>
  11. 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. 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. 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. 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. 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. 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;jquery­1.3.2.min.jsquot;></script> <script src=quot;tutorial.jsquot;></script>
  17. 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; /> &nbsp;<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. 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. 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. 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.
  21. 21. Kaazing Gateway + Apache ActiveMQ + JavaScript + Stomp Licencia Copyleft Copyright
  22. 22. 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).

×