Getting Started with WebSockets and Server-Sent Events

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

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.

Interactive Web Sites
HTTP is half-duplex
HTTP is verbose
Hacks for Server Push
●
Polling
●

Long Polling

●

Comet/Ajax

Complex, Inefficient, Wasteful

3


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


Establish a connection
Handshake Request

Client

Server
Handshake Response

5


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


Handshake Response
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

7


Establishing a Connection
Handshake Request

Client

Server
Handshake Response

Connected !

8


WebSocket Lifecycle

Connected !

open

Peer
(client)

open

message
message
message

message
error
message

close

Disconnected
9


Peer
(server)

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

10


Browser Support

11


http://caniuse.com/websockets

12


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


Annotated Endpoint
import javax.websocket.*;
@ServerEndpoint("/hello")
public class HelloBean {
@OnMessage
public String sayHello(String name) {
return “Hello “ + name;
}
}

14


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


@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


Custom Payloads
@ServerEndpoint(
value="/hello",
encoders={MyMessage.class},
decoders={MyMessage.class}
)
public class MyEndpoint {
. . .
}

17


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


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


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


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


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


Chat Server
. . .
@OnMessage
public void message(String message, Session client) {
for (Session peer : peers) {
peer.getBasicRemote().sendObject(message);
}
}
}

23


https://blogs.oracle.com/arungupta/entry/collaborative_whiteboard_using_websocket_in

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

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


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


How to view WebSocket messages ?
Capture traffic on loopback

27


How to view WebSocket messages ?
chrome://net-internals -> Sockets -> View live sockets

28


Server-Sent Events
Part of HTML5 Specification
Server-push notifications
Cross-browser JavaScript API: EventSource
Message callbacks
MIME type: text/eventstream

29


EventSource API
dev.w3.org/html5/eventsource/

30


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


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


@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


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


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


Getting Started with WebSockets and Server-Sent Events

More Related Content

What's hot (19)

Similar to Getting Started with WebSockets and Server-Sent Events (20)

More from Arun Gupta (20)

Recently uploaded (20)

Getting Started with WebSockets and Server-Sent Events