REALTIME WEB APPLICATIONS WITH ORACLE APEX DOAG Conference 2012 Johannes Mangold Senior Consultant, Trivadis AG BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN 1
Trivadis makes IT easier. Dusseldorf Frankfurt Hamburg ~200 employees 11 Trivadis locations in CH, DE and AT with more than 600 employees Financially independent and sustainably profitable Revenue CHF 104 / EUR 84 Mio. Services for more than 800 clients in over 1,900 projects 200 Service Level Agreements More than 4,000 training participants Research and development budget: CHF 5.0 / EUR 4 Mio. Stuttgart Freiburg Munich Vienna Basel Bern Zurich Lausanne ~380 employees ~30 employees 2
Application Development Business Intelligence Business Integration Services Infrastructure Engineering Managed Services Training Compliance translated optimized wide-ranging bigenius fast simple wide-ranging Toolbox Infrastructure Care Application Care Comprehensive Application Development standardized generated automated optimized sustainable modular plannable efficient sustainable independent expert streamlined
Johannes Mangold Daniel Maier Dipl. Wirtschaftsinformatiker (BA) Senior Consultant Focus Integration Solutions Software Architecture Web- and Mobile Solutions Dipl. Informatiker (FH) Senior Consultant Focus on Software Architecture Web- and Mobile Solutions johannes.mangold@trivadis.com daniel.maier@trivadis.com 4
Agenda 1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion 5
Modern Enterprise Web Applications with APEX HTTP BROWSER WEB HTML WEB LISTENER ORACLE DATABASE WITH APEX 6
Modern Enterprise Web Applications with APEX Challenges with modern enterprise applications User expectations 7
Modern Enterprise Web Applications with APEX Challenges with modern enterprise applications Unreliable connections 8
Modern Enterprise Web Applications with APEX Challenges with modern enterprise applications Scalability 9
Modern Enterprise Web Applications with APEX HTTP BROWSER WEB HTML WEB LISTENER ORACLE DATABASE WITH APEX 10
Modern Enterprise Web Applications with APEX HTTP BROWSER WEB HTML WEB LISTENER Web «1.0» Architecture Challenge Built for document exchange not as dynamic application platform The Web is stateless and «half-duplex» ORACLE DATABASE WITH APEX PLUGINS & WORKAROUNDS PROBLEMS & COMPLEXITY 11
Agenda 1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion 12
Next Generation Web Standards: HTML5 13
Next Generation Web Standards: HTML5 14
Next Generation Web Standards: HTML5 Cross Document Messaging XMLHTTPRequest Level 2 Server-Sent Events WebSocket 15
Next Generation Web Standards: HTML5 Cross Document Messaging XMLHTTPRequest Level 2 Server-Sent Events WebSocket Our focus today To enable Web applications to maintain bidirectional communications with server-side processes Source: WebSocket API Spec, w3.org 16
Agenda 1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion 17
Realtime Web Applications with HTML5 WebSocket Bi-directional communication between a web page and remote host W3C API and IETF Protocol Full-Duplex, single socket Leverages Cross-Origin Resource Sharing Shares port with existing HTTP content Two schemes ws:// and wss:// WebSocket to be natively supported in Web browser 18
Realtime Web Applications with HTML5 WebSocket How WebSockets work 1 2 Upgrade from HTTP protocol to WebSocket protocol using the same TCP Connection Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode TCP-Sockets for the Web 19
Realtime Web Applications with HTML5 WebSocket WebSocket handshake: Upgrade from HTTP to WS protocol Client wants: ws://trivadis.com/triwebtrain Server accepts connection upgrade 1 Browser HTTP(S) GET /triwebtrain HTTP/1.1 Host: trivadis.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: 16-byte nonce, base64 encoded Sec-WebSocket-Version: 13 Server HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: 20-byte MD5 hash in base64 20
Realtime Web Applications with HTML5 WebSocket WebSocket connection established full-duplex message exchange 2 Browser WS(S) Server opcode length extended length mask data payload 2-14 bytes overhead per websocket frame 21
Realtime Web Applications with HTML5 WebSocket Real-time & full-duplex approaches: HTTP workarounds vs. WebSocket HTTP Polling Browser t Server WebSocket Browser HTTP Long polling Browser t Server t Server 22
Realtime Web Applications with HTML5 WebSocket WebSocket API //Create new WebSocket var mysocket = new WebSocket("ws://www.trivadis.com"); // Associate listeners mysocket.onopen = function(evt) { alert("connection open "); }; mysocket.onmessage = function(evt) { alert("received message: " + evt.data); }; mysocket.onclose = function(evt) { alert("connection closed "); }; // Sending data mysocket.send("websocket Rocks!"); // Close WebSocket mysocket.close(); 23
Realtime Web Applications with HTML5 WebSocket WebSocket API //Create new WebSocket var mysocket = new WebSocket("ws://www.trivadis.com"); // Associate listeners mysocket.onopen = function(evt) { alert("connection open "); }; mysocket.onmessage = function(evt) { alert("received message: " + evt.data); }; mysocket.onclose = function(evt) { alert("connection closed "); }; // Sending data mysocket.send("websocket Rocks!"); // Close WebSocket mysocket.close(); Communicate directly via higher level protocols: JMS / STOMP XMPP 24
Realtime Web Applications with HTML5 WebSocket Current WebSocket browser and server support Desktop Browsers Mobile Browsers phpwebsocket 25
Agenda 1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion 26
HTML5 WebSocket and APEX HTTP BROWSER HTML HTTP LISTENER WEB JMS WS WEBSOCKET GATEWAY TCP ADVANCED QUEUING ORACLE DATENBANK MIT APEX 27
Agenda 1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion 28
Showcase Demo «Trivadis WebTrain» 29
Showcase Architecture and Technology Stack HTML HTTP HTTP LISTENER HTTP WEBSOCKET JMS WEB GATEWAY AQ WS TCP JMS JMS APEX APEX 30
Agenda 1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion 32
Realtime HTML5 Enterprise Application Showcase Conclusion WebSocket brings duplex and realtime capability to Web Applications, based on new standards Not a replacement for existing protocols and APIs - it s the addon of choice when duplex and realtime is needed in a Web Application Easy to integrate into APEX Web Applications Standards based end-to-end transactions over the web Concepts for concurrent and realtime updates in UI needed Technology is in a early stage 33
More about Cloud, Next Generation Data Warehouse and Tools for efficient and safe operation of Oracle? FLOOR 3, STAND NO. 304 Trivadis AG Johannes Mangold Elisabethenanlage 9 CH-4051 Basel Tel. +41-61-279 97 55 Fax +41-61-279 97 56 johannes.mangold@trivadis.com www.trivadis.com BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN 34