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.

8 comments:

  1. Great post Andrejus,
    But the link to ADFAltaApp_v4.zip gives a 404 error.
    Could you give this sample please ?
    Thanks a lot,
    Christophe,

    ReplyDelete
  2. It works to download for me. Send me email, I will forward sample to you.

    Andrejus

    ReplyDelete
  3. Very Good Post
    But the link to ADFAltaApp_v4.zip not work
    Could you give this sample please ?
    give me link for more material about ("WebSocket Integration with ADF ")
    Thanks a lot,
    Belal Abdalhuk

    ReplyDelete
  4. It works for me to download, please double check - should be ok.

    Regards,
    Andrejus

    ReplyDelete
  5. Hello,

    How to enable Web Socket Project in jDeveloper 12c ?

    When i attempt to create new project, the project is not available.

    Thanks a lot,
    Raphaƫl

    ReplyDelete
  6. Hi,

    You can create generic project and add WebSocket library from JDEV wizard.

    Andrejus

    ReplyDelete
  7. Hi Andrejus
    I'm also getting 404 error while trying to download sample app. Could you check the link, please?
    Thanks

    ReplyDelete
  8. It works for me. If you want, send me email - i can forward sample.

    Andrej

    ReplyDelete