Getting Started with
WebSocket and Server-Sent
Event in Java
Arun Gupta
Director, Developer Advocacy, Red Hat
blog.arungup...
Program
Agenda

 WebSocket Primer
 Getting Started with WebSocket
 Server-Sent Event Primer
 Getting Started with Serv...
Interactive Web Sites
HTTP is half-duplex
HTTP is verbose
Hacks for Server Push
●
Polling
●

Long Polling

●

Comet/Ajax

...
WebSocket to the Rescue
TCP based, bi-directional, full-duplex messaging
Originally proposed as part of HTML5
IETF-defined...
Establish a connection
Handshake Request

Client

Server
Handshake Response

5

Copyright © 2013, Oracle and/or its affili...
Handshake Request
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dG...
Handshake Response
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiT...
Establishing a Connection
Handshake Request

Client

Server
Handshake Response

Connected !

8

Copyright © 2013, Oracle a...
WebSocket Lifecycle

Connected !

open

Peer
(client)

open

message
message
message

message
error
message

close

Discon...
WebSocket API
www.w3.org/TR/websockets/

10

Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
Browser Support

11

Copyright © 2013, Oracle and/or its affiliates. All rights reserved.

http://caniuse.com/websockets
12

Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
Java API for WebSocket Features
API for WebSocket Server/Client Endpoints
●
Annotated (@ServerEndpoint, @ClientEndpoint)
●...
Annotated Endpoint
import javax.websocket.*;
@ServerEndpoint("/hello")
public class HelloBean {
@OnMessage
public String s...
Annotations
Annotation

Level

Purpose

@ServerEndpoint

class

Turns a POJO into a WebSocket Endpoint

@ClientEndpoint

c...
@ServerEndpoint Attributes

value
decoders

list of message decoder classnames

encoders

list of message encoder classnam...
Custom Payloads
@ServerEndpoint(
value="/hello",
encoders={MyMessage.class},
decoders={MyMessage.class}
)
public class MyE...
Custom Payloads – Text
public class MyMessage implements Decoder.Text<MyMessage>, Encoder.Text<MyMessage> {
private JsonOb...
Custom Payloads – Binary
public class MyMessage implements Decoder.Binary<MyMessage>, Encoder.Binary<MyMessage> {
public M...
Which methods can be @OnMessage ?
Exactly one of the following
● Text: String, Java primitive or equivalent class, String ...
Sample Messages
void m(String s);
void m(Float f, @PathParam(“id”)int id);
Product m(Reader reader, Session s);
void m(byt...
Chat Server
@ServerEndpoint("/chat")
public class ChatBean {
static Set<Session> peers = Collections.synchronizedSet(…);
@...
Chat Server
. . .
@OnMessage
public void message(String message, Session client) {
for (Session peer : peers) {
peer.getBa...
https://blogs.oracle.com/arungupta/entry/collaborative_whiteboard_using_websocket_in

24Copyright © 2013, Oracle and/or it...
WebSocket Client
@ClientEndpoint
public class HelloClient {
@OnMessage
public void message(String message, Session session...
Programmatic Endpoint
public class MyEndpoint extends Endpoint {
@Override
public void onOpen(Session session) {
session.a...
How to view WebSocket messages ?
Capture traffic on loopback

27

Copyright © 2013, Oracle and/or its affiliates. All righ...
How to view WebSocket messages ?
chrome://net-internals -> Sockets -> View live sockets

28

Copyright © 2013, Oracle and/...
Server-Sent Events
Part of HTML5 Specification
Server-push notifications
Cross-browser JavaScript API: EventSource
Message...
EventSource API
dev.w3.org/html5/eventsource/

30

Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
Server-Sent Events Example
Client-side

var url = ‘webresources/items/events’;
var source = new EventSource(url);
source.o...
Server-Sent Events Example
private final SseBroadcaster BROADCASTER = new SseBroadcaster();
@GET
@Path("events”)
@Produces...
Server-Sent Events Example
@POST
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
public void addFruit(@FormParam("fruit")...
WebSocket and Server-Sent Event
Competing technologies ?

WebSocket
Over a custom protocol

Over simple HTTP

Full Duplex,...
WebSocket and Server-Sent Event
Competing technologies ?

WebSocket
Pre-defined message handlers

Arbitrary events

Applic...
Upcoming SlideShare
Loading in...5
×

Getting Started with WebSockets and Server-Sent Events

7,487

Published on

Published in: Technology, News & Politics

Getting Started with WebSockets and Server-Sent Events

  1. 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. 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. 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. 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. 5. Establish a connection Handshake Request Client Server Handshake Response 5 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  6. 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. 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. 8. Establishing a Connection Handshake Request Client Server Handshake Response Connected ! 8 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  9. 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. 10. WebSocket API www.w3.org/TR/websockets/ 10 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  11. 11. Browser Support 11 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. http://caniuse.com/websockets
  12. 12. 12 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. https://blogs.oracle.com/arungupta/entry/collaborative_whiteboard_using_websocket_in 24Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  25. 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. 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. 27. How to view WebSocket messages ? Capture traffic on loopback 27 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  28. 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. 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. 30. EventSource API dev.w3.org/html5/eventsource/ 30 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  31. 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. 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. 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. 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. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×