Building Real-Time Web Applications with Vortex-Web
1 like1,790 views
The document discusses the Vortex Web platform, which enables real-time web programming for seamless data sharing across various applications using HTML5 features and JavaScript. It details components like the Vortex Web DDS API and how to implement basic functionalities such as data readers and writers for peer-to-peer communication. Additionally, it provides an example of creating a simple web chat application while emphasizing the ease of developing real-time applications with Vortex.
Building Real-Time Web Applications with Vortex-Web
- 1. Real-Time Web Programming with Vortex-Web Angelo Corsaro, PhD Chief Technology Officer [email protected]
- 2. Vortex
- 3. CopyrightPrismTech,2014 The Vortex Platform Vortex enable seamless, ubiquitous, efficient and timely data sharing across mobile, embedded, desktop, cloud and web applications
- 4. CopyrightPrismTech,2014 One Standard, One set of Tools, One Goal — Ubiquitous Data Sharing The Vortex Platform VORTEX Web VORTEX Lite VORTEX Gateway VORTEX Cloud Private Clouds VORTEX Tools • Insight • Record/Replay • Tuner • Tester • Configurator OpenSplice Enterprise VORTEX Café
- 5. Vortex Web
- 6. CopyrightPrismTech,2014 • 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
- 7. CopyrightPrismTech,2014 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 TopicD QoS QoS QoS QoS Data Reader Data Reader Data Writer Data Writer dds.js dds.js dds.js v-web v-web
- 8. CopyrightPrismTech,2014 Vortex-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
- 9. CopyrightPrismTech,2014 Architecture Control-‐Link.js Send-‐Link.js Recv-‐Link.js dds-‐runtime.js dds.js main worker (or window context) worker worker worker worker Vortex-‐Web Server control-‐protocol data (from browser) data (to browser)
- 10. CopyrightPrismTech,2014 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
- 11. CopyrightPrismTech,2014 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 TopicD QoS QoS QoS QoS Data Reader Data Reader Data Writer Data Writer dds.js dds.js dds.js v-web v-web
- 12. CopyrightPrismTech,2014 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 VORTEX Cloud IaaSserver-‐side dds.js dds.js dds.js
- 13. dds.js Overview
- 14. CopyrightPrismTech,2014 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”);
- 15. CopyrightPrismTech,2014 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:
- 16. CopyrightPrismTech,2014 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:
- 17. CopyrightPrismTech,2014 DataReader dr = new dds.DataReader(runtime, topic, qos) ! dr = new dds.DataReader(runtime, topic, qos) CoffeeScript Example:
- 18. CopyrightPrismTech,2014 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
- 19. CopyrightPrismTech,2014 Binding to User Function dr.addListener((s) -> console.log(JSON.stringify(s)))! dr.addListener(f) CoffeeScript Example:
- 20. CopyrightPrismTech,2014 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:
- 21. CopyrightPrismTech,2014 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()
- 22. CopyrightPrismTech,2014 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()!
- 23. CopyrightPrismTech,2014 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)
- 24. CopyrightPrismTech,2014 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)! !
- 25. Hacking Time!
- 26. CopyrightPrismTech,2014 Let’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
- 27. CopyrightPrismTech,2014 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)
- 28. CopyrightPrismTech,2014 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("") !
- 29. CopyrightPrismTech,2014 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 )
- 30. CopyrightPrismTech,2014 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())
- 31. CopyrightPrismTech,2014 Only ~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
- 32. CopyrightPrismTech,2014 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
- 33. CopyrightPrismTech,2014 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?