DDS Web Programming with dscript

OpenSplice

DDS

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

[email protected]

DDS Web Programming with dscript

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

Motivation

☐ WebSockets have made it possible to efficiently push data to the browser, yet provide a low level abstraction

☐ More and more “Real-Time Web” Applications need to produce as well as consume real-time data streams

☐ Wouldn’t it be nice to have a DDS-like abstraction in JavaScript?☐ i.e. to do pub/sub from JavaScript Applications

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

Motivation

☐ WebSockets have made it possible to efficiently push data to the browser, yet provide a low level abstraction

☐ More and more “Real-Time Web” Applications need to produce as well as consume real-time data streams

☐ Wouldn’t be nice to have a DDS-like abstraction in JavaScript to feed Real-Time Web Applications with data coming from a DDS System?

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

Motivation

☐ WebSockets have made it possible to efficiently push data to the browser, yet provide a low level abstraction

☐ More and more “Real-Time Web” Applications need to display real-time data streams

☐ In a sense, wouldn’t it be nice to be able to do Pub/Sub with a DDS-like abstraction between Web Applications and DDS Applications w/o any barriers???

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

dscriptJavaScript/CoffeeScript framework

that extends the DDS abstraction to the WebBrowser/Node.js

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

Architecturedscript is composed by two elements:☐ Client Side (dscript.js): JavaScript/CoffeeScript framework that provides DDS-

like abstractions☐ Server Side(dscript.play): A Router that transparently bridges data between

matching DDS entities, e.g. Browser-2-Browser, DDS-2-Browser and Browser-2-DDS

TopicA

TopicB

TopicC

TopicDQoS

QoS

QoS

QoSData

Reader

Data Reader

Data Writer

Data Writer

dscript.play

dscript

dscript.js

dscript.js

dscript.jsdscript.play

dscript

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

dscript.js

☐ dscript.js reduces the DDS concepts to Topics, DataReaders, DataWriters and QoS. DomainParticipant and Publishers are managed for you

☐ The API is reactive and considers DataReaders as the source for a stream of data. This data can be handled by the application or bound to a cache (notice the cache is not part of the DataReader)

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

Topic

circleTopic = new dds.Topic(0, 'Circle', 'org.omg.dds.demo.ShapeType') squareTopic = new dds.Topic(0, 'Square', 'org.omg.dds.demo.ShapeType') triangleTopic = new dds.Topic(0, 'Triangle', 'org.omg.dds.demo.ShapeType')

var myTopic = new dds.Topic(domainID, topicName, topicType);

myTopic = new dds.Topic(domainID, topicName, topicType)

JavaScript

CoffeeScript

var circleTopic = new dds.Topic(0, 'Circle', 'org.omg.dds.demo.ShapeType'); var squareTopic = new dds.Topic(0, 'Square', 'org.omg.dds.demo.ShapeType'); var triangleTopic = new dds.Topic(0, 'Triangle', 'org.omg.dds.demo.ShapeType');

Example:

Example:

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

DataWriter

dwqos = new dds.DataReaderQos( dds.History.KeepLast(10), dds.Reliability.Reliable, dds.TimeFilter(250))

cdw = new dds.DataWriter(circleTopic,dwqos)

shape = {}shape.color = ’RED’shape.x = 10shape.y = 20shape.shapesize = 30

cdw.write(shape)

dr = new dds.DataWriter(topic, qos)

CoffeeScript

Example:

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

DataReader

drqos = new dds.DataReaderQos( dds.History.KeepLast(10), dds.Reliability.Reliable, dds.TimeFilter(250))

cdr = new dds.DataReader(circleTopic,drqos)

dr = new dds.DataReader(topic, qos)

CoffeeScript

Example:

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

Binding a DataReader

☐ A DataReader can be bound to a user provided function that will handle incoming data or to a cache

☐ Notice, that as you are in control of how data-readers are bound to cache you can be very creative

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

Binding to User Function

cdr.addListener((s) -> console.log(JSON.stringify(s)))

dr.addListener(f)

CoffeeScript

Example:

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS

Binding to a Cache

// BindingbindShape = dds.bind((s) -> s.color)ccache = new DataCache(historyDepth)bindShape(cache, cdr)

// Working with the Cache

ccache.forEach(displayOnMyHTMLCanvas)

someCircles = ccache.takeWhile((s) -> s.x < s.y)

cache = new DataCache(historyDepth)bind(keyMapper)(dr, cache)

CoffeeScript

Example:

OpenSplice

DDS

Demo!

OpenSplice

DDS

WebAppPublish: CircleSubscribe: Square

JavaFX native DDS AppPublish: SquareSubscribe: Circle

WebAppSubscribe: CircleSubscribe: Square

OpenSplice

DDS Co

pyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

Code

☐ https://github.com/nuvo-io/dscript.js

☐ https://github.com/nuvo-io/dscript.play

The demo is under dscript.js/demo/jshapes

Copyrig

ht  2013,  PrismTech  –    A

ll  Rights  Reserved.

OpenSplice

DDS