Real-Time Web Programming with Vortex-Web
Angelo Corsaro, PhD Chief Technology Officer
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?
Recommended
