Speed up Your Web Applications with HTML5 WebSockets. Yakov Fain, Farata Systems, USA

Transcription

1 Speed up Your Web Applications with HTML5 WebSockets Yakov Fain, Farata Systems, USA

2

3 The Plan - HTTP request-response - Demo - Server-Sent Events - Demo - WebSocket - Demo

4 What Do You See?

5 HTTP Hacks Polling Long Polling Streaming

6 Polling

7 Long Polling

8 Streaming

9 Getting Price Quotes from Google Finance

10 HTTP Request Response Demo

11 Introducing the Demo The Software The Server: GlassFish 4 (promoted build B88), Oracle The server-side Java app can generate random price quotes The Client: HTML5 Ext JS framework, Sencha The Browser: Chrome, Google Charles Proxy The Goal 1. The server generates random stock prices for a 12-stock portfolio 2. The user sends a request for price quote for a stock 3. The HTML client displays the received price 4. Observe what went over the network

12 The Server: public class RestResource { = public String getrandomvalue(@pathparam(value = "ticker") String ticker) { return new Gson().toJson(RandomStocksGenerator.getDataForTicker(ticker));

13 The Client: AJAX in Ext JS 'mypanel button[action=dorestcall]': click: this.onrestcall } onrestcall: function (btn) { var ticker = Ext.ComponentQuery.query('mypanel textfield[name=ticker]')[0].getvalue(); var rest_url = " + document.location.host + document.location.pathname + "rest/stock/"; rest_url = rest_url + ticker; Ext.Ajax.request({ url: rest_url, scope: this, success: function (response) { var a = Ext.JSON.decode(response.responseText); a.price = parsefloat(a.price).tofixed(4); console.log(a); } });

14 Server-Sent Events

15 What s SSE It s not a request-response mode The browser subscribes to events from server by creating EventSource pointing to this server The server can send data to client at any time The browser receives an event + data

16 Browser Subscribes to SSE var source = new EventSource(' source.addeventlistener('open', function(e) { // Connection was opened. }, false); source.addeventlistener( pricechanged', function(e) { var pricequote = JSON.parse(e.data); }, false); source.addeventlistener('error', function(e) { if(e.readystate == EventSource.CLOSED) { // Connection was closed. } }, false); To listen to any messages: source.onmessage = function(e) {.};

17 Pushing SSE from Server The server sends events as text messages with MIME `text/ event-stream`. Each message starts with data: and end with a pair /n/n: 'data: {"price": "123.45"}/n/n` The browser concatenates all these messages separating them with /n.

18 Pushing from Glassfish public class SseResource { private static final SseBroadcaster BROADCASTER = new SseBroadcaster(); private boolean isrunning = false; private @Produces(SseFeature.SERVER_SENT_EVENTS) public EventOutput itemevents() { } final EventOutput eventoutput = new EventOutput(); BROADCASTER.add(eventOutput); if (!isrunning) startbroadcasttask(); return eventoutput;

19 Broadcasting in Jersey protected void startbroadcasttask() { broadcasttimer = new Timer(); broadcasttimer.schedule( new SseBroadcastTask(BROADCASTER, 0), 0, 300); } this.isrunning = true; public class SseBroadcastTask extends TimerTask { private final SseBroadcaster owner; public SseBroadcastTask(SseBroadcaster owner, int timeout) { this.owner = owner; public void run() { OutboundEvent event = new OutboundEvent.Builder().data( String.class, RandomStocksGenerator.getRandomValues().toJson()).build(); owner.broadcast(event);

20 Push With Serer-Sent Events Demo

21 Introducing the SSE Demo The Software The Server: GlassFish 4 (promoted build B88), Oracle The Java app can generate random price quotes The Client: HTML5 Ext JS framework, Sencha The Chrome Browser, Google The Goal 1. The server generates random stock prices for a 12-stock portfolio 2. The server pushes 3 price quotes per second using SSE 3. The HTML client shows the prices in a data grid

22 WebSocket

23 WebSocket Standard W3C protocol (RFC6455) Java EE 7 includes WebSocket API (JSR-356) Web Browsers include window.websocket object. No plugins required.

24 How WebSocket Works Establish a socket connection via HTTP for the initial handshake. Switch the protocol from HTTP to a socket-based protocol. Send messages in both directions simultaneously. This is not a request-response model!

25 Protocol Upgrade: HTTP à WebSocket Client sends Upgrade HTTP-request Server confirms Upgrade Client receives Upgrade response from server Client changes WebSocket.readyState to open

26 URI Schemes WS:// WSS:// The wss encryption is done the same way as in https

27 W3C: WebSocket Interface [Constructor(DOMString url, optional (DOMString or DOMString[]) protocols)] //<1> interface WebSocket : EventTarget { readonly attribute DOMString url; const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSING = 2; const unsigned short CLOSED = 3; readonly attribute unsigned short readystate; readonly attribute unsigned long bufferedamount; // networking [TreatNonCallableAsNull] attribute Function? onopen; [TreatNonCallableAsNull] attribute Function? onerror; [TreatNonCallableAsNull] attribute Function? onclose; readonly attribute DOMString extensions; readonly attribute DOMString protocol; / void close([clamp] optional unsigned short code, optional DOMString reason); // messaging [TreatNonCallableAsNull] attribute Function? onmessage; attribute DOMString binarytype; void send(domstring data); void send(arraybufferview data); void send(blob data); };

28 @ServerEndpoint in Java EE Your Java Endpoint and other classes Client Decoder Encoder POJO

29 WebSocket = "/stock-generator", encoders = { StockMessageEncoder.class }, decoders = { StockMessageDecoder.class }) public class StocksEndpoint public void onopen(session session) { public void onmessage(stockmessage message, Session client) { } public void onclose(session session) { }

30 Decoder public class StockMessageDecoder implements Decoder.Text<StockMessage> public StockMessage decode(string s) throws DecodeException { Gson gson = new Gson(); return gson.fromjson(s, StockMessage.class); } } Encoder public class StockMessageEncoder implements Encoder.Text<StockMessage> { public String encode(stockmessage object) throws EncodeException { return new Gson().toJson(object); }

31 Heartbeats: Pings and Pongs Heartbeats is a mechanism to check that connection is still alive. If a WebSocket implementation receives a ping it has to respond with a pong ASAP. There is no JavaScript API to support Pings and Pongs.

32 Web Socket Demo

33 Introducing the WebSocket Demo The Software The Server: GlassFish 4 (promoted build B88), Oracle The Java app can generate random price quotes The Client: HTML5 Ext JS framework, Sencha The Chrome Browser, Google Charles proxy The Goal 1. The server generates random stock prices for a 12-stock portfolio 2. The server pushes 20 price quotes per second using WebSocket 3. The HTML client shows the prices in a data grid

34 What was Pushed via WebSocket The size of each data push: The length price quote data: from 42 to 45 bytes {"symbol": "APPL", "id": 555, "price": "451.29"} WebSocket added overhead: 2 bytes

35 Comparing Overheads Http Request-Response Each roundtrip has: request header: 429 bytes bytes response header + 46 bytes data Server-Sent Events Initial request header 406 bytes bytes response header Each push: 46 bytes data + 8 bytes message wrapper WebSocket Initial upgrade request: 406 bytes bytes Each push 46 bytes data + 2 bytes message wrapper It s full-duplex, not HTTP-based, works much faster.

36 Caniuse.com: Browser Support

37 Reducing kilobytes of data to 2 bytes... and reducing latency from 150ms to 50 ms is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google. Ian Hickson, Google

38 The unedited drafts of the book Enterprise Web Development are published at enterprisewebbook.com.

39 Contact Info Farata Systems: faratasystems.com Personal blog: yakovfain.com Podcasts in Russian: americhka.us Thank you!