Real-Time Web Programming with Vortex-Web

Angelo  Corsaro,  PhD  Chief  Technology  Officer  

angelo.corsaro@prismtech.com

Vortex

Cop

yrig

ht P

rism

Tech

, 201

4

The Vortex Platform

Vortex enable seamless, ubiquitous, efficient and timely data sharing across mobile, embedded, desktop, cloud and web applications

Cop

yrig

ht P

rism

Tech

, 201

4

One Standard, One set of Tools, One Goal — Ubiquitous Data Sharing

The Vortex Platform

VORTEXWeb

VORTEXLite

VORTEXGateway

VORTEXCloud

PrivateClouds

VORTEXTools

• Insight  • Record/Replay  • Tuner  • Tester  • Configurator

OpenSpliceEnterprise

VORTEXCafé

Vortex Web

Cop

yrig

ht P

rism

Tech

, 201

4

• A JavaScript DDS API to provide HTML5/JavaScript applications with a high-level communication abstraction

• Vortex Web exploits HTML5 features, such as web-sockets and web-workers, to provide time and space efficient Web-App to Cloud communication

Vortex Web

DDS#API JavaScript

Browser#/#Node.js

CoffeeScript

Cop

yrig

ht P

rism

Tech

, 201

4

Client Side (dds.js): JavaScript/CoffeeScript framework that provides DDS abstractions

Server Side (vortex-web): A Router that transparently bridges data between matching DDS entities, e.g. Browser-2-Browser, DDS-2-Browser and Browser-2-DDS

Vortex Web

TopicA

TopicB

TopicC

TopicDQoS

QoS

QoS

QoSData

Reader

Data Reader

Data Writer

Data Writer

dds.js

dds.js

dds.js

v-web

v-web

Cop

yrig

ht P

rism

Tech

, 201

4Vortex-Web takes advantage of HTML5 WebSockets as well as Web Workers

WebSockets are used for both the control as well as the data plane

Web Workers are used to decouple I/O from processing (recall that a JS context is single-threaded)

Client-Side Architecture

Cop

yrig

ht P

rism

Tech

, 201

4

ArchitectureControl-­‐Link.js

Send-­‐Link.js

Recv-­‐Link.js

dds-­‐runtime.jsdds.js

main  worker  (or  window  context)

worker  

worker  

worker  

worker  

Vortex-­‐Web  Server

control-­‐protocol

data  (from  browser)

data  (

to  bro

wser)

Cop

yrig

ht P

rism

Tech

, 201

4

Vortex-Web can be deployed to simply provide access to a “regular” DDS system or to extend Vortex-Cloud with JavaScript support

In general, you should think of Vortex-Web as an add-on to either a regular or a Vortex-Cloud DDS system

Vortex-Web takes advantage of DDS to support fault-tolerance and load-balancin.

Vortex Web Deployment

Cop

yrig

ht P

rism

Tech

, 201

4

Multiple instances can be deployed on a single system to provide fault-tolerance as well as to help in partitioning the load

The switch-over between instances is dealt-with by the dds.js library

Traditional System Deployment

TopicA

TopicB

TopicC

TopicDQoS

QoS

QoS

QoSData

Reader

Data Reader

Data Writer

Data Writer

dds.js

dds.js

dds.js

v-web

v-web

Cop

yrig

ht P

rism

Tech

, 201

4

Multiple instances can be deployed on the same IaaS platform sa Vortex-Cloud provide fault-tolerance as well as to help in partitioning the front-end load

The switch-over between instances is dealt-with by the dds.js library

Cloud Based Deployment

VORTEXCloud

IaaSserver-­‐side

dds.jsdds.js

dds.js

dds.js Overview

Cop

yrig

ht P

rism

Tech

, 201

4

Runtime

var runtime = new dds.runtime.Runtime();!runtime.connect(server, authToken);

runtime = new dds.runtime.Runtime();!runtime.connect(server, authToken);

JavaScript

CoffeeScript

var runtime = new dds.runtime.Runtime()!runtime.connect(“ws://88.77.66.55:9876”, “albator:corsaire”);

Example:

Example:

runtime = new dds.runtime.Runtime()!runtime.connect(“ws://88.77.66.55:9876”, “albator:corsaire”);

Cop

yrig

ht P

rism

Tech

, 201

4

Topic

topic = new dds.Topic(0, 'Cell', 'com.activefloor.Cell')

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

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

JavaScript

CoffeeScript

var topic = new dds.Topic(0, 'Cell', 'com.activefloor.Cell');

Example:

Example:

Cop

yrig

ht P

rism

Tech

, 201

4

DataWriter

dw = new dds.DataWriter(runtime, topic, qos) !!cell = {}!cell.x = 3!cell.y = 5!cell.pressure = 3!!dw.write(cell)

dw = new dds.DataWriter(runtime, topic, qos)

CoffeeScript

Example:

Cop

yrig

ht P

rism

Tech

, 201

4

DataReader

dr = new dds.DataReader(runtime, topic, qos) !

dr = new dds.DataReader(runtime, topic, qos)

CoffeeScript

Example:

Cop

yrig

ht P

rism

Tech

, 201

4

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

Binding a DataReader

Cop

yrig

ht P

rism

Tech

, 201

4

Binding to User Function

dr.addListener((s) -> console.log(JSON.stringify(s)))!

dr.addListener(f)

CoffeeScript

Example:

Cop

yrig

ht P

rism

Tech

, 201

4

Binding to a Cache

// Binding!bindCell = dds.bind((s) -> s.x + “-” + s.y)!ccache = new DataCache(historyDepth)!bindCell(ccache, cdr)!!// Working with the Cache: Compute number of active cells!!activeCells = ccache.map((c) -> if (c.pressure > p0) then 1 else 0).fold(0)((a, c) -> a + c)!!!

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

CoffeeScript

Example:

Cop

yrig

ht P

rism

Tech

, 201

4

DataCache Operations

# Writes a data sample into the cache corresponding to the key k !write: (k, data)!!# Returns a list representing the content of the cache ordered by key.!read()!!# Returns a list representing the last sample for each key!readLast()!!# Returns a list representing the content of the cache ordered by key. !# The data is actually removed from the cache.!take()!!# Returns a list representing the last sample for each key!# The data is actually removed from the cache.!takeLast()

Cop

yrig

ht P

rism

Tech

, 201

4

DataCache Operations

# Returns a list representing the content of the cache that matches for given predicate.!# The data is actually removed from the cache.!takeWithFilter(p)!!# Returns Some(v) if a value associated to the key k exists. Otherwise it returns None!get: (k)!!# Returns Some(v) if a value associated to the key k exists. Otherwise it returns f()!getOrElse(k, f)!!# Clear the content of the cache.!clear()!

Cop

yrig

ht P

rism

Tech

, 201

4

DataCache Operations

# Returns a new DataCache whose content is obtained by applying the function!# f to each element of the cache!map(f)!!# Executes the function f on each element of the cache!forEach(f)!!# Executes the function f only on the first n samples associated with a key!forEachN(f, n)! !# Returns the element of the cache that match the predicate p!filter(p)!!# Returns the element of the cache that do not match the predicate p!filterNot(p)

Cop

yrig

ht P

rism

Tech

, 201

4

DataCache Operations

# Folds the content of the data cache using z as “zero” for the folding function f!# For instance, assuming that the operator “+” is defined for the elements of !# the cache, then you could compute the sum of all elements doing:!# c.fold(0)((a, v) -> a + v)!# the product by: !# c.fold(1)((a, v) -> a * v)!# a comma separated string representation of the content:!# c.fold(“”)(a, v) -> a + “, “ + v!fold(z)(f) !!# Register a listener l to be notified whenever data which matches a !# predicate p is written into the cache. If no predicate is provided !# then the listeners is always notified upon data insertion.!addListener(l, p)!!

Hacking Time!

Cop

yrig

ht P

rism

Tech

, 201

4Let’s see the steps required to build a Web Chat that may look like this

But before let’s play with it a bit

Web Chat

http://bit.ly/vortex-web-chat

Cop

yrig

ht P

rism

Tech

, 201

4

The Chat CoffeeScript#  Create  useful  alias  for  coffez  and  jQuery  root  =  this  z_  =  coffez  $  =  jQuery  !server  =  “ws://demo-­‐eu.prismtech.com:9999"  !#  The  post  type  used  by  the  chat  application  class  Post      constructor:  (@name,  @msg)  -­‐>  !#  Create  the  runtime  runtime  =  new  dds.runtime.Runtime()  !#  Define  the  Post  topic  used  to  send  and  receive  chat  posts  postTopic  =  new  dds.Topic(0,    "Post")  !#  Define  the  QoS  for  the  DataReader/Writer  drQos  =  new  dds.DataReaderQos(dds.Reliability.Reliable)  dwQos  =  new  dds.DataWriterQos(dds.Reliability.Reliable)  

Cop

yrig

ht P

rism

Tech

, 201

4

The Chat CoffeeScriptpostReader  =  z_.None  postWriter  =  z_.None  !avatar  =  "avatar"  +  Math.floor((Math.random()  *  10000)  +  1);  !#  Add  post  to  the  chat  and  format  it  to  show  it  is  from  me  createMyPost  =  (post)  -­‐>  ...    !#  Add  post  to  the  chat  and  format  it  to  show  it  is  from  others  createOtherPost  =  (post)  -­‐>  ...    !#  Add  post  to  the  chat  and  format  it  to  show  it  is  from  others  processPost  =  ()  -­‐>      msg  =  $("#ChatMessage").val()      post  =  new  Post(avatar,  msg)      #  Publish  the  post  (notice  that  postWriter  is  an  Option  Monad)      #  Take  a  look  at  (http://en.wikibooks.org/wiki/Haskell/Understanding_monads/Maybe)      #  or  (http://www.scala-­‐lang.org/api/2.11.0/index.html#scala.Option)      postWriter.map((dw)  -­‐>  dw.write(post))      $("#ChatMessageList").append(createMyPost(post))      $("#ChatMessage").val("")  !

Cop

yrig

ht P

rism

Tech

, 201

4

The Chat CoffeeScript#  Deal  with  click  and  keys  events…  !$("#ChatMessage").keyup(          (e)  -­‐>              if(e.keyCode  is  13)  then  processPost()  )  !!$("#SendMsgButton").click(      (evt)  -­‐>          console.log("Send  Button  has  been  clicked")          processPost()  )  !$("#SelectAvatarButton").click(      (evt)  -­‐>          s  =  $("#AvatarName").val()          if  (s  isnt  "")              avatar  =  s  )  

Cop

yrig

ht P

rism

Tech

, 201

4

The Chat CoffeeScript#  Handle  the  runtime  onconnect  event  runtime.onconnect  =  ()  -­‐>      #  Create  DataReader  and  DataWriter  for  our  posts      dr  =  new  dds.DataReader(runtime,  postTopic,  drQos)      dw  =  new  dds.DataWriter(runtime,  postTopic,  dwQos)  !    #  Register  a  listener  with  the  data  reader  to  post  messages        #  in  our  chat      dr.addListener(          (post)  -­‐>              if  (post.name  isnt  avatar)                  $("#ChatMessageList").append(createOtherPost(post)))      postReader  =  z_.Some(dr)      postWriter  =  z_.Some(dw)  !connectRuntime  =  ()  -­‐>      $("#AvatarName").val(avatar)      runtime.connect(server,  "uid:pwd")  !$(document).ready(()  -­‐>  connectRuntime())  

Cop

yrig

ht P

rism

Tech

, 201

4Only ~10 lines code for implementing the communication required by a chat application!

Content filtering could be used to further simplify the application and reduce number of lines of code, i.e. avoid the check on the origin of the message to avoid duplicate posts

In Summary

Cop

yrig

ht P

rism

Tech

, 201

4

Vortex-Web makes is very simple to develop peer-to-peer real-time web applications

Through the Vortex Platform, Vortex-Web application can share data seamlessly with any device!

Concluding Remarks

Cop

yrig

ht P

rism

Tech

, 201

4

Vortex v1.0 will be available in June 2014

Starting from May will be providing a series of webcasts to get you started in building IoT and I2 applications with Vortex

What’s Next?