Ope

nSpl

ice

DD

S

DDS on the WebQuick Recipes for Real-Time Web Applications

Angelo CORSARO, Ph.D.Chief Technology Officer OMG DDS Sig Co-Chair

PrismTechangelo.corsaro@prismtech.com

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

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

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

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

DDS and Real-Time Web App☐ DDS is used today to in a large class of mission and business critical

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

Ope

nSpl

ice

DD

S

Server Side Technologies

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Exposing DDS Data to Web Apps

☐ Several different approaches exist to expose DDS data to Web Apps

☐ WebSocket are the most natural approach, especially for applications requiring relatively low latency

☐ 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

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

From DDS to WebSocketsThere are several approaches that can be taken to provide DDS traffic over Web Sockets:

☐ The OpenSplice Gateway provides probably the most natural way of integrating DDS with WebSockets is through route definitions

☐ 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

Ope

nSpl

ice

DD

S

WebSockets

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

HTML5 WebSockets

☐ The WebSockets specification defines an API that enables web pages to use the WebSockets protocol for two-way communication with a remote host

☐ 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

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

WebSocket Protocol☐ The WebSocket protocol is designed to work well with the existing Web

infrastructure

☐ The WebSocket connection starts as an HTTP connection which then is upgraded by replacing the HTTP connection with the WebSocket 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

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

WebSocket API[Constructor(in DOMString url, optional in DOMString protocol)] interface WebSocket { readonly attribute DOMString URL; // ready state 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; // networking attribute Function onopen; attribute Function onmessage; attribute Function onclose; boolean send(in DOMString data); void close(); };

WebSocket implements EventTarget;

Ope

nSpl

ice

DD

S

DDS/WebSocketsOpenSplice Gateway

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

OpenSplice Gateway☐ Provides DDS applications with unprecedented

integration capabilities by supporting high performance format and content transformation, routing and QoS mediation

☐ Leverages Apache Camel integration framework and its support for over 80 connectors

☐ OpenSplice Gateway is the best choice for integrating DDS-interoperable applications with proprietary as well as standard-based messaging technologies, such as JMS and AMQP, as well as user applications leveraging Web standards such as  W3C Web Services, REST and HTML5 WebSockets

Supported Connectors Include:- JMS- REST- CometD- CFX- TCP & UDP Sockets

- HTTP- AMQP- XMPP- Hibernate- Custom

OpenSplice

Gateway

DDSI-RTPS

Custom

REST

JMS

XMPP

AMQP

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Architecturecamel-osplComponent

OpenSplice DDS

camel-ddsiComponent

JDDSI

OpenSpliceGateway

• Based on DataReader & DataWriter• Typed data

• No native or generated code• No marshalling(raw data buffer)

Camel DDS Processors

• DDSI demarshaller / marshaller• Data transformation• Dynamic Poll Enricher• QoS adaptations

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

1 // Define endpoints 2 val inEndpoint = 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() =10 from(inEndpoint) unmarshal("cdr") marshal() json() to(outEndpoint)11 }

WebSocket Integration

DDSDomain 0

Topic“Circle”

To JSON

☐ This example requires Camel 2.10

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S To POJO

1 // Define endpoints 2 val inEndpoint = 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() =10 from(inEndpoint) unmarshal() json() to(outEndpoint)11 }

WebSocket Integration

DDSDomain 0

Topic“Circle”

☐ This example requires Camel 2.10

Ope

nSpl

ice

DD

S

- Live Demo -

Ope

nSpl

ice

DD

S

DDS/WebSocketsPlay! Framework

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

The Play! Framework☐ Play! is a Web Application Framework

based on a lightweight, stateless, web-friendly architecture

☐ Play! features predictable and minimal resource consumption (CPU, memory, 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

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Play! and MVC Pattern

☐ Play! is based on the Model View Controller Pattern so to cleanly separate the presentation, control and business logic

☐ Play! uses routes to map incoming HTTP requests to actions. Actions are implemented as Java or Scala methods

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Anatomy of a Play! Application

☐ The organization of a Play! applications makes apparent its MVC approach

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Using WebSockets with Play! is very straight-forward as all it requires is to:

☐ Route incoming HTTP GET request to the controller that will establish a WebSocket Connection

☐ Use the Play! Iteratee API for asynchronously deal with incoming messages

WebSockets in Play!

# Home pageGET / controllers.Application.indexGET /ishapes controllers.Application.ishapes

def ishapes = WebSocket.using[String] { request => ... }

Ope

nSpl

ice

DD

S

Play!ng with iShapes

- Live Demo -

Ope

nSpl

ice

DD

S

Client Side Technologies

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Client Side Technologies

☐ JavaScript

☐ CoffeeScript

☐ Dart

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

JavaScript

☐ JavaScript is the most widely used client technology for web-applications

☐ The plus of JavaScript are the many powerful frameworks that exist, 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

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Coffescript

☐ 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

☐ 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/

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

CoffeScript Overview

square = (x) -> x * x square = function(x) { return x * x;};

# Functions

CoffeScript JavaScript

# Objectsmath = root: Math.sqrt square: square cube: (x) -> x * square x

math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); }};

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

CoffeScript Overview

# Array Comprehension

CoffeScript JavaScript

cubes = (math.cube num for num in list)

cubes = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results;})();

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Dart☐ Dart is a new class-based programming language for creating

structured web applications

☐ The main goal of Dart is that of making it simple and more productive to write large-scale web applications

☐ 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/

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Dart Overview: Type System

Optional Types☐ Dart allows a mixture of static

and dynamic type checking

☐ It is possible to only use static typing, dynamic typing or mixing the two

class Point { var x, y; Point(this.x, this.y); scale(factor) => new Point(x*factor, y*factor); distance() => Math.sqrt(x*x + y*y);}

main() { var a = new Point(2,3).scale(10); print(a.distance());}

class Point { num x, y; Point(num this.x, num this.y); Point scale(num factor) => 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());}

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Dart Overview: Type SystemGenerics☐ Dart provides support for

Generic Types☐ However, as Dart has optional

types, it is not mandatory to use generic type annotations

☐ 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

var names = new List<int>();names.addAll([1, 2, 3, 4, 5]);names.add(“foo”); // Fails in checked mode // (succeeds in production // mode).

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Dart Overview: OOP☐ Interfaces and Classes

provide a set of reusable and extensible building blocks.

☐ An interface defines a set of methods and constants

☐ A class can implement multiple interfaces, but it only inherits from a single superclass

interface Shape { num perimeter();}

class Rectangle implements Shape { final num height, width; Rectangle(num this.height, num this.width); num perimeter() => 2*height + 2*width; }

class Square extends Rectangle { Square(num size) : super(size, size);}

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Dart Overview: FP

☐ Dart provides some functional programming mechanisms such as lamdas and list comprehension

List<int> l = [1,2,3,4,5];

l.forEach((i) => print(i)); var l2 = l.map((i) => i*i);l2.forEach(print);

Ope

nSpl

ice

DD

S

Dart & DDS in Action

- Live Demo -

Ope

nSpl

ice

DD

S

Summing Up

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

Concluding Remarks☐ Web Technologies are becoming more and more relevant for any

kind of system

☐ Latest innovation on Web Technologies have made it possible to have real-time web applications

☐ 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

Copyrig

ht  2011,  PrismTech  –    A

ll  Rights  Reserved.

Ope

nSpl

ice

DD

S

References

¥Fastest growing JVM Language¥Open Source¥www.scala-lang.org

¥ #1 OMG DDS Implementation¥ Open Source¥ www.opensplice.org

OpenSplice | DDS¥Scala API for OpenSplice DDS¥Open Source¥github.com/kydos/escalier

Escalier

¥Simple C++ API for DDS¥Open Source¥github.com/kydos/simd-cxx

¥DDS-PSM-Java for OpenSplice DDS¥Open Source¥github.com/kydos/simd-java

¥ DDS-based Advanced Distributed Algorithms Toolkit

¥Open Source¥github.com/kydos/dada

Ope

nSpl

ice

DD

S ¥@prismtech

¥@acorsaro

¥youtube.com/opensplicetube ¥slideshare.net/angelo.corsaro

¥ crc@prismtech.com

¥sales@prismtech.com

¥opensplice.com ¥forums.opensplice.org

¥opensplice.org ¥opensplicedds@prismtech.com

:: Connect with Us ::

Ope

nSpl

ice

DD

S