0
Pushing the Web
with WebSockets.



 Roland Moriz, Moriz GmbH

    http://www.moriz.de/
  http://www.IsItRails.com/
HTTP
                    is a stateless protocol.
Request

 GET / HTTP/1.1
     Host        www.moriz.de
     User-Agent M...
HTTP
                             is a stateless protocol.
Response
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8...
HTTP

Client          Server
CC / via http://www.flickr.com/photos/stevendepolo/3212039475/
PUSH
         event driven!


Client                   Server

                         stock price change


             ...
PUSH
     what we‘ve used in the past


„Comet“
              „HTTP Streaming“

      Flash             XMLHttpRequest
   ...
PUSH
                      what we‘ve used in the past

„Fake push“
•   cyclic polling (each x seconds)
•   delayed respon...
PUSH
                      what we‘ve used in the past

„Fake push“



                     SUCKS.
•   cyclic polling (eac...
PUSH
           what we‘ve used in the past

„Plugins“
                                     Persistent
                   ...
PUSH
        what we‘ve used in the past

„Plugins“
                                  Persistent
                         ...
PUSH
        what we‘ve used in the past

„Plugins“
                                  Persistent




       FREAKS.
      ...
PUSH
        what we‘ve used in the past

„Plugins“
                                  Persistent
                         ...
PUSH
          what we actually want




                  Persistent
                  Bi-Directional
                  C...
WebSockets!
var socket = new WebSocket('ws://vm.io/channel/ruby-muenchen');

socket.onopen = function() {
   ...
};

socket.onmessage ...
Specs
•   http://www.whatwg.org/specs/web-
    apps/current-work/

•   http://www.whatwg.org/specs/web-
    socket-protoco...
WebSockets
WebSockets
var socket = new WebSocket('ws://example.com/chat');

socket.onopen = function() {
   ...
};

socket.onmessage = function(...
WebSockets
          it‘s HTTP and it isn‘t HTTP.
Request
     GET /demo HTTP/1.1
     Host: example.com
     Connection: ...
WebSockets
          it‘s HTTP and it isn‘t HTTP.
Request
     GET /demo HTTP/1.1
     Host: example.com
     Connection: ...
WebSockets
             it‘s HTTP and it isn‘t HTTP.
Response

 HTTP/1.1 101 WebSocket Protocol Handshake
 Upgrade: WebSoc...
WebSockets
+   •   connection handshake uses HTTP infrastructure
-   •   no extra ports (firewall etc)
    •   proxy suppor...
WebSockets
•   connection process uses HTTP infrastructure



      asynchronous request performance!




     needs speci...
WebSockets
•   proxy support




          proxies need to support „upgrade“




                workaround: use TLS
Source: http://html5.org/tools/web-apps-tracker?from=3724&to=3725
var socket = new WebSocket('ws://vm.io/wm');



                         ssl/tls:




var socket = new WebSocket('wss://vm...
Native Browser Support

  •   Safari 5 (desktop) & iOS 4.0

  •   Google Chrome >= 4.0.249.0

  •   Firefox 4.0 ?
      ht...
Emulated Browser Support


   http://kaazing.org/

   http://github.com/gimite/web-socket-js
Ruby :-)
Ruby :-)

•   http://github.com/gimite/web-socket-
    ruby

•   http://github.com/igrigorik/em-
    websocket
EventMachine::WebSocket
EventMachine.run {
  EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 80) do |ws|

     ...
Example 1+2
JSON              AMQP
  Bayeux           STOMP

      XMPP (Jabber)
        BOSH
                     etc..
  Current lim...
!!! WARNING: At this time,
the WebSocket protocol cannot
be used to send binary data.
Using any of the frame types
other t...
EventMachine::WebSocket
http://github.com/igrigorik/em-websocket
http://www.igvita.com/2009/12/22/ruby-websockets-tcp-for-...
Example


•   http://code.google.com/p/quake2-gwt-
    port/
Proxy Integration


•   http://www.infoq.com/articles/Web-
    Sockets-Proxy-Servers
other servers
•   http://www.kaazing.com/
         http://www.kaazing.org (Java)
         Talk: http://is.gd/cQf4V
       ...
PusherApp


•   http://pusherapp.com/

•   Push only (one-way)
PubNub.com


•   http://www.pubnub.com/
Servers
  Ruby, JavaScript (node.js), Python, Java
  (jetty, glassfish 3.1, resin) ...


  ...even Arduino!
http://blog.raz...
=> Github.com
   => Search => WebSockets
mehr!


•   http://bergmans.com/WebSockets.html
Danke fürs
Zuhören :-)
Pushing the web — WebSockets
Upcoming SlideShare
Loading in...5
×

Pushing the web — WebSockets

20,810

Published on

Published in: Technology
0 Comments
26 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
20,810
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
379
Comments
0
Likes
26
Embeds 0
No embeds

No notes for slide















































  • Transcript of "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 :-)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×