WebSockets (sflive2012)

by Igor Wiedler

Slide 1

Slide 1 text

WEBSOCKETS

Slide 2

Slide 2 text

• Symfony2 • Silex • Composer igorw @igorwesome

Slide 3

Slide 3 text

WEBSOCKETS

Slide 4

Slide 4 text

WEB

Slide 5

Slide 5 text

Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical

Slide 6

Slide 6 text

Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical

Slide 7

Slide 7 text

client

Slide 8

Slide 8 text

request client

Slide 9

Slide 9 text

reponse client request

Slide 10

Slide 10 text

THIS IS A GOOD THING

Slide 11

Slide 11 text

BUT

Slide 12

Slide 12 text

NOT FOR EVERYTHING

Slide 13

Slide 13 text

UNIDIRECTIONAL

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

LATENCY

Slide 16

Slide 16 text

LATENCY KEEP-ALIVE PIPELINING SPDY

Slide 17

Slide 17 text

STATELESS

Slide 18

Slide 18 text

Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical

Slide 19

Slide 19 text

Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical

Slide 20

Slide 20 text

WEBSOCKETS

Slide 21

Slide 21 text

SOCKETS

Slide 22

Slide 22 text

WEBSOCKETS

Slide 23

Slide 23 text

PROTOCOL API

Slide 24

Slide 24 text

THE WEBSOCKET PROTOCOL

Slide 25

Slide 25 text

browser

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

• Handshake / Upgrade • TCP + framing • Proxies • Supports TLS (SSL)

Slide 28

Slide 28 text

RFC 6455

Slide 29

Slide 29 text

THE WEBSOCKET API

Slide 30

Slide 30 text

browser

Slide 31

Slide 31 text

var ws = new WebSocket('ws://example.org:8080/updates'); ws.onopen = function () { ws.send('hello'); }; ws.onmessage = function (event) { console.log(event.data); };

Slide 32

Slide 32 text

USE CASES •Games •Notiﬁcations •Collaboration •Statistics •Chat

Slide 33

Slide 33 text

4.0+ (2009) 6.0+ (2011) 10.70+ (2012) 5.0+ (2010) 10+ (2012)

Slide 34

Slide 34 text

• transport abstraction (fallbacks) • broadcasting, reconnection, serialization, other stuff • monolithic! (and almost trying to ﬁx it)

Slide 35

Slide 35 text

SOCKJS

Slide 36

Slide 36 text

var ws = new WebSocket(url);

Slide 37

Slide 37 text

var ws = new SockJS(url);

Slide 38

Slide 38 text

ASYNC STACK Connect Express SockJS

Slide 39

Slide 39 text

ASYNC STACK ? ? SockJS

Slide 40

Slide 40 text

ASYNC STACK EventMachine ? ? SockJS

Slide 41

Slide 41 text

ASYNC STACK ? ? SockJS

Slide 42

Slide 42 text

Y U NO PHP?

Slide 43

Slide 43 text

SYNC STACK Application

Slide 44

Slide 44 text

ASYNC Connect Express SockJS SYNC Application

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

*MQ

Slide 48

Slide 48 text

*MQ Sync Async

Slide 49

Slide 49 text

DEMO

Slide 50

Slide 50 text

DEBUGGING •printf •chrome inspector •wssh •ngrep •zmqc

Slide 51

Slide 51 text

RECAP • Use SockJS • Polyglot is the future • Learn from the MQs

Slide 52

Slide 52 text

LINKS • tools.ietf.org/html/rfc6455 • dev.w3.org/html5/websockets • sockjs.org