Transcript HTML5 – ServerSent Events

1
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 Application
Development with Oracle
WebLogic Server
Doug Clarke
Director of Product Management
2
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
THE FOLLOWING IS INTENDED TO OUTLINE OUR
GENERAL PRODUCT DIRECTION. IT IS INTENDED
FOR INFORMATION PURPOSES ONLY, AND MAY
NOT BE INCORPORATED INTO ANY CONTRACT. IT
IS NOT A COMMITMENT TO DELIVER ANY
MATERIAL, CODE, OR FUNCTIONALITY, AND
SHOULD NOT BE RELIED UPON IN MAKING
PURCHASING DECISIONS. THE DEVELOPMENT,
RELEASE, AND TIMING OF ANY FEATURES OR
FUNCTIONALITY DESCRIBED FOR ORACLE’S
PRODUCTS REMAINS AT THE SOLE DISCRETION
OF ORACLE.
3
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Agenda
 HTML 5 and the Mobile Revolution!
 Supporting Rich Clients with WebLogic Server
 Real Live Data with TopLink Data Services
4
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Modern Web Development
Create Some sense of problem Definition ... What and why?
 It’s difficult, costly to build modern web applications
– Web? Native? Flash? Build for many? Build for one
– Expertise, development cost, testing and support across platforms
 HTML5 is designed to address the cross-platform jungle
– Offline, Real-time Communication, File access, Semantic markup,
Multimedia, CSS3, ...
– Attempts to codify best-practices that have emerged
– Semantic page structure/layout, JavaScript + DOM manipulation, CSS3
5
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML 5 Is a Game Changer
The Browser Is the Platform
 HTML 5 is the new UI across devices
– Multimedia, Graphics, Offline, Real-time Communication, Device Access,
File access, Semantic markup, CSS3
– Applications == HTML 5 + JavaScript + CSS3 + Server Resources
 Requires a different programming approach
 Servers no longer generating markup language
 Clients responsible for presentation logic and execution
 JavaScript is part of the domain model
 JSON is the payload
 Event-Driven
6
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Architectural Integration in Fusion Middleware
Cloud Application
Foundation and HTML 5
Oracle Traffic Director
ADF Mobile
HTTP/S
ADF Infrastructure
HTML 5
client.js
ADF
WebLogic Server
JAX-RS
Web
Sockets
JMX
REST
Jersey
Data Services
JavaFX
client.jar
SSE
JMS
JAXB
POJO/EJB
JPA
Data Sources
Database
7
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Coherence
Insert Information Protection Policy Classification from Slide 13
Adapters
Enterprise
Manager
Server Support for Rich Clients
Thin Server Architecture
 With clients responsible for UI, servers provide applications and data
– Serve up client code and static resources, data access and eventing
– REST, Request/Response, Asynchronous, Bi-Directional, Server push
 Core building blocks for Server resources
– JSON (JavaScript Object Notation) bindings for data objects
– Bi-directional data streams with WebSockets
– Server-Push with ServerSent-Events
– Data observation and change notification from data and event services
8
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 - Thin Server Architecture
Data
HTML
CSS
HTTP/S
JavaScript
Web
Sockets
JavaScript APIs
DOM Tree
SSE
Browser
WebLogic Server
Offline store
9
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 Connectivity - Web Sockets
Bi-Directional, Low Latency Connection
 Provides a bi-directional connection between the client and the server
 Connection oriented
– Uses HTTP to establish initial connection, existing infrastructure
– Low latency, connection always ready to use on either end
– Uses frames to transmit messages, text-frames, binary-frames
– Operational codes in protocol to control and maintain connection
 Client is a simple API based on messaging
– Open a WebSocket, send messages, receive messages
 Typical uses
– Online trading, gambling, gaming, social networking, collaboration tools, ...
10
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 Connectivity - WebSockets
The WebSocket Handshake
Request
GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
<EMPTY LINE>
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
<EMPTY LINE>
11
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Response
HTML5 Connectivity - WebSockets
Client Code
@ServerSentEvent(“trades.sse”)
public class TradeServerSentEvent extends ServerSentEventHandler {
final Logger logger = Logger.getLogger(this.getClass().getSimpleName());
@Override
public void onConnected(ServerSentEventConnection connection) {
logger.info("\n*** onConnected: " + connection.toString());
super.onConnected(connection);
}
void send(String msg) throws IOException {
ServerSentEventData data = new ServerSentEventData()
.retry(10000)
.id(String.valueOf(System.currentTimeMillis()/1000))
.data(msg);
connection.sendMessage(data);
}
}
12
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 Connectivity - Web Sockets
The Java Platform
 Many Java vendors already providing levels of support for WebSockets
– Grizzly/GlassFish, WebLogic Server, Jetty, Netty, Atmosphere, ...
 Many other platforms and frameworks with WebSocket support
– Node.js, PHP, Ruby, Kaazing, ...
 Standardization effort underway for Java Platform
– JSR 356: Java API for WebSocket
– Currently targeted for Java EE 7
– Annotation based model, POJOs as WebSocket Endpoints
13
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Server Building Block - WebSockets
WeSocket Support in WebLogic Server 12.1.2
 WebLogic Server supports WebSocket Protocol per RFC 6455
– Uses existing high performance, highly scalable network muxer
– Very high degree of compatibility tested using Autobahn WS Test Suite
 Provides Java API and Annotation support for developing applications
that use WebSocket Protocol
– @WebSocket
– WebSocketHandler, WebSocketConnection
– Based on Grizzly/GlassFish API
 Plan to support JSR 356 once spec is finalized
14
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 Connectivity - WebSockets
Server Code
@WebSocket(pathPatterns = "/helloworld.ws")
public class HelloWorldWebSocket extends WebSocketAdapter {
final String MSG = "%s @ %tT";
@Override
public void onMessage(WebSocketConnection connection, String payload) {
try {
connection.send(String.format(MSG, payload, new Date()));
} catch (Exception ex) {
Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
}
}
}
15
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
WebSocket
Demonstration
16
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 – ServerSent Events
HTML 5 Streaming
 HTML 5 Server Streaming Model
• JavaScript API allows web page to subscribe to an event stream
• Unidirectional only from server to client
• Events sent over HTTP leveraging existing infrastructure
• Applicable for cases where data does not need to be sent from client
• Stock quotes, financial data
• Monitoring systems, home, business, alarms, servers, ...
• Location tracking systems
17
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 – ServerSent-Events
Client Code
<html>
<head>
<script type='text/javascript'>
var source = new EventSource(‘trades.sse');
source.onmessage = function (event) {
trades = document.getElementById(’trades');
trades.innerHTML += "<p>Trade: " + event.data +”</p>”
};
</script>
</head>
<body>
<div id=”trades"></div>
</body>
</html>
18
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
HTML5 – ServerSent-Events
HTML5 Streaming
EventSource(’trades.sse')
Events stream
trades.sse
@Inject
id: 3456\n
data: ORCL\n
data: $32.56\n\n
Server
Client
19
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Java EE
EJB,
Managed
Bean
Server Building Block – ServerSent-Events
Event Handler
@ServerSentEvent(“trades.sse”)
public class TradeServerSentEvent extends ServerSentEventHandler {
final Logger logger = Logger.getLogger(this.getClass().getSimpleName());
@Override
public void onConnected(ServerSentEventConnection connection) {
logger.info("\n*** onConnected: " + connection.toString());
super.onConnected(connection);
}
void send(String msg) throws IOException {
ServerSentEventData data = new ServerSentEventData()
.retry(10000)
.id(String.valueOf(System.currentTimeMillis()/1000))
.data(msg);
connection.sendMessage(data);
}
}
20
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Server Building Block – ServerSent-Events
Java EE Integration
@Singleton
@Startup
public class StockTrader {
@Inject
@ServerSentEventContext(“trades.sse)
ServerSentEventHandlerContext<TradeServerSentEvent> ctx;
@Schedule(second = "*/5", minute = "*", hour = "*", persistent = true)
public void stockUpdate() {
makeTrades(stocks);
broadcast(toJson("update", stocks));
}
private void broadcast(String msg) {
for (TradeServerSentEvent sse : ctx.getHandlers()) {
sse.send(msg);
}
}
}
21
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
ServerSent-Event
Demonstration
22
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
TopLink Data Services
RESTful JPA with Live Data
23
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Thin Server Architecture
Clients
Data
HTTP/S
Web
Sockets
Server
SSE
24
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
TopLink Data Services
Clients
Data
Java EE
HTTP/S
JSON/XML
TopLink
Notifications
Data Services
Web Socket/SSE
25
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Change
Notification
What is TopLink Data Services?
Provide easy to configure JSON and XML access
via REST to enterprise data sources
 Declarative: No Java SE/EE development required
 Data Access over REST with JSON or XML
 Live Data Notifications over WebSockets or Server Sent Events
– Database Change Notification
 Multiple Data Sources: Relational, NoSQL, Coherence
 Multiple Clients: HTML5/JS, JavaFX, mobile devices, ADF Mobile
 Java EE Standards Based: JPA, JAX-RS, JAXB, Bean Validation
 Leverage all of TopLink’s features including TopLink Grid with Coherence
26
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
XML and JSON from JAXB Mappings
XML
JAXB mapped Java
JSON
27
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Client Development
Client
develop
HTML5
JavaScript
Native
Client
Developer
config
Server
TopLink Data
Services
28
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Data
TopLink Demo
RESTful JPA with Live Data over WLS
Web Sockets
29
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
Graphic Section Divider
30
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
31
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13
32
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Insert Information Protection Policy Classification from Slide 13