I was researching how to plugin WebSocket into JET. I would like to share my findings and explain how it works. It is amazing, how scalable and quick it is to send JSON message through WebSocket channel and render it in JET. Luckily WebSocket client is implemented in JavaScript, this integrates perfectly with Oracle JET (also based on JavaScript).
Watch recorded demo, where I'm sending updated data with JSON message through WebSocket. UI chart is rendered with JET. See how nicely JET re-draws chart, based on received new data (watch at 6th second):
Download sample application - JETWebSocket.zip. This contains both WebSocket application (implemented with JDeveloper) and JET (implemented with NetBeans).
On WebSocket server side, I'm listening for DB changes (Database Change Notification Listener Implementation). Each time when DB change happens, all changes are collected into one collection and sent to the clients through WebSocket:
Changes are collected into array. WebSocket message must be encoded into JSON Array, this makes it easier to read it on client. Multiple JSON Objects are added into JSON Array:
Message is sent to all connected WebSocket clients:
All this happens on server side. Now lets take a look into client side. We should open WebSocket connection when JET is loading. I have included WebSocket client JavaScript code from separate file websocket.js. JET renders chart component:
Each time when WebSocket message is received by the client, onMessage method is invoked. This method is responsible to parse JSON message and pass it to function from JET context, where chart data update happens:
WebSocket is opened, when document is rendered. In the next step, JET View Model is created along with bindings:
Variable viewModel is accessible from WebSocket onMessage method, because it is defined outside of JET function:
Method updateChart invoked from onMessage, applies received changes to chart data. JET re-draws chart automatically, because changes are applies for observable array. This is really cool:
See how it works. Page is loaded with JET chart component, WebSocket is opened:
Go to DB and update few records, commit changes:
JET receives changes through WebSocket and chart is updated instantly:
Watch recorded demo, where I'm sending updated data with JSON message through WebSocket. UI chart is rendered with JET. See how nicely JET re-draws chart, based on received new data (watch at 6th second):
Download sample application - JETWebSocket.zip. This contains both WebSocket application (implemented with JDeveloper) and JET (implemented with NetBeans).
On WebSocket server side, I'm listening for DB changes (Database Change Notification Listener Implementation). Each time when DB change happens, all changes are collected into one collection and sent to the clients through WebSocket:
Changes are collected into array. WebSocket message must be encoded into JSON Array, this makes it easier to read it on client. Multiple JSON Objects are added into JSON Array:
Message is sent to all connected WebSocket clients:
All this happens on server side. Now lets take a look into client side. We should open WebSocket connection when JET is loading. I have included WebSocket client JavaScript code from separate file websocket.js. JET renders chart component:
Each time when WebSocket message is received by the client, onMessage method is invoked. This method is responsible to parse JSON message and pass it to function from JET context, where chart data update happens:
WebSocket is opened, when document is rendered. In the next step, JET View Model is created along with bindings:
Variable viewModel is accessible from WebSocket onMessage method, because it is defined outside of JET function:
Method updateChart invoked from onMessage, applies received changes to chart data. JET re-draws chart automatically, because changes are applies for observable array. This is really cool:
See how it works. Page is loaded with JET chart component, WebSocket is opened:
Go to DB and update few records, commit changes:
JET receives changes through WebSocket and chart is updated instantly:
Hi,
ReplyDeleteI've read both articles about pushing DB notification changes to client (ADS and WebSocket). However, for an ADF Faces application which one would you recommend? (as both can be used).
Thank you,
Bogdan.
I would recommend WebSocket, it is more scalable and you can access ADF Faces from Java Script.
ReplyDeleteRegards,
Andrejus