True North WebSocket talk

Slide 1

Slide 1 text

WebSockets Bring your site to life using joind.in/7407

Slide 2

Slide 2 text

@boden_c •Ratchet •React Chris

Slide 3

Slide 3 text

What Are WebSockets ? Push Real-time Bi-directional Live

Slide 4

Slide 4 text

Use cases • Notiﬁcations • Chat/Communication • Statistics • Games • Anything/Everything

Slide 5

Slide 5 text

But...Can’t we do that today? Comet

Slide 6

Slide 6 text

How Comet over HTTP works

Slide 7

Slide 7 text

it’s slow it’s hard to develop it wastes bandwidth ...and what’s wrong with that it’s a square peg for a round hole

Slide 8

Slide 8 text

That’s a lot of requests! (sorry for throwing you under the bus Travis. I still <3 you!)

Slide 9

Slide 9 text

How Sockets Work • Client connects to server • Server accepts connection • An open connection is established/maintained • Client/Server sends message to each other

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Network Topology

Slide 12

Slide 12 text

Synchronous Stack Your Traditional Server Processes nginx:80 php-fpm php-fpm php-fpm php-fpm Your app’s source code Storage

Slide 13

Slide 13 text

The Event Loop

Slide 14

Slide 14 text

DEMO TIME!!! Open your terminals and... $ telnet demo.socketo.me 8080

Slide 15

Slide 15 text

WebSocket Recipe + RFC6455 WebSocket Protocol (PHP) HTML5 WebSocket API (JavaScript) = goodness

Slide 16

Slide 16 text

Development Server AND Client share 4 simple events

Slide 17

Slide 17 text

(speaker note: duck)

Slide 18

Slide 18 text

It doesn’t! ...much... It’s getting better!

Slide 19

Slide 19 text

A Shameless Plug Introducing: Ratchet

Slide 20

Slide 20 text

Ratchet is A pure PHP library to serve WebSockets; it is: • RFC6455 compliant • asynchronous • unit tested (hi Mr. Grumpy) • loosely coupled • ready to lose limbs

Slide 21

Slide 21 text

Fun with Numbers Remember how PHP “sucked”?

Slide 22

Slide 22 text

The anatomy of a Ratchet application: Look familiar?

Slide 23

Slide 23 text

the actual logic execute the server Full Chat: under 50 loc!

Slide 24

Slide 24 text

Ratchet Architecture The Decorator design pattern

Slide 25

Slide 25 text

Components

Slide 26

Slide 26 text

The Client (JavaScript)

Slide 27

Slide 27 text

DEMO TIME!!! Open Chrome or Firefox and open your debug console

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Supporting the unsupported Browsers • IE7 • IE8 • IE9

Slide 30

Slide 30 text

...I saw this the other day... seems legit?

Slide 31

Slide 31 text

2 Options SockJS Flash

Slide 32

Slide 32 text

Flash • Very easy to implement • True pollyﬁll • They’re IE users anyway • It’s Flash... • Up to 3 second connect • Port blocked by proxies Pros Cons

Slide 33

Slide 33 text

SockJS • Future proof • Uses native fallbacks • Community support • No PHP implementation • No sub-protocol support Pros Cons

Slide 34

Slide 34 text

Going Polyglot

Slide 35

Slide 35 text

How do we communicate? It’s all about sockets

Slide 36

Slide 36 text

PHP/Python/Java/Node/Ruby socket or MQ (sync) (async)

Slide 37

Slide 37 text

DNode ZeroMQ

Slide 38

Slide 38 text

Practical Development

Slide 39

Slide 39 text

Today’s Issues • Proxies • Scaling • Use SSL • ??? Problem Solution (time solves all problems)

Slide 40

Slide 40 text

Questions? • @boden_c • socketo.me • github.com/cboden/Ratchet • github.com/reactphp • joind.in/7407