Pushing the web — WebSockets

24,478 views

Published on

Published in: Technology

Pushing the web — WebSockets

  1. 1. Pushing the Web with WebSockets. Roland Moriz, Moriz GmbH http://www.moriz.de/ http://www.IsItRails.com/
  2. 2. HTTP is a stateless protocol. Request GET / HTTP/1.1 Host www.moriz.de User-Agent Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_3; de-de) ... Accept application/xml,application/xhtml+xml,text/html;q=0.9,text/plain; ...
  3. 3. HTTP is a stateless protocol. Response HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding Status: 200 X-Powered-By: Phusion Passenger (mod_rails/mod_rack) 2.2.11 ETag: "857fa3051dead14aca5efdbc8721f6a1" X-Runtime: 20 Cache-Control: max-age=43200, public Server: nginx/0.7.64 + Phusion Passenger 2.2.11 (mod_rails/mod_rack) Content-Encoding: gzip Content-Length: 2027 Date: Fri, 11 Jun 2010 08:45:10 GMT X-Varnish: 692995266 692995045 Age: 3535 Via: 1.1 varnish Connection: keep-alive X-Cache: HIT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <!-- All your Base are belong to us! -->
  4. 4. HTTP Client Server
  5. 5. CC / via http://www.flickr.com/photos/stevendepolo/3212039475/
  6. 6. PUSH event driven! Client Server stock price change chat response game event ...
  7. 7. PUSH what we‘ve used in the past „Comet“ „HTTP Streaming“ Flash XMLHttpRequest Java Applet ...
  8. 8. PUSH what we‘ve used in the past „Fake push“ • cyclic polling (each x seconds) • delayed response • netscape‘s 1995 mulitpart HTTP response • chuncked block http response (http://en.wikipedia.org/wiki/Chunked_transfer_encoding)
  9. 9. PUSH what we‘ve used in the past „Fake push“ SUCKS. • cyclic polling (each x seconds) • delayed response • netscape‘s 1995 mulitpart HTTP response • chuncked block http response (http://en.wikipedia.org/wiki/Chunked_transfer_encoding)
  10. 10. PUSH what we‘ve used in the past „Plugins“ Persistent Bi-Directional Connection Flash JavaScript Server Java Applet DOM
  11. 11. PUSH what we‘ve used in the past „Plugins“ Persistent Bi-Directional Connection Flash DOM Server Java Applet
  12. 12. PUSH what we‘ve used in the past „Plugins“ Persistent FREAKS. Bi-Directional Connection Flash DOM Server Java Applet
  13. 13. PUSH what we‘ve used in the past „Plugins“ Persistent Bi-Directional Connection Browser Plugin Server
  14. 14. PUSH what we actually want Persistent Bi-Directional Connection Browser Server
  15. 15. WebSockets!
  16. 16. var socket = new WebSocket('ws://vm.io/channel/ruby-muenchen'); socket.onopen = function() { ... }; socket.onmessage = function() { ... }; socket.onerror = function() { ... }; socket.onclose = function() { ... };
  17. 17. Specs • http://www.whatwg.org/specs/web- apps/current-work/ • http://www.whatwg.org/specs/web- socket-protocol/ • http://tools.ietf.org/html/draft-hixie- thewebsocketprotocol-76 • http://dev.w3.org/html5/websockets/ WHATWG = Web Hypertext Application Technology Working Group
  18. 18. WebSockets
  19. 19. WebSockets
  20. 20. var socket = new WebSocket('ws://example.com/chat'); socket.onopen = function() { ... }; socket.onmessage = function() { ... }; socket.onerror = function() { ... }; socket.onclose = function() { ... };
  21. 21. WebSockets it‘s HTTP and it isn‘t HTTP. Request GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U
  22. 22. WebSockets it‘s HTTP and it isn‘t HTTP. Request GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U
  23. 23. WebSockets it‘s HTTP and it isn‘t HTTP. Response HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa-
  24. 24. WebSockets + • connection handshake uses HTTP infrastructure - • no extra ports (firewall etc) • proxy support (well....) • no overhead (only 2 bytes per frame!) • very low latency • clean browser interface
  25. 25. WebSockets • connection process uses HTTP infrastructure asynchronous request performance! needs special event driven http server (event-machine, node.js) to scale!
  26. 26. WebSockets • proxy support proxies need to support „upgrade“ workaround: use TLS
  27. 27. Source: http://html5.org/tools/web-apps-tracker?from=3724&to=3725
  28. 28. var socket = new WebSocket('ws://vm.io/wm'); ssl/tls: var socket = new WebSocket('wss://vm.io/wm'); support a bit tricky at the moment...
  29. 29. Native Browser Support • Safari 5 (desktop) & iOS 4.0 • Google Chrome >= 4.0.249.0 • Firefox 4.0 ? https://bugzilla.mozilla.org/show_bug.cgi?id=472529 http://hacks.mozilla.org/2010/04/websockets-in-firefox/ • IE ??? :-( http://jimbergman.net/websocket-web-browser-test/
  30. 30. Emulated Browser Support http://kaazing.org/ http://github.com/gimite/web-socket-js
  31. 31. Ruby :-)
  32. 32. Ruby :-) • http://github.com/gimite/web-socket- ruby • http://github.com/igrigorik/em- websocket
  33. 33. EventMachine::WebSocket EventMachine.run { EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 80) do |ws| ws.onopen { puts "WebSocket connection open" # publish message to the client ws.send "Hello Client" } ws.onclose { puts "Connection closed" } ws.onmessage { |msg| puts "Recieved message: #{msg}" ws.send "Pong: #{msg}" } end }
  34. 34. Example 1+2
  35. 35. JSON AMQP Bayeux STOMP XMPP (Jabber) BOSH etc.. Current limitation: No binary data!
  36. 36. !!! WARNING: At this time, the WebSocket protocol cannot be used to send binary data. Using any of the frame types other than 0x00 and 0xFF is invalid. All other frame types are reserved for future use by future versions of this protocol.
  37. 37. EventMachine::WebSocket http://github.com/igrigorik/em-websocket http://www.igvita.com/2009/12/22/ruby-websockets-tcp-for-the-browser
  38. 38. Example • http://code.google.com/p/quake2-gwt- port/
  39. 39. Proxy Integration • http://www.infoq.com/articles/Web- Sockets-Proxy-Servers
  40. 40. other servers • http://www.kaazing.com/ http://www.kaazing.org (Java) Talk: http://is.gd/cQf4V Video: http://www.youtube.com/ watch?v=ZtLGU6xJpwM • http://orbited.org/ (Python)
  41. 41. PusherApp • http://pusherapp.com/ • Push only (one-way)
  42. 42. PubNub.com • http://www.pubnub.com/
  43. 43. Servers Ruby, JavaScript (node.js), Python, Java (jetty, glassfish 3.1, resin) ... ...even Arduino! http://blog.razerbeans.com/arduino-web-socket-library http://github.com/razerbeans/WebSocket-Arduino
  44. 44. => Github.com => Search => WebSockets
  45. 45. mehr! • http://bergmans.com/WebSockets.html
  46. 46. Danke fürs Zuhören :-)

×