Websockets - Speaker Deck

Slide 1

Slide 1 text

WebSockets and Server Sent Events Tuesday, February 5, 13

Slide 2

Slide 2 text

WebSockets a̶n̶d̶ ̶S̶e̶r̶v̶e̶r̶ ̶S̶e̶n̶t̶ ̶E̶v̶e̶n̶t̶s̶ Tuesday, February 5, 13

Slide 3

Slide 3 text

WebSockets Tuesday, February 5, 13

Slide 4

Slide 4 text

Get to know me! • software developer (Ruby, Rails, C, etc) • http://blog.jonathanrwallace.com/about • [email protected] • @jonathanwallace • All around swell guy Tuesday, February 5, 13

Slide 5

Slide 5 text

Tuesday, February 5, 13

Slide 6

Slide 6 text

Nature of HTTP • stateless • clients send requests • servers respond to requests Tuesday, February 5, 13

Slide 7

Slide 7 text

Tuesday, February 5, 13

Slide 8

Slide 8 text

“Bi-directional” communication • Comet • Long polling - “you got anything for me?” • Really only two, “streaming” and “long polling” Tuesday, February 5, 13

Slide 9

Slide 9 text

Issues? Tuesday, February 5, 13

Slide 10

Slide 10 text

Long polling Issues? • Header Overhead • Maximal Latency • Connection Establishment • Allocated Resources • Graceful Degradation • Timeouts • Caching Tuesday, February 5, 13

Slide 11

Slide 11 text

Streaming Issues? • Framing Techniques • Client Buffering • Network Intermediaries • Maximal Latency Tuesday, February 5, 13

Slide 12

Slide 12 text

WebSockets: how they work • client sends specially formatted HTTP request to server • server must support websocket protocol • that connection is upgraded to a websocket and you can send anything up and down that connection Tuesday, February 5, 13

Slide 13

Slide 13 text

Tuesday, February 5, 13

Slide 14

Slide 14 text

Specially formatted request 1 2 var ws = new WebSocket('ws://example.com:8080'); 3 Tuesday, February 5, 13

Slide 15

Slide 15 text

Client side responsibilities 1 2 # ... 3 ws.onmessage = function(evt) { 4 $("#msg").append("<p>"+evt.data+"</p>"); 5 }; 6 ws.onclose = function() { debug("socket closed"); }; 7 ws.onopen = function() { 8 debug("connected..."); 9 ws.send("hello server"); 10 }; 11 # ... 12 Tuesday, February 5, 13

Slide 16

Slide 16 text

WebSockets support? Tuesday, February 5, 13

Slide 17

Slide 17 text

Tuesday, February 5, 13

Slide 18

Slide 18 text

Tuesday, February 5, 13

Slide 19

Slide 19 text

Ruby WebSockets server 1 require 'rubygems' 2 require 'em-websocket' 3 4 EventMachine::WebSocket.start( 5 :host => "0.0.0.0", :port => 8080) do |ws| 6 ws.onopen { ws.send "Hello Client!"} 7 ws.onmessage { |msg| ws.send "Pong: #{msg}" } 8 ws.onclose { puts "WebSocket closed" } 9 end Tuesday, February 5, 13

Slide 20

Slide 20 text

What can you send over WebSockets? Tuesday, February 5, 13

Slide 21

Slide 21 text

Tuesday, February 5, 13

Slide 22

Slide 22 text

WebSockets Demo Tuesday, February 5, 13

Slide 23

Slide 23 text

Tuesday, February 5, 13

Slide 24

Slide 24 text

Credits • http://www.html5rocks.com/en/tutorials/websockets/basics/ • http://www.html5rocks.com/en/tutorials/eventsource/basics/ • http://tenderlovemaking.com/2012/07/30/is-it-live.html • http://www.ibm.com/developerworks/library/wa-reverseajax1/ • http://tools.ietf.org/html/draft-loreto-http-bidirectional-07 • https://github.com/igrigorik/em-websocket • http://www.igvita.com/2009/12/22/ruby-websockets-tcp-for-the- browser/ Tuesday, February 5, 13

Slide 25

Slide 25 text

Images • http://www.ﬂickr.com/photos/67828440@N05/galleries/ 72157632691816485/with/2985066755/#photo_2985066755 • http://betterexplained.com/articles/how-to-optimize-your- site-with-gzip-compression/ Tuesday, February 5, 13

Slide 26

Slide 26 text

Get to know me! • software developer (Ruby, Rails, C, etc) • http://blog.jonathanrwallace.com/about • [email protected] • @jonathanwallace • All around swell guy Tuesday, February 5, 13