Saturday, May 16, 2015

ADF and Two-Way WebSocket Communication Architecture

This post is based on WebSockets and ADF, topic described in the previous post - WebSocket Integration with ADF for PPR Request Monitoring. I would like to look into it from technical architecture perspective and split WebSockets server logic into separate application deployed on WebLogic. WebSocket is two-way (bidirectional) communication channel, this allows to send and received data at the same time. I'm going to demonstrate how it works with my sample application.

It is best to explain how WebSocket works, with a live demo - you can watch recorded screencast. I'm using Twitter stream, you should see how many tweets are coming in for music category. Each tweet location is sent through WebSocket channel to ADF page, where it is rendered on the UI, through Java Script. ADF UI performance is measured in Java Script and logged back to the server through the same WebSocket channel. Tweet locations are coming from the server to ADF UI and ADF UI performance statistics traveling back to the server, at the same time:


I'm pretty amazed, how WebSocket transfers data - you should see how quick output text value is changing in ADF UI.

Download sample application - ADFAltaApp_v5.zip. Below diagram describes the main idea of this example:


There are two applications deployed on WebLogic 12c server. WebSocket server side application is listening for Twitter stream and sends data to the WebSocket client running in ADF UI. Logged performance data in ADF UI is sent back to WebSocket server side application.

Twitter stream handler is implemented as a servlet. It listens for every tweet received for the given topic and invokes WebSocket method to send data to the client:


Data is sent to the client using WebSocket API (library is available out of the box in WebLogic 12c and JDeveloper 12c). Incoming message is handled by another method - processMessage. This method accepts complex type, sent from ADF UI in JSON format:


Make sure to define WAR deployment profile for WebSocket project, this must be deployed as part of EAR. There should be deployment profile set, later referenced from WebSocket client:


WebSocket client runs in Java Script, there is onMessage function to handle incoming data. Here I'm simply setting newly received text as value for the ADF output text component:


ADF output text is empty initially, value is populated on runtime through WebSocket:


WebSocket communication from ADF UI to WebSocket server side is initiated in Java Script. PPR request timing data is written to JSON format and sent over WebSocket channel:

Monday, May 11, 2015

WebSocket Accelerated Live Data Synchronization for MAF

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.

Thursday, May 7, 2015

Oracle MAF and WebSockets Integration - Live Twitter Stream

Oracle MAF and WebSockets - I will describe how it works together. WebSockets is a protocol providing full-duplex communication channel over a TCP connection. This channel is interactive (communication is both ways) and we can send messages from the server to the client (MAF application running on the device). There is no need to use push notifications, WebSockets provide JSON support and allow to send complex payload data. In a way it competes with REST, however REST is different with request is being initiated by the client. WebSockets data is received automatically - there is no need to trigger any event by the client.

I have implemented sample MAF application with WebSockets integration, you can download it here - AltaMobileApp_v1.zip. Finance screen in the application contains MAF output text component. This component displays latest data received through WebSockets channel. Server side is listening for live Twitter Stream updates and sends each tweet location over WebSockets to the MAF application. See how it works in this screen recording:


WebSockets communication is not blocking MAF application functionality, it runs in the separate thread. User can navigating between MAF screens, run different actions and WebSockets delivers data in parallel.

Sample applications is based on two parts - server side WebSockets implementation with Twitter Stream listener and client side MAF application with WebSockets client.

Twitter Stream is handled with Twitter4J API, JAR's are included with the sample. You would need to provide your own Twitter account details, access keys could be retrieved for your account from Twitter developer portal. Make sure to obtain these keys, before running sample application:


New message from Twitter Stream is received by listener method - onStatus. I'm listening for all the tweets around the world, related to corporate keyword. Once there will be new tweet related to this topic, onStatus listener will be notified. In the listener method, I'm retrieving tweet location and and initiating WebSockets communication:


Method in WebSockets implementation - notifyClient, sends text message to the client (JSON message is supported as well):


Listener for Twitter Stream is started automatically, when application is deployed. This is done through servlet initialisation:


On the client side - MAF application is configured to receive automatic notifications through WebSockets channel. Implementation for WebSockets listener is very similar with the regular ADF Faces - it is done through JavaScript. MAF feature is registered with JavaScript file:


JavaScript contains all required methods for WebSockets communication. Here we open WebSockets channel with connectSocket function and further listen for the new messages/notifications with onMessage method. My goal is to update MAF components with the new data received through WebSockets. For this reason, I'm invoking Java method from onMessage JavaScript function and passing payload data (recently received tweet location):


Invoked Java method - processWebSocketMessage is responsible to update MAF bindings with the new data. Data Bindings class contains standard MAF propertyListener implementation, which ensures data refresh on MAF UI:


MAF output text on the UI displays recent data received through WebSockets channel:

Wednesday, April 29, 2015

SOA & BPM Partner Community Webcast May 8th 16:00 CET

Save the date for the Webcast below - make sure to attend, if you don't want to miss SOA & BPM news.

SOA & BPM Partner Community Webcast May 8th 16:00 CET

Join us for our monthly SOA & BPM Partner Community Webcast. We will give you an update on our SOA Suite 12c, Integration Cloud Service offerings and our community activities.



Speakers:
Vikas Anand
Jürgen Kress

Schedule: May 8th 2014 16:00-16:45 CET (Berlin time)

Attendance Information:
Join Webcast or dial in Call ID: 4070776 and Call Passcode: 333111

Austria: +43 (0) 192 865 12
Belgium: +32 (0) 240 105 28
Denmark: +45 327 292 22
Finland: +358 (0) 923 193 923
France: +33 (0) 15760 2222
Germany: +49 (0) 692 222 161 06
Ireland: +353 (0) 124 756 50

Italy: +39 (0) 236 008 198
Netherlands: +31 (0) 207 143 543
Spain: +34 914 143 755
Sweden: +46 (0) 856 619 465
Switzerland: +41 (0) 445 804 003
UK: +44 (0) 208 118 1001
United States: 140 877 440 73
More Local Numbers 
Watch and listen
You can join the Conference by clicking on the link: Join Webcast  (audio will play over your computer speakers or headset). Visit our SOA Partner Community Technology Webcast series here.

Tuesday, April 28, 2015

WebSocket Integration with ADF for PPR Request Monitoring

WebSocket is a protocol enabling communication over TCP connection. Communication is interactive, meaning data can be sent both ways - from the server to the Web client and back. Data is sent through WebSocket channel, without using using regular HTTP. This means we can enable communication between server and Web client without consuming bandwidth from HTTP. WebLogic 12c is shipped with required libraries for WebSocket support, we can use this protocol straight away in ADF 12c. WebSocket supports JSON format, this allows to send and receive JSON formatted data, just the same as REST. In this post I'm going to describe how WebSocket could be used, to report PPR request time measured on the Web client (Monitoring PPR Request Time on ADF UI Client Side), back to the server.

JDeveloper 12c allows to create WebSocket project, this can be done in the existing ADF Fusion Web application:


Required libraries are not added automatically, developer needs to add them manually. If you are going to compile sample application for this post - make sure to set correct path for JSON library, otherwise project will fail compilation:


Below you can see example of server side WebSocket code. Class is annotated with ServerEndpoint path and contains various methods to listen for WebSocket events. One of the methods - processMessage with annotation OnMessage, this method is invoked when message from the Web client is received. I'm just printing out PPR request time measured on the client and sent through WebSocket channel:


WebSocket is using JSON format for the data message. Data structure must be defined by the POJO class:


In order to be able to use this structure with WebSocket, helper classes for encoding and decoding must be defined. Here is the example for encoder, it converts data structure to JSON String:


Decoder converts data back from JSON String to the data structure defined by POJO class:


Encoder/decoder is defined in WebSocket class annotation:


Let's see what is required to be implemented on the Web client side. Here we have simple Java Script code, where WebSocket connection is established - connection between Web client (browser) and server:


WebSocket connection is opened on main page load, by invoking Java Script method from clientListener:


Java Script function responsible for monitoring, sends measured PPR request time back to the server through WebSocket connection. See details in the sample application developed for this post:


This is how it works on runtime - user invokes PPR request, by pressing a button:


Server receives a message with information about PPR request time measured on the client. This message is received through the WebSocket, without using any bandwidth from HTTP channel. See printed message below:


Make sure to compile WebSocket project, before you run sample application.


Download sample application here - ADFAltaApp_v4.zip.

Friday, April 17, 2015

Monitoring PPR Request Time on ADF UI Client Side

We can measure how long it takes to process request on the server side, however it is equally important to measure how long PPR request takes on the client side. Mainly because this will be a key factor for application performance exposed to the end user. There is relatively easy approach in JSF 2.0 to measure PPR request time on client side - with a special ajax tag. ADF 11g R2 and ADF 12c are based on JSF 2.0, this means we can use such tag and measure request performance. Read in my previous post how to monitor page load time in ADF UI client - Monitoring Page Load Time on ADF UI Client Side.

Here is the example of ajax tag. It provides special property called onevent, this property points to custom JavaScript method, which will be invoked by the framework when PPR request starts and ends:


Ajax tag can be used for various ADF UI components, initiating request. Below you can see example of ADF Faces button configured with onevent monitoring, it points to custom JavaScript monitor method:


JavaScript monitor method is invoked automatically, when request starts and succeeds. This means we can get start and end time, calculate total time taken to process PPR request from click to rendered response:


I would like to emphasise importance of this approach, based on example of ADF TF opening. Task Flow is a server side concept, on runtime its all is converted to HTML and rendered in the browser. When user clicks on the button, to render ADF TF content, he waits until it is initialised on the server side, business logic is executed and finally response is rendered. My example contains Method Call activity with delay code intentionally, to demonstrate how PPR request time measurement works:


ExecuteDelay method call invokes Java method, where thread is paused for 5 seconds:


Let's see how it works on runtime. Home page contains a list of employees, there is team hierarchy link available for each employee. On user click, it loads ADF TF with Hierarchy viewer (ADF TF explained above, with thread delay):


PPR request time starts when user clicks on the link and ends when ADF TF UI fragment content is rendered. This gets close to 6 seconds (there is added 5 seconds delay time from TF method call). We can measure, how long it really takes to see the content for the user, starting from the first click:


As soon as PPR request is completed, Hierarchy viewer component renders team structure:


Navigation back to the list is measured as well, it takes below 1 second:


PPR requests time for Save/Cancel/Back buttons in edit screen is measured in the same way:


Download sample application with implementation of described approach - ADFAltaApp_v3.zip.

Wednesday, April 15, 2015

Monitoring Page Load Time on ADF UI Client Side

In certain situations, it might be useful to monitor ADF page load time. This is pretty easy to achieve with Navigation Timing API and Java Script. Navigation Timing API is supported by modern browsers and allows to retrieve client side load time. It takes into account data transfer time and actual rendering in the browser - real time it took for a user to see the content.

We could use ADF clientListener operation with load type, to identify when ADF UI is loaded. This listener should be added to the ADF UI document tag and it will be invoked at the end of page rendering. Through clientListener, we could invoke our custom JavaScript method, where we could calculate page load time on ADF UI client side:


The most important thing here, is to get page load start time. This value is retrieved from Navigation Timing API (mentioned above) - performance.timing.navigationStart. The rest is easy - we can get load time:


This is how it looks like on runtime. When I recompile ADF application and redeploy it on the server, first load is obviously slower. ADF UI is rendered on the client side (starting from page load request) in 10 seconds (look at top right corner):


Second access is a way faster - page load on the client side happens in 1 second:


You can test it yourself, download sample application (redsam/welcome1) - ADFAltaApp_v2.zip.