Getting Started with WebSockets and Server-Sent Events
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Getting Started with WebSockets and Server-Sent Events

on

  • 6,845 views

 

Statistics

Views

Total Views
6,845
Views on SlideShare
2,298
Embed Views
4,547

Actions

Likes
7
Downloads
82
Comments
0

13 Embeds 4,547

http://blog.arungupta.me 4210
http://www.nljug.org 99
http://cloud.feedly.com 85
http://feeds.feedburner.com 69
http://www.feedspot.com 59
http://feedly.com 6
http://translate.googleusercontent.com 6
http://feedreader.com 4
http://digg.com 2
http://inoreader.com 2
http://www.newsblur.com 2
http://planet.jboss.org 2
http://www.tuicool.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Getting Started with WebSockets and Server-Sent Events Presentation Transcript

  • 1. Getting Started with WebSocket and Server-Sent Event in Java Arun Gupta Director, Developer Advocacy, Red Hat blog.arungupta.me, @arungupta 1Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Picture Here
  • 2. Program Agenda  WebSocket Primer  Getting Started with WebSocket  Server-Sent Event Primer  Getting Started with Server-Sent Event  Resources 2 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 3. Interactive Web Sites HTTP is half-duplex HTTP is verbose Hacks for Server Push ● Polling ● Long Polling ● Comet/Ajax Complex, Inefficient, Wasteful 3 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 4. WebSocket to the Rescue TCP based, bi-directional, full-duplex messaging Originally proposed as part of HTML5 IETF-defined Protocol: RFC 6455 ● Handshake ● Data Transfer W3C defined JavaScript API Candidate Recommendation 4 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 5. Establish a connection Handshake Request Client Server Handshake Response 5 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 6. Handshake Request GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 6 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 7. Handshake Response HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: chat 7 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 8. Establishing a Connection Handshake Request Client Server Handshake Response Connected ! 8 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 9. WebSocket Lifecycle Connected ! open Peer (client) open message message message message error message close Disconnected 9 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Peer (server)
  • 10. WebSocket API www.w3.org/TR/websockets/ 10 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 11. Browser Support 11 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. http://caniuse.com/websockets
  • 12. 12 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 13. Java API for WebSocket Features API for WebSocket Server/Client Endpoints ● Annotated (@ServerEndpoint, @ClientEndpoint) ● Programmatic (Endpoint) ● WebSocket opening handshake negotiation Lifecycle callback handlers Packaging with Java EE applications 13 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 14. Annotated Endpoint import javax.websocket.*; @ServerEndpoint("/hello") public class HelloBean { @OnMessage public String sayHello(String name) { return “Hello “ + name; } } 14 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 15. Annotations Annotation Level Purpose @ServerEndpoint class Turns a POJO into a WebSocket Endpoint @ClientEndpoint class POJO wants to act as client @OnMessage @PathParam method Intercepts WebSocket Message events method Flags a matched path segment of a URI-template parameter @OnOpen Intercepts WebSocket Open events @OnClose method Intercepts WebSocket Close events @OnError 15 method method Intercepts errors during a conversation Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 16. @ServerEndpoint Attributes value decoders list of message decoder classnames encoders list of message encoder classnames subprotocols 16 Relative URI or URI template e.g. “/hello” or “/chat/{subscriber-level}” list of the names of the supported subprotocols Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 17. Custom Payloads @ServerEndpoint( value="/hello", encoders={MyMessage.class}, decoders={MyMessage.class} ) public class MyEndpoint { . . . } 17 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 18. Custom Payloads – Text public class MyMessage implements Decoder.Text<MyMessage>, Encoder.Text<MyMessage> { private JsonObject jsonObject; public MyMessage decode(String s) { jsonObject = Json.createReader(new StringReader(s)).readObject(); return this; } public boolean willDecode(String string) { return true; // Only if can process the payload } public String encode(MyMessage myMessage) { return myMessage.jsonObject.toString(); } } 18 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 19. Custom Payloads – Binary public class MyMessage implements Decoder.Binary<MyMessage>, Encoder.Binary<MyMessage> { public MyMessage decode(byte[] bytes) { . . . return this; } public boolean willDecode(byte[] bytes) { . . . return true; // Only if can process the payload } public byte[] encode(MyMessage myMessage) { . . . } } 19 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 20. Which methods can be @OnMessage ? Exactly one of the following ● Text: String, Java primitive or equivalent class, String and boolean, Reader, any type for which there is a decoder ● Binary: byte[], ByteBuffer, byte[] and boolean, ByteBuffer and boolean, InptuStream, any type for which there is a decoder ● Pong messages: PongMessage An optional Session parameter 0..n String parameters annotated with @PathParam Return type: String, byte[], ByteBuffer, Java primitive or class equivalent or any type for which there is a encoder 20 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 21. Sample Messages void m(String s); void m(Float f, @PathParam(“id”)int id); Product m(Reader reader, Session s); void m(byte[] b); or void m(ByteBuffer b); Book m(int i, Session s, @PathParam(“isbn”)String isbn, @PathParam(“store”)String store); 21 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 22. Chat Server @ServerEndpoint("/chat") public class ChatBean { static Set<Session> peers = Collections.synchronizedSet(…); @OnOpen public void onOpen(Session peer) { peers.add(peer); } @OnClose public void onClose(Session peer) { peers.remove(peer); } . . . 22 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 23. Chat Server . . . @OnMessage public void message(String message, Session client) { for (Session peer : peers) { peer.getBasicRemote().sendObject(message); } } } 23 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 24. https://blogs.oracle.com/arungupta/entry/collaborative_whiteboard_using_websocket_in 24Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 25. WebSocket Client @ClientEndpoint public class HelloClient { @OnMessage public void message(String message, Session session) { // process message from server } } WebSocketContainer c = ContainerProvider.getWebSocketContainer(); c.connectToServer(HelloClient.class, “hello”); 25 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 26. Programmatic Endpoint public class MyEndpoint extends Endpoint { @Override public void onOpen(Session session) { session.addMessageHandler(new MessageHandler.Text() { public void onMessage(String name) { try { session.getBasicRemote().sendText(“Hello “ + name); } catch (IOException ex) { } } }); } } 26 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 27. How to view WebSocket messages ? Capture traffic on loopback 27 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 28. How to view WebSocket messages ? chrome://net-internals -> Sockets -> View live sockets 28 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 29. Server-Sent Events Part of HTML5 Specification Server-push notifications Cross-browser JavaScript API: EventSource Message callbacks MIME type: text/eventstream 29 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 30. EventSource API dev.w3.org/html5/eventsource/ 30 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 31. Server-Sent Events Example Client-side var url = ‘webresources/items/events’; var source = new EventSource(url); source.onmessage = function (event) { console.log(event.data); } source.addEventListener(“size”, function(event) { console.log(event.name + ‘ ‘ + event.data); } 31 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 32. Server-Sent Events Example private final SseBroadcaster BROADCASTER = new SseBroadcaster(); @GET @Path("events”) @Produces(SseFeature.SERVER_SENT_EVENTS) public EventOutput fruitEvents() { final EventOutput eventOutput = new EventOutput(); BROADCASTER.add(eventOutput); return eventOutput; } 32 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 33. Server-Sent Events Example @POST @Consumes(MediaType.APPLICATION_FORM_URLENCODED) public void addFruit(@FormParam("fruit")String fruit) { FRUITS.add(fruit); // Broadcasting an un-named event with the name of the newly added item in data BROADCASTER.broadcast(new OutboundEvent.Builder().data(String.class, fruit).build()); // Broadcasting a named "add" event with the current size of the items collection in data BROADCASTER.broadcast(new OutboundEvent.Builder().name("size").data(Integer.class, FRUITS.size()).build()); } 33 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 34. WebSocket and Server-Sent Event Competing technologies ? WebSocket Over a custom protocol Over simple HTTP Full Duplex, Bi-directional Server-Push Only, Client->Server is out-of-band (higher latency) Native support in most browsers Can be poly-filled to backport Not straight forward protocol 34 Server-Sent Event Simpler protocol Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 35. WebSocket and Server-Sent Event Competing technologies ? WebSocket Pre-defined message handlers Arbitrary events Application-specific Built-in support for re-connection and event id Require server and/or proxy configurations No server or proxy changes required ArrayBuffer and Blob 35 Server-Sent Event No support for binary types Copyright © 2013, Oracle and/or its affiliates. All rights reserved.