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

Websockets

 Websockets

Review websockets, what they are and give a simple example

Jonathan Wallace

February 05, 2013
Tweet

More Decks by Jonathan Wallace

Other Decks in Programming

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