vlavrynovych - WebSockets Presentation

HTML 5

WebSockets

Volodymyr Lavrynovych

HTTP Hacks

Polling

Long Polling

Streaming

HTTP request-response (Polling)

Client Server

Connect-Poll

No data in response

Connect-Poll

No data in response

Connect-Poll

Data

Server-Sent Events (Long Polling)

Client Server

Connect-Poll

Data

Poll

Data

Streaming

Client Server

Connect

Push

Close Connection

Push

Push

Push

WebSocketBidirectional communication technology for web apps

WebSocket

Standard W3C protocol (RFC6455)

Web Browsers include window.WebSocket

object. No plugins required

Java EE 7 includes WebSocket API (JSR-356)

W3C: WebSocket Interface

Security

The wss encryption is done the same way as in https

HTTP://... HTTPS://...

WS://… WSS://…

How it works?

1. Establish a socket connection via HTTP for

the initial handshake

2. Switch the protocol from HTTP to a socket-

based protocol

3. Send messages in both directions

simultaneously

The WebSocket handshake

Browser request Server response

GET /mychat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key:

x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat

Sec-WebSocket-Version: 13

Origin: http://example.com

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept:

HSmrc0sMlYUkAGmm5OPpG2HaGWk=

Sec-WebSocket-Protocol: chat

Polling – overhead calculation

A:

1,000 clients polling every second: Network throughput is (959 x 1,000) =

959,000 bytes = 7,672,000 bits per second (7,67 megabits per second)

B:

10,000 clients polling every second: Network throughput is (959 x 10,000) =

9,590,000 bytes = 76,720,000 bits per second (76,72 Mbps)

C:

10,000 clients polling every second: Network throughput is (959 x 100,000) =

95,900,000 bytes = 767,200,000 bits per second (767,2 Mbps)

WebSocket – overhead calculation

A:

1,000 clients receive 1 message per second: Network throughput is (2 x 1,000) =

2,000 bytes = 16,000 bits per second (0.016 megabits per second)

B:

10,000 clients receive 1 message per second: Network throughput is (2 x

10,000) = 20,000 bytes = 160,000 bits per second (0.16 Mbps)

C:

100,000 clients receive 1 message per second: Network throughput is (2 x

100,000) = 200,000 bytes = 1,600,000 bits per second (1,6 Mbps)

Comparing overheads

megabits per second

Polling, C, 767.2

Polling, B, 76.72

Polling, A, 7.67

WebSocket, C, 1.6

WebSocket, B, 0.16

WebSocket, A, 0.016

WebSocket Polling

window.WebSocket object

JS: WebSocket events

Event Event Handler Description

open ws.onopen This event occurs when socket connection is established.

message ws.onmessage This event occurs when client receives data from server.

error ws.onerror This event occurs when there is any error in communication.

close ws.onclose This event occurs when connection is closed.

JS: WebSocket methods

Method Description

ws.send() The send(data) method transmits data

using the connection.

ws.close() The close() method would be used to

terminate any existing connection.

JS: WebSocket object creation

& WebSocket

How to?

Create an endpoint class.

Implement the lifecycle methods of the

endpoint.

Add your business logic to the endpoint.

Deploy the endpoint inside a web application.

Programmatic Endpoints

To deploy this programmatic endpoint, use the following code in your Java EE application:

Annotated Endpoints

Annotation Event Example

OnOpen Connection opened. @OnOpen public void open(Session session, EndpointConfig conf) { }

OnMessage Message received. @OnMessage public void message (Session session, String msg) { }

OnError Connection error. @OnError public void error(Session session, Throwable error) { }

OnClose Connection closed. @OnClose public void close(Session session, CloseReason reason) { }

Simple ChatExample

index.html

chat.js

ChatEndpoint.java (part 1)

ChatEndpoint.java (part 2)

Configurator.java

UI

WebSocket Frame Inspection (with Google Chrome Developer Tools)

Demo

My notes

WebSockets needed 20 sec to identify disconnection on client-side

No possibility to identify disconnection on server-side

To get HttpSession or other data from outside you should use your implementation of ServerEndpointConfig.Configurator class.

Each connection to WebSocket server creates new instance of javax.websocket.Session class

Compatibility

IE Firefox Chrome Safari OperaiOS

Safari

Opera

Mini

Android

Browser

Blackberry

Browser

IE

Mobile

Current 11.0 25.0 30.0 7.0 17.0 7.0 5.0-7.0 4.2-4.3 10.0 10.0

Near

future 31.0 18.0

Source: http://caniuse.com/#feat=websockets

Flash-based workaround

Links

Java API for WebSocket

http://docs.oracle.com/javaee/7/tutorial/doc/websocket.htm

HTML5 - WebSockets Tutorial

http://www.tutorialspoint.com/html5/html5_websocket.htm

The WebSocket API

http://www.w3.org/TR/websockets/

Flash-based workaround

https://github.com/gimite/web-socket-js

Thank you!

[email protected]