Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Websockets

 Websockets

Review websockets, what they are and give a simple example

D3630c5a12aa3e85748670729444d5a9?s=128

Jonathan Wallace

February 05, 2013
Tweet

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