Websockets

Transcript

1. WebSockets and Server Sent Events Tuesday, February 5, 13

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

3. WebSockets Tuesday, February 5, 13

4. Get to know me! • software developer (Ruby, Rails, C,

   etc) • http://blog.jonathanrwallace.com/about • jonathan.wallace@gmail.com • @jonathanwallace • All around swell guy Tuesday, February 5, 13

5. Tuesday, February 5, 13

6. Nature of HTTP • stateless • clients send requests •

   servers respond to requests Tuesday, February 5, 13

7. Tuesday, February 5, 13

8. “Bi-directional” communication • Comet • Long polling - “you got

   anything for me?” • Really only two, “streaming” and “long polling” Tuesday, February 5, 13

9. Issues? Tuesday, February 5, 13

10. Long polling Issues? • Header Overhead • Maximal Latency •

    Connection Establishment • Allocated Resources • Graceful Degradation • Timeouts • Caching Tuesday, February 5, 13

11. Streaming Issues? • Framing Techniques • Client Buffering • Network

    Intermediaries • Maximal Latency Tuesday, February 5, 13

12. 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

13. Tuesday, February 5, 13

14. Specially formatted request 1 <script text='javascript'> 2 var ws =

    new WebSocket('ws://example.com:8080'); 3 </script> Tuesday, February 5, 13

15. Client side responsibilities 1 <script text='javascript'> 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 </script> Tuesday, February 5, 13

16. WebSockets support? Tuesday, February 5, 13

17. Tuesday, February 5, 13

18. Tuesday, February 5, 13

19. 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

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

21. Tuesday, February 5, 13

22. WebSockets Demo Tuesday, February 5, 13

23. Tuesday, February 5, 13

24. 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

25. Images • http://www.flickr.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

26. Get to know me! • software developer (Ruby, Rails, C,

    etc) • http://blog.jonathanrwallace.com/about • jonathan.wallace@gmail.com • @jonathanwallace • All around swell guy Tuesday, February 5, 13