fight empire-html5

Fight the empire light weightly with HTML5, WebSockets,

Server-sent Events and othersBhakti MehtaTwitter: @bhakti_mehta

Introduction• Currently working as a Senior Software Engineer

at Blue Jeans Network. Bluejeans.com• Worked at Sun Microsystems/Oracle for 13 years• Committer to numerous open source projects• Author of Developing RESTful Services with JAX-

RS 2.0, WebSockets and JSON

Copyright 2013, Bhakti Mehta all rights reserved

http://www.packtpub.com/developing-restful-services-with-jax-rs2-json-websockets/book

Fight the empire!


Agenda Introduction Polling Server- sent Events (SSE) WebSockets JAXRS 2.0 JSON-P


Polling Used by vast majority of AJAX applications Poll the server for data Client --->request--> Server If no data empty response is returned


Polling


Client Server

Request (client_id)

Response 200 OK: empty

Request (client_id)

….….….….

Response 200 OK: message body

Polling Drawbacks Http overhead Reducing the interval will consume more

bandwidth and processing resources for nothing.


Long Polling If server does not have data holds request open COMET Chunked transfer encoding can be used to send

chunks of data as part of response body which is opened as a stream.

Chunks can be javascript tags loaded in hidden iframe and executed in order of arrival


Long Polling


Client Server

Request (client_id)


Request (client_id)

….….….


….….

Long Polling Drawbacks

• One-way communication• No standard data format or message format when

used in chunked transfer encoding mode• Each connection initiation has the initiation cost.• No caching between clients and server, which

impacts the server performance instead of reading some contents from the cache.


Server-sent events


Unidirectional channel between server and client Server pushes data to your app when it wants Updates can be streamed from server to client as they happen

Server-sent Events


Client Server

Request (client_id)

….….….

SSE message

….….

SSE message

Server-sent Events Subscribing to event stream

To subscribe to an event stream, create an EventSource object and pass it the URL of your stream:

Example in javascript

eventSource = new EventSource(url);

eventSource.onmessage = function (event) {

}

Setting up handlers for events

You can optionally listen for onopen() and onerror() functions


Message format for SSE

Sending an event stream Construct a plaintext response, served with a

text/event-stream Content-Type. Sample message format data: Help me Obi Wan-Kenobi you are my only

hope\n\n


Server-sent Events and JSON

Sending JSON

You can send multiple lines without breaking JSON format by sending messages like this

data: {\n\n

data: "name": Luke Skywalker",\n\n

data: ”home": Tatooine\n\n

data: }\n\n

On client side source.addEventListener('message', function(e) {

var data = JSON.parse(e.data);


Associating event names with SSE

event: order66Issued\ndata: {“issuer” : “Chancellor Palpatine”}\n\nevent: jedisPurged\ndata: {“survivor” :”Obi-Wan Kenobi, Yoda”}\n\n


Associating ids with SSE

Associating ids with events can help with fault tolerance in SSEid: 123 \ndata: Battle of droids deployed at Naboo\n\n


Connection loss and retries

• Browsers that support SSE can try reconnecting to the server in case the connection between browser and server is severed. The default retry interval is 3000 milliseconds but it can be adjusted by including the retry directive in the messages that server sends to the client.

• For example to increase the retry interval to 5000 milliseconds SSE message that server sends can be similar to the following listing:

retry: 5000\n data: This is a single line data\n\n


Server-sent Events and reconnection

If the connection drops, the EventSource fires an error event and automatically tries to reconnect.

The server can also control the timeout before the client tries to reconnect.


Best practices for Server-sent Events

Check if eventSource's origin attribute is the expected domain to get the message

if (e.origin != 'http://foo.com') {

alert('Origin was not http://foo.com');

return;


Best practices for Server-sent Events

Associating an ID with an event

Setting an ID lets the browser keep track of the last event fired

Incase connection is dropped a special Last-Event-ID is set with new request

This lets the browser determine which event is appropriate to fire. The message event contains a e.lastEventId property.


Comparing Polling vs Long Polling vs SSE

Polling: GET. If data, process data. GET...

1 GET = 1 HTTP response header and maybe a chunk of data.

Long-polling: GET. Wait. Process data. GET...

1 GET = 1 HTTP response header and chunks of data.

SSE: GET. Wait. Process data. Wait. Process data. Wait...

1 GET = 1 HTTP response header and chunks of data with small headers


WebSockets Full duplex communication in either direction Data is framed with 2 bytes In the case of text frames, each frame starts with

a 0x00 byte, ends with a 0xFF byte, and contains UTF-8 data in between.


WebSockets Client and Server upgrade from Http protocol to

WebSocket protocol during initial handshake

GET /text HTTP/1.1\r\n

Upgrade: WebSocket\r\n

Connection: Upgrade\r\n

Host: www.websocket.org\r\n …\r\n

Handshake from server looks like

HTTP/1.1 101 WebSocket Protocol Handshake\r\n

Upgrade: WebSocket\r\n

Connection: Upgrade\r\n …\r\n


WebSockets Handshake


WebSockets After the upgrade HTTP is completely out of the

picture at this point. Using the lightweight WebSocket wire protocol,

messages can now be sent or received by either endpoint at any time.

Creating a Websocket ws = new WebSocket("ws://localhost:8080/../WebSocketChat");

You can set handlers for events onopen or onerror


WebSockets JSR 356 @ServerEndpoint

signifies that the Java class it decorates is to be deployed as WebSocket endpoint

Additionally the following components can be annotated with @ServerEndpoint

a stateless session EJB

a singleton EJB

a CDI managed bean


WebSockets and Security

A web socket which is mapped to a given ws://

URI is protected in the deployment descriptor with a

listing to a http:// URI with same hostname, port and path

since this is the URL of its opening handshake


ComparisonsSubject SSE WebSockets Long Polling

Error Handling Built in support Built in support Almost no error handling in chunked transfer

Performance Better than long polling and inferior to WebSockets

Best performance

Small CPU resource but idle process/thread per client connection limits scalability

Communication channel

HTTP unidirectional

WebSockets bidirectional

Http unidirectional


ComparisonsSubject SSE WebSockets Long Polling

Implementation complexity

Easy Requires websocket support

Easiest

Browser Support

Firefox,Chrome Safari, Opera

For RFC 6455: IE 10, Firefox 11, Chrome 16, Safari 6, Opera 12.10

All current browsers


Best practices for WebSockets

• Throttling the rate of sending data• The WebSockets has a bufferedAmount attribute

which can be used to control the rate of sending data. Using the bufferedAmount attribute you can check the number of bytes that have been queue but not yet sent to the server.

if (webSocket.bufferedAmount < THRESHOLD) webSocket.send(someData); };



• Controlling the maximum size of the message• Use the maxMessageSize attribute on

@OnMessage annotation • If the incoming message exceeds the maximum

size then the connection is closed. This is a good practice to control the maximum size of a message so that the client does not deplete its resources trying to handle a message, which it can’t process.




• Use wss protocol with Proxy servers• Proxy servers may not allow unencrypted Web

Socket traffic to flow through. Since the traffic is encrypted there is a greater chance to pass through the proxy server.

• Then the CONNECT statements will work and there will be an end-to-end encrypted tunnel for web sockets.



Client1

Client2

Client3

RESTful Webservices• Key principles of REST• Associating IDs to resources• Using standard HTTP methods• Multiple formats data sent by a resource• Statelessness


RESTful WebServices• GET: The GET request retrieves a representation

of a resource from server to client.• POST: The POST request is used to create a

resource on the server based on the representation that the client sends.

• PUT: The PUT request is used to update or create a reference to a resource on server.

• DELETE: The DELETE request can delete a resource on server.

• HEAD: The HEAD requests checks for a resource without retrieving it.


RESTful WebServices• Safety

o Invoking a method does not change the resource on server

o GET, HEAD are safeo PUT, DELETE, POST are not safe

• Idempotenceo Calling a method multiple times will not

change the resulto GET, HEAD, PUT,DELETE are idempotento POST is not idempotent


JAX-RS 2.0Defines how to expose POJOs as web resources, using HTTP as the network protocol. Applications using these APIs can be deployed to an application server in a portable manner.


Resources and JAX-RS1.Define a root resource@Path(”jedis")public class JediResource {}

2. Define methods for resource and mime type@GET@Produces(“text/plain”)public String getRank() { return rank; // for eg Youngling, Padawan, Jedi Knight or Jedi Master}


SubResources and JAX-RS

1.Define a sub resource@Path("/jedis")public class JediResource { @Path(”/jedi/{name}") public Jedi getJedi(@PathParam(”name") String name){ //return Jedi } public class Jedi { @Path(”/apprentice") public String getApprentice(){ }}


SubResources and JAX-RS

• If request is GET /jedis/Yodas• The JediResource.getJedi() method will be

invoked.• If a client sends a request using the URI• GET /jedis/Yoda/apprentice• Jedi object is returned and getApprentice()

method is invoked


Client API for JAX-RS 2.0

• Client client = ClientBuilder.newClient();• WebTarget target = client.target(URI); • String jedi = target.request().get(String.class);


JAX-RS 2.0 Client API Filters and Interceptors Client-side and Server-side Asynchronous Improved Connection Negotiation Alignment with JSR 330


Java API for JSON Processing JSON-P

Streaming API to produce/consume JSON Similar to StAX API in XML world Object model API to represent JSON Similar to DOM API in XML world


JsonParser JsonParser – Parses JSON in a streaming way from

input sources Similar to StAX’s XMLStreamReader, a pull parser Created Parser state events : START_ARRAY, START_OBJECT, KEY_NAME, VALUE_STRING,

VALUE_NUMBER, VALUE_TRUE, VALUE_FALSE, VALUE_NULL, END_OBJECT, END_ARRAY

Created using : Json.createParser(…),

Json.createParserFactory().createParser(…)


JsonGenerator JsonGenerator – Generates JSON in a streaming

way to output sources Similar to StAX’s XMLStreamWriter Created using : Json.createGenerator(…),

Json.createGeneratorFactory().createGenerator(…)


JsonReader Reads JsonObject and JsonArray from

input source Uses pluggable JsonParser

try (JsonReader reader = new JsonReader(io)) {

JsonObject obj = reader.readObject();

}


JsonWriter Writes JsonObject and JsonArray to

output source Uses pluggable JsonGenerator

// Writes a JSON object

try (JsonWriter writer = new JsonWriter(io)) {

writer.writeObject(obj);

}


JSON sample data{

”name": "Jar Jar Binks”, ”home": “Naboo”,

”affilitation": [

{ "type": ”primary", "name": ”Royal House of Naboo" },

{ "type": ”secondary", "name": ”Galactic republic" }]}

]

}


Call for action• Download GlassFish 4.0 from

glassfish.dev.java.net• File issues, contribute patches• Email [email protected]


mailto:[email protected]

mailto:[email protected]

Questions• Twitter: @bhakti_mehta• Blog https://www.java.net//blogs/bhaktimehta• LinkedIn: http://www.linkedin.com/in/

bhaktihmehta

• May the force be with you!!


https://www.java.net//blogs/bhaktimehta

https://www.java.net//blogs/bhaktimehta

http://www.linkedin.com/in/bhaktihmehta

http://www.linkedin.com/in/bhaktihmehta

fight empire-html5

Technology

data copyright

data client

events copyright

bhakti mehta twitter

client server pushes

server performance

json copyright

message event