New generation Mobile and Web applications are going to use WebSockets. This is one of the fastest and convenient ways to transfer JSON formatted data from the server to the client and back. Huge advantage - server could initiate data synchronisation request and deliver JSON messages directly to the client. You should read my previous post about detail information how to configure MAF with WebSocket - Oracle MAF and WebSockets Integration - Live Twitter Stream.
In this post I would like to describe, how to integrate further information received through WebSocket with MAF components. I will use MAF Tree Map UI component to display live data for Tweets locations.
Below you could see screen recording - MAF Tree Map is getting refreshed automatically, each time when update through WebSocket channel is being received. This is amazing, how fast data through WebSocket channel is coming. In this test, MAF is handling around 1 update per second, received from WebSocket:
Let's look how it is implement behind the scenes. There is MAF Tree Map UI component, this is regular MAF component to render graph visualisation:
UI component is based on Data Bindings, collection is initialized from Data Control method:
Method handling data update from WebSocket is responsible to update data collection - it invokes helper method, where data collection is re-constructed. Standard Refresh Provider is helping to repaint data displayed on the UI:
Simple and effective. Download sample application - AltaMobileApp_v2.zip.
In this post I would like to describe, how to integrate further information received through WebSocket with MAF components. I will use MAF Tree Map UI component to display live data for Tweets locations.
Below you could see screen recording - MAF Tree Map is getting refreshed automatically, each time when update through WebSocket channel is being received. This is amazing, how fast data through WebSocket channel is coming. In this test, MAF is handling around 1 update per second, received from WebSocket:
Let's look how it is implement behind the scenes. There is MAF Tree Map UI component, this is regular MAF component to render graph visualisation:
UI component is based on Data Bindings, collection is initialized from Data Control method:
Method handling data update from WebSocket is responsible to update data collection - it invokes helper method, where data collection is re-constructed. Standard Refresh Provider is helping to repaint data displayed on the UI:
Simple and effective. Download sample application - AltaMobileApp_v2.zip.
Hi Andrejus,
ReplyDeleteThank you for providing such a great tutorial on Websockets. May I ask how ADF distinguishes between sessions? Example a browser session vs Websocket session and how to merge the two. I would like to be able to push specific user data across the socket connection.
|Users Browser HTTP session
server <--> | Data transferred over the socket is consider same session
|Users websocket session
Thanks,
Hi,
ReplyDeleteI have implemented such requirement in ADF, following this guide - http://stackoverflow.com/questions/17936440/accessing-httpsession-from-httpservletrequest-in-a-web-socket-serverendpoint
Regards,
Andrejus
Thank you for the quick reply and reference.
ReplyDelete