The Web is nowadays inextricably intertwined with our lives and our systems. The ability for a system to interact with web-based applications is not anymore a feature — it is the thin line that separates démodé from contemporary! DDS-based systems are not exception to this rule and as a consequence more and more people are trying bring DDS data to web applications. In a technology rich environment such as the web there is no lack of choice when it comes to selecting the set of tools and technologies to integrate DDS and Web applications. Options are Web Services, REST, REST Frameworks such as CometD, Silverlight, WebSockets, DART, the Play! Framework etc. To help shed light, give insight and factually show that the DDS/Web integration is indeed easily achievable, this presentation will first provide an overview of the Web technologies that are most suited for integrating Web- and DDS-applications, such as plain REST, CometD, WebSockets, Google Dart, and Play! Then it will demonstrate how the integration can be achieved with just a few lines of code by using the OpenSplice Gateway.

1. DDS on the Web
Quick Recipes for Real-Time Web Applications
OpenSplice DDS
Angelo CORSARO, Ph.D.
Chief Technology Officer
OMG DDS Sig Co-Chair
PrismTech
angelo.corsaro@prismtech.com

2. The Rise of the Real-Time Web
☐ It can be argued that Browsers are becoming today the Virtual
Machine of the Web -- as opposed to simply a rendering engine
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ The introduction of HTML5 and related standards, such as
WebSockets, has furthered this trend providing an increasingly
compelling platform for the development of device/browser
OpenSplice DDS
independent applications
☐ In addition, new standards like WebSockets are making it possible
for web application to send and receive data by completely
bypassing HTTP
☐ These innovations, are making it possible to have highly-interactive
real-time web applications that can push data very efficiently

3. DDS and Real-Time Web App
DDS is used today to in a large class of mission and business critical
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐
applications, such as Air Traffic Control and Management, SCADA,
Smart Grid, Smart Cities, Trading, etc., to share data in real-time
Many of the systems using DDS today increasingly need to expose
OpenSplice DDS
☐
application to mobile devices, thus entering on the Native-App vs.
Web-App dilemma
☐ The introduction of HTML5 and WebSockets makes it possible today
to push real-time DDS traffic to a WebBrowser and vice-versa

4. Server Side Technologies
OpenSplice DDS

5. Exposing DDS Data to Web Apps
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ Several different approaches exist to expose DDS data to Web Apps
☐ WebSocket are the most natural approach, especially for
applications requiring relatively low latency
OpenSplice DDS
☐ Polling or HTTP Streaming frameworks, such as CometD, can also be
used, but are less efficient both in terms of throughput as well as in
terms of latency
☐ Here we focus on WebSockets

6. From DDS to WebSockets
There are several approaches that can be taken to provide DDS traffic over
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
Web Sockets:
☐ The OpenSplice Gateway provides probably the most natural way of
integrating DDS with WebSockets is through route definitions
OpenSplice DDS
☐ The Play! Framework is probably the best choice for those that along using
WebSockets and DDS want to use DDS as a back-end technology (e.g. for
scale-out, caching, etc.)
☐ Netty is yet another possibility, but the one that requires you to do the most
work in term of integrating DDS with WebSockets. At the same time gives
you complete control

7. OpenSplice DDS
WebSockets

8. HTML5 WebSockets
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ The WebSockets specification defines an API that enables web
pages to use the WebSockets protocol for two-way
communication with a remote host
OpenSplice DDS
☐ WebSockets greatly reduce network traffic and latency compared
to HTTP polling and long-polling techniques commonly used to
simulate a full-duplex connection by maintaining two connections
☐ WebSockets are capable of traversing firewalls and proxies

9. WebSocket Protocol
☐ The WebSocket protocol is designed to work well with the existing Web
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
infrastructure
☐ The WebSocket connection starts as an HTTP connection which then is
upgraded by replacing the HTTP connection with the WebSocket
OpenSplice DDS
connection over the same underlying TCP/IP connection
☐ Once connected, WebSocket data frames can be sent back and
forth between the client and the server in full-duplex mode
☐ Text and Binary frames are supported. The data is framed with just two
bytes

10. WebSocket API
[Constructor(in DOMString url, optional in DOMString protocol)]
interface WebSocket {
readonly attribute DOMString URL;
// ready state
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
OpenSplice DDS
// networking
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMString data);
void close();
};
WebSocket implements EventTarget;

11. DDS/WebSockets
OpenSplice Gateway
OpenSplice DDS

12. OpenSplice Gateway
☐ Provides DDS applications with unprecedented JMS
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
integration capabilities by supporting high
performance format and content
XM
ST
PP
RE
transformation, routing and QoS mediation OpenSplice
Gateway
Leverages Apache Camel integration
P
Cu
☐
AMQ
sto
framework and its support for over 80
OpenSplice DDS
m
connectors
DDSI-RTPS
☐ OpenSplice Gateway is the best choice for
integrating DDS-interoperable applications with
proprietary as well as standard-based Supported Connectors Include:
messaging technologies, such as JMS and - JMS - HTTP
AMQP, as well as user applications leveraging - REST - AMQP
- CometD - XMPP
Web standards such as W3C Web Services, - CFX - Hibernate
REST and HTML5 WebSockets - TCP & UDP Sockets - Custom

13. Architecture
OpenSplice
Gateway
Based on camel-ospl
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
•
DataReader & Component
DataWriter
•
Typed data OpenSplice DDS
•
No native or camel-ddsi
generated code Component
•
No marshalling
OpenSplice DDS
(raw data buffer) JDDSI
Camel DDS Processors
•
DDSI demarshaller /
marshaller
•
Data transformation
•
Dynamic Poll Enricher
•
QoS adaptations

14. WebSocket Integration
1 // Define endpoints
2 val inEndpoint =
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
3 "ddsi:"+ inTopic +":"+ inDomain +"/" + shapeType
4 val outEndpoint =
5 "websocket://"+inTopic.toLowerCase + "?sendToAll=true"
6
7 // Define a Route using the Scala DSL
8 val shapesRoute = new RouteBuilder {
9 override def configure() =
To JSON
OpenSplice DDS
10 from(inEndpoint) unmarshal("cdr") marshal() json() to(outEndpoint)
11 }
Topic
“Circle”
☐ This example requires Camel 2.10 DDS
Domain 0

15. WebSocket Integration
1 // Define endpoints
2 val inEndpoint =
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
3 "websocket://"+inTopic.toLowerCase
4 val outEndpoint =
5 "ddsi:"+ inTopic +":"+ inDomain +"/" + shapeType
6
7 // Define a Route using the Scala DSL
8 val shapesRoute = new RouteBuilder {
9 override def configure() =
To POJO
OpenSplice DDS
10 from(inEndpoint) unmarshal() json() to(outEndpoint)
11 }
Topic
“Circle”
☐ This example requires Camel 2.10 DDS
Domain 0

16. OpenSplice DDS
- Live Demo -

17. DDS/WebSockets
Play! Framework
OpenSplice DDS

18. The Play! Framework
☐ Play! is a Web Application Framework
based on a lightweight, stateless, web-
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
friendly architecture
☐ Play! features predictable and minimal
resource consumption (CPU, memory,
OpenSplice DDS
threads) for highly-scalable applications
thanks to its reactive model, based on
Iteratee IO
☐ The Play! Framework:
☐ Supports asynchronous programming
☐ Focuses on Type Safety
☐ Native support for Java and Scala
☐ Support for HTML5 and WebSocket

19. Play! and MVC Pattern
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ Play! is based on the Model View Controller Pattern so to cleanly
separate the presentation, control and business logic
OpenSplice DDS
☐ Play! uses routes to map incoming HTTP requests to actions. Actions
are implemented as Java or Scala methods

20. Anatomy of a Play! Application
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ The organization of a
Play! applications
OpenSplice DDS
makes apparent its
MVC approach

21. WebSockets in Play!
Using WebSockets with Play! is very straight-forward as all it
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
requires is to:
☐ Route incoming HTTP GET request to the controller that will
establish a WebSocket Connection
OpenSplice DDS
# Home page
GET / controllers.Application.index
GET /ishapes controllers.Application.ishapes
☐ Use the Play! Iteratee API for asynchronously deal with
incoming messages
def ishapes = WebSocket.using[String] { request => ... }

22. Play!ng with iShapes
OpenSplice DDS
- Live Demo -

23. Client Side Technologies
OpenSplice DDS

24. OpenSplice DDS
☐
☐
☐
Dart
JavaScript
CoffeeScript
Client Side Technologies
Copyright
2011,
PrismTech
–
All
Rights
Reserved.

25. JavaScript
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ JavaScript is the most widely used client technology for web-
applications
☐ The plus of JavaScript are the many powerful frameworks that exist,
OpenSplice DDS
such as DOJO, JQuery, etc/
☐ The minus is the programming language itself, which is verbose and
lacking few constructs for facilitating large scale software
development

26. Coffescript
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ CoffeeScript is a is a relatively little language that improves
JavaScript usability and introduces some functional programming
mechanism, e.g. lambdas and comprehension, in a concise and
elegant manners
OpenSplice DDS
☐ CoffeeScript compiles to JavaScript and the compiled JavaScript is
readable and pretty-printed, passes through JavaScript Lint
without warnings, will work in every JavaScript runtime, and tends
to run as fast or faster than the equivalent handwritten JavaScript.
http://coffeescript.org/

27. CoffeScript Overview
CoffeScript JavaScript
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
square = (x) -> x * x square = function(x) {
# Functions
return x * x;
};
OpenSplice DDS
math = math = {
# Objects root: Math.sqrt root: Math.sqrt,
square: square square: square,
cube: (x) -> x * square x cube: function(x) {
return x * square(x);
}
};

28. CoffeScript Overview
CoffeScript JavaScript
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
cubes = (function() {
# Array cubes = var _i, _len, _results;
Comprehension (math.cube num for num in list) _results = [];
for (_i = 0,
_len = list.length;
OpenSplice DDS
_i < _len; _i++) {
num = list[_i];
_results.push(math.cube(num));
}
return _results;
})();

29. Dart
Dart is a new class-based programming language for creating
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐
structured web applications
☐ The main goal of Dart is that of making it simple and more
productive to write large-scale web applications
OpenSplice DDS
☐ Dart code can be run natively on some browsers (like Chromium), it
can be compiled to JavaScript, or it can be run standalone on the
DartVM
http://www.dartlang.org/

30. Dart Overview: Type System
class Point {
var x, y;
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
Point(this.x, this.y);
scale(factor) => new Point(x*factor, y*factor);
Optional Types distance() => Math.sqrt(x*x + y*y);
}
☐ Dart allows a mixture of static main() {
var a = new Point(2,3).scale(10);
and dynamic type checking print(a.distance());
OpenSplice DDS
}
☐ It is possible to only use static class Point {
num x, y;
typing, dynamic typing or Point(num this.x, num this.y);
Point scale(num factor) =>
mixing the two new Point(x*factor, y*factor);
num distance() => Math.sqrt(x*x + y*y);
}
void main() {
Point a = new Point(2,3).scale(10);
print(a.distance());
}

31. Dart Overview: Type System
Generics
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ Dart provides support for
Generic Types
☐ However, as Dart has optional
var names = new List<int>();
types, it is not mandatory to names.addAll([1, 2, 3, 4, 5]);
OpenSplice DDS
names.add(“foo”); // Fails in checked mode
use generic type annotations // (succeeds in production
// mode).
☐ At the same time taking
advantage of the Generic
support is useful to produce
code whose intent is clearer
and whose types error can be
easily checked with tools

32. Dart Overview: OOP
☐ Interfaces and Classes
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
provide a set of reusable interface Shape {
and extensible building }
num perimeter();
blocks.
class Rectangle implements Shape {
OpenSplice DDS
final num height, width;
☐ An interface defines a set of Rectangle(num this.height, num this.width);
num perimeter() => 2*height + 2*width;
methods and constants }
class Square extends Rectangle {
☐ A class can implement }
Square(num size) : super(size, size);
multiple interfaces, but it
only inherits from a single
superclass

33. Dart Overview: FP
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
List<int> l = [1,2,3,4,5];
☐ Dart provides some functional l.forEach((i) => print(i));
OpenSplice DDS
programming mechanisms such
var l2 = l.map((i) => i*i);
as lamdas and list comprehension l2.forEach(print);

34. Dart & DDS in Action
OpenSplice DDS
- Live Demo -

35. OpenSplice DDS
Summing Up

36. Concluding Remarks
☐ Web Technologies are becoming more and more relevant for any
kind of system
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
☐ Latest innovation on Web Technologies have made it possible to
have real-time web applications
OpenSplice DDS
☐ Existing DDS applications can easily expose their data to Real-Time
Web Applications taking advantage of several powerful
technologies such as the OpenSplice Gateway and the Play!
Framework
☐ Lots of innovation in Client Technologies to make it easier to develop
web-applications that look, feel and perform as native applications

37. References
Copyright
2011,
PrismTech
–
All
Rights
Reserved.
OpenSplice | DDS Escalier
¥ #1 OMG DDS Implementation ¥ Fastest growing JVM Language ¥ Scala API for OpenSplice DDS
¥ Open Source ¥ Open Source ¥ Open Source
¥ www.opensplice.org ¥ www.scala-lang.org ¥ github.com/kydos/escalier
OpenSplice DDS
¥ Simple C++ API for DDS ¥ DDS-PSM-Java for OpenSplice DDS ¥ DDS-based Advanced Distributed
¥ Open Source ¥ Open Source Algorithms Toolkit
¥ github.com/kydos/simd-cxx ¥ github.com/kydos/simd-java ¥ Open Source
¥ github.com/kydos/dada

38. :: Connect with Us ::
¥opensplice.com ¥forums.opensplice.org
¥@acorsaro
¥opensplice.org ¥opensplicedds@prismtech.com ¥@prismtech
OpenSplice DDS
¥ crc@prismtech.com
¥sales@prismtech.com
¥youtube.com/opensplicetube ¥slideshare.net/angelo.corsaro

39. OpenSplice DDS