oracle jet and websocket
TRANSCRIPT
![Page 1: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/1.jpg)
Oracle JET and WebSocket
Andrejus BaranovskisTechnical Expert
![Page 2: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/2.jpg)
ADF, MAF, JET, BPM, ACM, SOA, WebCenter, Cloud
Small Team of Experts, Focused on Technical Quality
Customers – Global Corporations, Medium and Small Business
Oracle Technical Blog – 10 Years (~800 posts)
Oracle Fusion Middleware Partner Community Award for Outstanding ACM/BPM Contribution 2015, Oracle Fusion Middleware Innovation Award 2010, SOA Partner Community Award for Outstanding Contribution Across the Globe 2010
Company Profile
![Page 3: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/3.jpg)
Agenda
Oracle JET and WebSocket Overview
WebSocket Implementation
Oracle JET Implementation
Oracle JET and WebSocket Integration
Live Data Demo
Oracle JET Rendering in ADF
![Page 4: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/4.jpg)
Oracle JET and WebSocket Overview
![Page 5: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/5.jpg)
Oracle JET OverviewOracle JET (JavaScript Extension Toolkit) – a modular toolkit based on modern JavaScript, CSS3,
and HTML5 design and development principles. Leverages popular Open-Source frameworks and
adds advanced functionality:
Rich set of UI components
Advanced two-way binding
Advanced Routing System
Smart Resource Management
Validation framework
Open Source
![Page 6: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/6.jpg)
WebSocket Overview WebSocket is a protocol providing full-duplex communication over a single TCP connection
Allows to open an interactive communication session between the browser and the server
Sends messages to the server and receives responses without having to poll the server for a
reply
Low latency, near real time connection between the client and the server
Designed to work well with existing Web infrastructure
Standardized by the IETF as RFC 6455 in 2011
Supports secure connections and allows bi-directional client/server communication
Supported by WebLogic 12c
Supported by Firefox, Google Chrome, Safari, Internet Explorer and Opera
![Page 7: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/7.jpg)
WebSocket Overview
Direct communication
Scalable and fast
Notifications from back-end
Notifications from client
HTTP traffic reduction
No Pooling
http://www.websocket.org
![Page 8: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/8.jpg)
WebSocket Overview HTTP Performance – police metaphor
Anything new?
NoNoNoNoNo
![Page 9: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/9.jpg)
WebSocket Overview WebSocket Performance – police metaphor
Listening radioand receive order
Delivers order
![Page 10: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/10.jpg)
WebSocket Implementation
![Page 11: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/11.jpg)
WebSocket Implementation Supported by WebLogic 12
Straightforward API – sendObject method
![Page 12: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/12.jpg)
Message encoder/decoder
WebSocket configuration
WebSocket Implementation
![Page 13: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/13.jpg)
WebSocket Implementation Client Side JavaScript
![Page 14: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/14.jpg)
Oracle JET Implementation
![Page 15: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/15.jpg)
Oracle JET Implementation Top level require call executed by application in main.js
Bindings are initialized on page load in ViewModel JS function
![Page 16: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/16.jpg)
Oracle JET Implementation Pie Chart collection and observable array
Automatic UI data re-load through observable
![Page 17: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/17.jpg)
Oracle JET Implementation List observable array and table data source
Automatic UI data re-load through observable
Rate limit configuration
![Page 18: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/18.jpg)
Oracle JET Implementation Pie Chart UI implementation – referencing binding value and format
![Page 19: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/19.jpg)
Oracle JET Implementation List UI implementation – referencing binding value and layout template
![Page 20: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/20.jpg)
Oracle JET and WebSocket Integration
![Page 21: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/21.jpg)
Oracle JET and WebSocket Integration WebSocket client JavaScript integration into JET page
![Page 22: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/22.jpg)
Oracle JET and WebSocket Integration WebSocket connection is initiated on JET load
WebSocket onMessage calls method in JET context
![Page 23: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/23.jpg)
Oracle JET and WebSocket Integration Live data update in JET
![Page 24: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/24.jpg)
Live Data Demo
![Page 25: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/25.jpg)
Live Data Demo DB is updated from separate thread
Each 4 seconds update arrives
JET Chart UI refresh
JET List UI refresh
![Page 26: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/26.jpg)
Oracle JET Rendering in ADF
![Page 27: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/27.jpg)
Oracle JET Rendering in ADF
![Page 28: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/28.jpg)
Oracle JET Rendering in ADF Use cases:
Render live data in ADF through JET island
Build public facing scalable sites with JET and back-office systems with ADF
Possible to use JET island in ADF
ADF timeout does not count activity in JET island
Oracle statement: Should not mix ADF and JET, only in special use cases
No official Oracle support
![Page 29: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/29.jpg)
Oracle JET Rendering in ADF Place JET UI code into ADF Fragment
![Page 30: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/30.jpg)
Oracle JET Rendering in ADF ADF Fragment with JET UI code add into main ADF page with simple Include
![Page 31: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/31.jpg)
Oracle JET Rendering in ADF Add JET CSS into main ADF page using af:resource tag
![Page 32: Oracle JET and WebSocket](https://reader036.vdocument.in/reader036/viewer/2022081503/58794c401a28abb1418b500b/html5/thumbnails/32.jpg)
Contacts
Andrejus Baranovskis
Blog: http://andrejusb.blogspot.com
Web: http://redsamuraiconsulting.com
Email: [email protected]
Phone: +370 640 14737