WEBSOCKET PROTOCOL

2012/7/5(THU)

KENSAKU KOMATSU

http://goo.gl/0kJGW

Yet another html5j meetup on July 5th, 2012

• Researching cutting-edge web technology

• Especially APIs related to NW, in preference

• Google API Expert (HTML5)

• Microsoft Most Valuable Professional(IE)

• Twitter: @komasshu

• Blog: http://blog.livedoor.jp/kotesaki

SELF-INTRODUCTION

ACTIVITIES(I LOVE SPEED!!)

http://wakachi.komasshu.info/

Referred!!, But… orz(I know I should do feedback)

http://www.html5rocks.com/en/tutorials/speed/quick/

TODAY’S MAIN IDEA

Two topics

1. Introduction to WebSocket and SPDY

2. Dive into WebSocket Protocol.

TOPIC1:

Introduction to WebSocket and SPDY

http://www.flickr.com/photos/cubedude27/4892016155/

EVOLVING OFWEB SERVICES

http://www.ocn.ne.jp/http://www.ibarakiken.gr.jp/www/index.html https://www.facebook.com/

1991 2012

COMMUNICATION MODEL HAS BEEN CHANGED

http://www.ocn.ne.jp/http://www.ibarakiken.gr.jp/www/index.html https://www.facebook.com/

1991 2012

Single resourceMultiple resources

Multiple resources+

Bi-directional

TRANSPORT PROTOCOL HAS NOT CHANGED

GET index.html

GET style.css

REQUEST

RESPONSE

REQUEST

RESPONSE

That’s HTTP.

ISSUES IN HTTP

Slow in multiple resources Periodically polling

hello!

“hello”

CURRENT PRACTICEFOR SOLVING ISSUES

Concurrent tcp connections Long Polling

“hello”

hello!

BUT STILL…

• Concurrent tcp request

• Increase server load• Heavy load to intermediary

• e.g. NAT, proxy, FireWall…

• Long polling

• Complicated coding• Increase traffics

• Header: k – 10k order• Payload : 10 bytes order …

CUTTING EDGE PROTOCOLSSPDY, WEBSOCKET

SPDY WebSocket

“hello”

hello!

・Multiplex requestUnder single https

connection.

・ Enable bidirectionalcommunication wo/

restrictions.(request not needed)・ Header overhead is

extremely small.

WebSocket

PROTOCOL STACKS

TCP

TLS

Any protocols

SPDY (framing layer)

TCP

TLS

SPDY (HTTP layer)

SSBP will be applied here?

WebSocketSPDY

A COMPARATIVE TABLESPDY WebSocket

Goal reduce the latency of web pages

provide two-way communication to browser-based application

How to setup 1. apply patch/module to your middleware

1. setup middleware2. write server side

programming3. write client side javascript

Migration very easy expensive

Coding skill not required mandatory

What we can serve?

Fast while downloading web resources.

Anything (especially bi-directional webapps (e.g. chat, push services, online game ))

TOPIC2:

Dive into WebSocket Protocol

http://www.flickr.com/photos/nektar/6085553520/sizes/z/in/photostream/

DEMO:MULTI DEVICEINTERACTION

WebIntents+

ServiceDiscovery (uPnP)

WebSocket

DEMO: COMPARATIVE TEST (WS VS HTTP)

http://refws.komasshu.info/echocompare.html

REF: CASE HTTP

// send request

$.get(“http://example.com”, function(data, e) {

// when data is received

console.log(data);

});

To receive data, sending request must be required.

HOW TO USE WEBSOCKET? (BROWSER SIDE API)

// initiate connection

var ws = new WebSocket(“ws://example.com/”);

// right after connection established

ws.onconnect = function(e) { ... };

// when data arrival from server

ws.onmessage = function(e) { console.log(e.data); }

// send data to server

ws.send(“hello”);

// close connection

ws.close(); sending and receiving data works independently.

PROTOCOL OVERVIEWThe WebSocket Protocol (RFC6455)

•Has two parts

• handshake• in context of HTTP/1.1

• data transfer• frame format

•protocol schema

• ws (80), wss(443)•browsers

• chrome, firefox, safari, opera(need configuration), IE10• iOS safari, Android browser (Chrome)

SEQUENCE OVERVIEW

handshake

data transfer

closing

HANDSHAKEclient to server

server to client

DATA FRAMINGindicates text, binary, ping, pong, close ...

Payload data is masked with Masking-key (XOR base)(preventing Firewall Circumvention & Cache Poisoning)

WHAT FOR PING/PONG?

NATFireWall

LoadBalan

cer

Under no-traffic, intermediariesrelease session table

Known as “silent close”.

websocketconnection

WHAT FOR PING/PONG? [CONT]

NATFireWall

LoadBalan

cerwebsocketconnection

ping

pong

ping & pong is used to prevent silent close (Keep-alive)

IPv4 Private address NW

ADDITIONAL INFOCGN IN MOBILE NW

Career Grade NAT

G

P P P P

CGN is already installed into almost all mobile career NW.So using ping/pong is necessary (also thinking about battery issues).

GETTING REACH ABILITY

proxyFireWall

LoadBalan

cerwebsocketconnection

Use WSS (prevent interruption)

Treat WS traffic as HTTP/1.1⇨　 Data framing will blocked ;-(

SUBPROTOCOL•WebSocket can handle any data schema.

• example: transfer mouse coordinates• option1 : {x: 1, y:240}• option2 : [1, 240]• option3 : {x: “1px”, y: “240px”}

• ...... lack of interoperability

•subprotocol addresses the interoperability problem

• define schema, sequence, ...• should register IANA

• identifier, common name, definition

SUBPROTOCOL[CONT]

http://www.iana.org/assignments/websocket/websocket.xml

EXTENSION

Two proposal are now discussed.

•Multiplexing Extension

• http://tools.ietf.org/html/draft-ietf-hybi-websocket-multiplexing-03

•Per-frame Compression

• http://tools.ietf.org/html/draft-ietf-hybi-websocket-perframe-compression-04

SOCKET.IO

Automatically fallback from WebSocket to Comet.

Automatic keep-alive, name space, ... very convenient!!

http://socket.io/

FOR SCALABLE SERVICES

Load balancer

WSserver

WSserver

WSserver

WSserver

redis, mongoDB, ...

user access

sync status /message sharing

some persistencywill required

(source IP hash,cookie ...)

node-proxynginx(work in progress)

CONCLUSION•WebSocket

• provide two-way communication to browser-based application• NO request & response restrictions• default port is 80 (ws), 443(wss)• consists of two parts

• handshake : upgrade mechanism• data transfer : text (utf-8) and binary

• ping/pong• prevent silent close

• wss• get reach ability

• subprotocol• interoperability

• extensions• multiplexing, per-frame compression

THANK YOU!!

http://www.flickr.com/photos/23086934@N02/2250806050/