Your SlideShare is downloading. ×
Pushing the web — WebSockets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pushing the web — WebSockets

20,056
views

Published on

Published in: Technology

0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
20,056
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
369
Comments
0
Likes
25
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide















































  • Transcript

    • 1. Pushing the Web with WebSockets. Roland Moriz, Moriz GmbH http://www.moriz.de/ http://www.IsItRails.com/
    • 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. 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. HTTP Client Server
    • 5. CC / via http://www.flickr.com/photos/stevendepolo/3212039475/
    • 6. PUSH event driven! Client Server stock price change chat response game event ...
    • 7. PUSH what we‘ve used in the past „Comet“ „HTTP Streaming“ Flash XMLHttpRequest Java Applet ...
    • 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. 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. PUSH what we‘ve used in the past „Plugins“ Persistent Bi-Directional Connection Flash JavaScript Server Java Applet DOM
    • 11. PUSH what we‘ve used in the past „Plugins“ Persistent Bi-Directional Connection Flash DOM Server Java Applet
    • 12. PUSH what we‘ve used in the past „Plugins“ Persistent FREAKS. Bi-Directional Connection Flash DOM Server Java Applet
    • 13. PUSH what we‘ve used in the past „Plugins“ Persistent Bi-Directional Connection Browser Plugin Server
    • 14. PUSH what we actually want Persistent Bi-Directional Connection Browser Server
    • 15. WebSockets!
    • 16. var socket = new WebSocket('ws://vm.io/channel/ruby-muenchen'); socket.onopen = function() { ... }; socket.onmessage = function() { ... }; socket.onerror = function() { ... }; socket.onclose = function() { ... };
    • 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. WebSockets
    • 19. WebSockets
    • 20. var socket = new WebSocket('ws://example.com/chat'); socket.onopen = function() { ... }; socket.onmessage = function() { ... }; socket.onerror = function() { ... }; socket.onclose = function() { ... };
    • 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. 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. 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. 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. WebSockets • connection process uses HTTP infrastructure asynchronous request performance! needs special event driven http server (event-machine, node.js) to scale!
    • 26. WebSockets • proxy support proxies need to support „upgrade“ workaround: use TLS
    • 27. Source: http://html5.org/tools/web-apps-tracker?from=3724&to=3725
    • 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. 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. Emulated Browser Support http://kaazing.org/ http://github.com/gimite/web-socket-js
    • 31. Ruby :-)
    • 32. Ruby :-) • http://github.com/gimite/web-socket- ruby • http://github.com/igrigorik/em- websocket
    • 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. Example 1+2
    • 35. JSON AMQP Bayeux STOMP XMPP (Jabber) BOSH etc.. Current limitation: No binary data!
    • 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. EventMachine::WebSocket http://github.com/igrigorik/em-websocket http://www.igvita.com/2009/12/22/ruby-websockets-tcp-for-the-browser
    • 38. Example • http://code.google.com/p/quake2-gwt- port/
    • 39. Proxy Integration • http://www.infoq.com/articles/Web- Sockets-Proxy-Servers
    • 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. PusherApp • http://pusherapp.com/ • Push only (one-way)
    • 42. PubNub.com • http://www.pubnub.com/
    • 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. => Github.com => Search => WebSockets
    • 45. mehr! • http://bergmans.com/WebSockets.html
    • 46. Danke fürs Zuhören :-)