Camelone-2012 HTML5 WebSocket ActiveMQ/Camel

Develop Real Time HTML5 Applications using
WebSocket with Apache Camel & ActiveMQ

Camel One
16 of May - 2012
th

Charles Moulliard
Sr. Principal Solution Architect
Apache Committer

Copyright © 2010 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. A Progress Software Company
1

Speaker : Charles Moulliard

• Engineer in Agronomy & Master in Zoology
– 18 years of experience in IT world development
– Specialized in new technologies Web & Integration
– Project manager in Bank, Financial, Telco world
• Solution Architect at FuseSource
• Committer on projects : Apache ServiceMix, Apache
Karaf (PMC), Apache Camel, Fuse Fabric

Twitter : http://twitter.com/cmoulliard
LinkedIn : http://www.linkedin.com/in/charlesmoulliard
My blog : http://cmoulliard.blogspot.com
Slideshare : http://www.slideshare.net/cmoulliard
2 © 2012 FuseSource Corp. All rights reserved

Agenda

 Introduction
• History & HTML5
• Websocket revealed
 ActiveMQ
• Stomp and WebSocket
 Camel
• Camel-websocket
 Demo
 Conclusion


Agenda

 Introduction
• History & HTML5
 ActiveMQ
 Camel
• Camel-websocket
 Demo
 Conclusion


Real Time HTML5 Apps - Introduction

 History
• Started with Java Applet
and Shockwave player (199x)
• Followed by Macromedia
Shockwave, Adobe Flash,
Microsoft Silverlight
•Goal : Develop
client-server application
using HTTP/RMI protocol


 Evolution : Animation  Design Rich
Internet Applications (Intranet)
 Limitations about Technology based on
Web 1.0 concepts
• No push  require lot of HTTP requests
• RMI protocol  blocked by Firewall
• Exchanges mainly use XML - WebServices
• Compatibility between plugin(s) / browser
• Code should be signed (to access local
resources)


 Web 2.0 “Revolution”
• HTTPs requests

•Due to volume of data (video,
audio, text) exchanged
between “social networks”
• User becomes “actor” – “collaborating”

 New solutions have been imagined  Ajax
technology (2005), JSON instead of XML , REST


 JavaScript client uses (a)synchronous
communication with server : XML, JSON
 Ajax Reverse, but not really PUSH



 First Strategy Developed
 Cometd/Bayeux protocol
 Principe
• Use a persistent or long-lasting HTTP
connection with HTTP server
(streaming / polling)
• Events based to push data to the
browser
• Connection is keep alive till timeout



 Drawbacks :
• Browser (HTTP 1.x spec) only allows 2
connections with HTTP server  1 connection
will be kept alive for Cometd/Bayeux server
• Any new event requests a new HTTP call
• Bayeux communication protocol has not been
standardized through IETF, W3C
• Exchanges based on “Bayeux” message structure
(and not XML, JSON, …) – more complex to
handle
• One Way communication (server  client)


 2nd approach - WebSocket
 HTML5 (2009)
• ~= html + css + js
• Offline storage
• RealTime/Communication
• File/Hardware Access
• CSS 3, Graphics/Multimedia
• Supported by Tablet/Pc/Mobile
• More info :
http://slides.html5rocks.com/#landing-slide


 Websocket revealed
•Full-duplex single
socket connection
•HTTP request followed
by WebSocket data
Packets exchange
•ws:// and wss:// protocol
•Developed part of HTML5 initiative
•Specification rfc-6455 (Dec-2011) managed
by IETF Task Force


 What the browser sends 

Key which is base64 encoded
and uses as handshake
between client and server

Version of WebSocket used –
allow client and server to check if
they are compatible



 And what it receives

Response created by the server
(client key + GUI) signed SHA-1 and
encoded in base64



 Next Data frames are exchanged back and
forth between client and server through
TCP/IP connection

 Bytes or UTF-8 Text packets are supported
 Text is mainly used within JavaScript


 Sec-WebSocket-protocol
• Application-level protocol layered over the WebSocket
Protocol (chat, …)

 Sec-WebSocket-Extensions
• Initially sent from the client to the server, and then
subsequently sent from the server to the client,
•  To agree on a set of protocol-level extensions to use for
the duration of the connection



 Benefits
• Use same ports as HTTP and
HTTPS
•Bandwidth reduction
•No long polling process
•No more unnecessary traffic
•Standard based
•Security managed though Web
Server (SSL, Authentication)


Agenda

 Introduction
• History & HTML5
 ActiveMQ
 Camel
• Camel-websocket
 Demo
 Conclusion


Real Time HTML5 Apps - ActiveMQ

 Provide a websocket implementation using
ws:// transport connector
 Use Jetty WebSocket v7.5
 Is available since ActiveMQ 5.6
 Stomp is the wire format

 More info :
http://activemq.apache.org/websockets.html



HTTP(S)
Request/Response

Client WebSocket Stomp ActiveMQ
(Browser) Connector Converter (Backend)
TCP
(WebSocket)
ActiveMQ

1. HTTP Request (Upgrade)

2. HTTP Response

3. Stomp Subscribe
4. Message received
from Topic

5. Send WebSocket
Data



 Server side
• 1) Transport connector must be enable for websocket

Add ws:// transport connector

• 2) Topics/Queues will be used as channels to send (or
receive messages) Nothing special …



 Client side
• Need js client
A) stomp.js : Author Jeff Mesnil
– Code : https://github.com/jmesnil/stomp-websocket
– Doc : http://www.jmesnil.net/stomp-websocket/doc/
B) stomple : Author  Karl Krukow
– Code : https://github.com/krukow/stomple



 2) Create a WebSocket connection with
ActiveMQ using Stomp.js client
JQuery helps us to
display result in HTML
page

A. Create a client
to connect to the
server

Destination : /topic/stockQuoteTopic
url : ws://localhost:61614/stomp :

C. Establish connection using C. Wait response …
login, password



• 3) Subscribe to the topic (= channel)
Subscribe to the topic and listen on
messages

Parse JSON messages

• 4) When job is done  close connection
Close here



 Benefits
•Acts as real time data feed provider (topic)
•Infrastructure can be secured
– Web Server level (SSL, Authentication)
– ActiveMQ “security plugin”
•By combining Scalability/High Availability
features of ActiveMQ, feed are persisted,
distributed


Agenda

 Introduction
• History & HTML5
 ActiveMQ
 Camel
• Camel-websocket
 Demo
 Conclusion


Real Time HTML5 Apps - Camel

 Camel-websocket component - part of Camel
2.10 (http://camel.apache.org/websocket.html )
 Use Jetty WebServer v7.5
 Can be used to produce or consume
 Allow to send packets to multiple clients
(“sendToAll”) or to individual (=key)
 Should be combined with EIP patterns to
aggregate/split/enrich data and/or other
components (RSS, Atom, Twitter, JSon, …)


HTTP(S)
Request/Response

Client WebSocket Data JMS
(Browser) Component Format Component
TCP
(WebSocket)
Camel

ActiveMQ
(Topic)

1. HTTP Request (Upgrade)

2. HTTP Response

3. Connect to channel 4. Message consumed
From Topic
5. On Camel Exchange
received

6. Send WebSocket
Data


Real Time HTML5 Apps – Camel - Produce

 1) Create a Camel Route to produce
websocket packets  Http Client

Data consumed from a topic are send
to all the WebSocket clients
connected


Real Time HTML5 Apps – Camel - Consume

 1) or Create a Camel Route to consume -
produce websocket packets

WebSockets packets are received by
the websocket:chat-room endpoint

Packets send by client in the channel
“chat-room” are resend to all the
clients connected to the “chat-room”



 2) Client side - Will use WebSocket js script in
combination with jquery, jquery-ui, … to
communicate

First. Create a WebSocket connection

4 methods are available :
-onopen
-onmessage
-onerror
-onclose



 2) Parse messages
Every websocket “message” is consumed here

Message is parsed
using JSON (text 
Object)

Next we display the result in the HTML page



 2) Close connection
Close event can be used to stop
communication with server



 Benefits Provided by Camel framework 
• Camel acts as a mediation router between
“feed” providers and “feed” consumers
• Will facilitate “aggregation”, “enrichment”,
“filtering” of the feeds receive before to
distribute them
• Will provide the components required to
interconnect “platforms”
• Camel + ActiveMQ + Fabric = Scalability, High
Availability, Cloud of data Feed

Agenda

 Introduction
• History & HTML5
 ActiveMQ
 Camel
• Camel-websocket
 Demo
 Conclusion


Real Time HTML5 Apps - Demo

ActiveMQ – Stock
Trader
Demo 1



Camel – Chat
Room
Demo 2



Camel – News
Feed
Demo 3

Need help :
Send messages to
#camelone


Agenda

 Introduction
• History & HTML5
 ActiveMQ
 Camel
• Camel-websocket
 Demo
 Conclusion


Real Time HTML5 Apps - Conclusion

 ActiveMQ and Camel are ready
for “Real Time HTML5
Application Development”
 Provide best of the Fuse -
Apache technology for
integration (EIP and
components)
 Will help you to drive your
business (transport, tracking,…)
 Available for any device ….
Tablet/iPhone/Android/Pc/Mac

Any Questions?

 Twitter : @cmoulliard

 More info :
http://fusesource.com

 Demo code :
https://github.com/FuseByExample/websocket-activemq-c


Camelone-2012 HTML5 WebSocket ActiveMQ/Camel

More Related Content

What's hot

Similar to Camelone-2012 HTML5 WebSocket ActiveMQ/Camel

More from Charles Moulliard

Recently uploaded

Camelone-2012 HTML5 WebSocket ActiveMQ/Camel