SlideShare una empresa de Scribd logo
1 de 47
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 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;
  ...
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! -->
HTTP

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


Client                   Server

                         stock price change


                         chat response


                         game event


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


„Comet“
              „HTTP Streaming“

      Flash             XMLHttpRequest
          Java Applet
                        ...
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)
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)
PUSH
           what we‘ve used in the past

„Plugins“
                                     Persistent
                                     Bi-Directional
                                     Connection

                     Flash

      JavaScript                                  Server
                     Java Applet
DOM
PUSH
        what we‘ve used in the past

„Plugins“
                                  Persistent
                                  Bi-Directional
                                  Connection

                  Flash

    DOM                                        Server
                  Java Applet
PUSH
        what we‘ve used in the past

„Plugins“
                                  Persistent




       FREAKS.
                                  Bi-Directional
                                  Connection

                  Flash

    DOM                                        Server
                  Java Applet
PUSH
        what we‘ve used in the past

„Plugins“
                                  Persistent
                                  Bi-Directional
                                  Connection




   Browser          Plugin        Server
PUSH
          what we actually want




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

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

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

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

socket.onclose = function() {
   ...
};
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
WebSockets
WebSockets
var socket = new WebSocket('ws://example.com/chat');

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

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

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

socket.onclose = function() {
   ...
};
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
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
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-
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
WebSockets
•   connection process uses HTTP infrastructure



      asynchronous request performance!




     needs special event driven http server
       (event-machine, node.js) to scale!
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.io/wm');




support a bit tricky at the moment...
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/
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|

          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
}
Example 1+2
JSON              AMQP
  Bayeux           STOMP

      XMPP (Jabber)
        BOSH
                     etc..
  Current limitation: No binary data!
!!! 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.
EventMachine::WebSocket
http://github.com/igrigorik/em-websocket
http://www.igvita.com/2009/12/22/ruby-websockets-tcp-for-the-browser
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
         Video: http://www.youtube.com/
         watch?v=ZtLGU6xJpwM

•   http://orbited.org/ (Python)
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.razerbeans.com/arduino-web-socket-library
  http://github.com/razerbeans/WebSocket-Arduino
=> Github.com
   => Search => WebSockets
mehr!


•   http://bergmans.com/WebSockets.html
Danke fürs
Zuhören :-)

Más contenido relacionado

La actualidad más candente

vlavrynovych - WebSockets Presentation
vlavrynovych - WebSockets Presentationvlavrynovych - WebSockets Presentation
vlavrynovych - WebSockets PresentationVolodymyr Lavrynovych
 
Nuts and Bolts of WebSocket Devoxx 2014
Nuts and Bolts of WebSocket Devoxx 2014Nuts and Bolts of WebSocket Devoxx 2014
Nuts and Bolts of WebSocket Devoxx 2014Arun Gupta
 
Asynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and JavaAsynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and JavaJames Falkner
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsNaresh Chintalcheru
 
Realtime web application with java
Realtime web application with javaRealtime web application with java
Realtime web application with javaJeongHun Byeon
 
Spring + WebSocket integration
Spring + WebSocket integrationSpring + WebSocket integration
Spring + WebSocket integrationOleksandr Semenov
 
WEB SOCKET 應用
WEB SOCKET 應用WEB SOCKET 應用
WEB SOCKET 應用Jerromy Lee
 
Websockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalableWebsockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalableGareth Marland
 
Websockets at tossug
Websockets at tossugWebsockets at tossug
Websockets at tossugclkao
 
WebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkWebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkFabio Tiriticco
 
Introduction to WebSockets Presentation
Introduction to WebSockets PresentationIntroduction to WebSockets Presentation
Introduction to WebSockets PresentationJulien LaPointe
 
GWT Web Socket and data serialization
GWT Web Socket and data serializationGWT Web Socket and data serialization
GWT Web Socket and data serializationGWTcon
 
HTML5 WebSocket for the Real-Time Web and the Internet of Things
HTML5 WebSocket for the Real-Time Weband the Internet of ThingsHTML5 WebSocket for the Real-Time Weband the Internet of Things
HTML5 WebSocket for the Real-Time Web and the Internet of ThingsPeter Moskovits
 

La actualidad más candente (20)

vlavrynovych - WebSockets Presentation
vlavrynovych - WebSockets Presentationvlavrynovych - WebSockets Presentation
vlavrynovych - WebSockets Presentation
 
WebSocket protocol
WebSocket protocolWebSocket protocol
WebSocket protocol
 
Nuts and Bolts of WebSocket Devoxx 2014
Nuts and Bolts of WebSocket Devoxx 2014Nuts and Bolts of WebSocket Devoxx 2014
Nuts and Bolts of WebSocket Devoxx 2014
 
Web sockets in Java
Web sockets in JavaWeb sockets in Java
Web sockets in Java
 
WebSockets with Spring 4
WebSockets with Spring 4WebSockets with Spring 4
WebSockets with Spring 4
 
J web socket
J web socketJ web socket
J web socket
 
Asynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and JavaAsynchronous Web Programming with HTML5 WebSockets and Java
Asynchronous Web Programming with HTML5 WebSockets and Java
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using Websockets
 
Websockets and SockJS, Real time chatting
Websockets and SockJS, Real time chattingWebsockets and SockJS, Real time chatting
Websockets and SockJS, Real time chatting
 
Realtime web application with java
Realtime web application with javaRealtime web application with java
Realtime web application with java
 
Spring + WebSocket integration
Spring + WebSocket integrationSpring + WebSocket integration
Spring + WebSocket integration
 
WEB SOCKET 應用
WEB SOCKET 應用WEB SOCKET 應用
WEB SOCKET 應用
 
Ws
WsWs
Ws
 
Websockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalableWebsockets in Node.js - Making them reliable and scalable
Websockets in Node.js - Making them reliable and scalable
 
Websockets at tossug
Websockets at tossugWebsockets at tossug
Websockets at tossug
 
WebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkWebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! Framework
 
Introduction to WebSockets Presentation
Introduction to WebSockets PresentationIntroduction to WebSockets Presentation
Introduction to WebSockets Presentation
 
GWT Web Socket and data serialization
GWT Web Socket and data serializationGWT Web Socket and data serialization
GWT Web Socket and data serialization
 
HTML5 WebSocket for the Real-Time Web and the Internet of Things
HTML5 WebSocket for the Real-Time Weband the Internet of ThingsHTML5 WebSocket for the Real-Time Weband the Internet of Things
HTML5 WebSocket for the Real-Time Web and the Internet of Things
 
HTML5 WebSockets
HTML5 WebSocketsHTML5 WebSockets
HTML5 WebSockets
 

Destacado

Introduction to WebSockets
Introduction to WebSocketsIntroduction to WebSockets
Introduction to WebSocketsWASdev Community
 
Il primo anno di vita del bambino
Il primo anno di vita del bambinoIl primo anno di vita del bambino
Il primo anno di vita del bambinoAzza
 
Presentation websockets
Presentation websocketsPresentation websockets
Presentation websocketsBert Poller
 
31 intranet homepage design examples, with screenshots
31 intranet homepage design examples, with screenshots31 intranet homepage design examples, with screenshots
31 intranet homepage design examples, with screenshotsDigital Workplace Group
 

Destacado (7)

Introduction to WebSockets
Introduction to WebSocketsIntroduction to WebSockets
Introduction to WebSockets
 
Il primo anno di vita del bambino
Il primo anno di vita del bambinoIl primo anno di vita del bambino
Il primo anno di vita del bambino
 
Kaazing
KaazingKaazing
Kaazing
 
Presentation websockets
Presentation websocketsPresentation websockets
Presentation websockets
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
31 intranet homepage design examples, with screenshots
31 intranet homepage design examples, with screenshots31 intranet homepage design examples, with screenshots
31 intranet homepage design examples, with screenshots
 
Culture
CultureCulture
Culture
 

Similar a Pushing the web — WebSockets

WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersViktor Gamov
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSocketsGonzalo Ayuso
 
WebSockets On Fire
WebSockets On FireWebSockets On Fire
WebSockets On FireJef Claes
 
Real-Time with Flowdock
Real-Time with FlowdockReal-Time with Flowdock
Real-Time with FlowdockFlowdock
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightPeter Gfader
 
Data power v7 update - Ravi Katikala
Data power v7 update - Ravi KatikalaData power v7 update - Ravi Katikala
Data power v7 update - Ravi Katikalafloridawusergroup
 
Plack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversPlack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversTatsuhiko Miyagawa
 
introduction to node.js
introduction to node.jsintroduction to node.js
introduction to node.jsorkaplan
 
Web sockets - Pentesting
Web sockets - Pentesting Web sockets - Pentesting
Web sockets - Pentesting Vandana Verma
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moondavejohnson
 
Websocket vs SSE - Paris.js - 24/06/15
Websocket vs SSE - Paris.js - 24/06/15Websocket vs SSE - Paris.js - 24/06/15
Websocket vs SSE - Paris.js - 24/06/15streamdata.io
 
Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013Siva Arunachalam
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaYevgeniy Brikman
 
Nodejs a-practical-introduction-oredev
Nodejs a-practical-introduction-oredevNodejs a-practical-introduction-oredev
Nodejs a-practical-introduction-oredevFelix Geisendörfer
 
Writing & Using Web Services
Writing & Using Web ServicesWriting & Using Web Services
Writing & Using Web ServicesRajarshi Guha
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013Alexandre Morgaut
 
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketV2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketbrent bucci
 

Similar a Pushing the web — WebSockets (20)

WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
WebSockets On Fire
WebSockets On FireWebSockets On Fire
WebSockets On Fire
 
Real-Time with Flowdock
Real-Time with FlowdockReal-Time with Flowdock
Real-Time with Flowdock
 
Websocket shanon
Websocket shanonWebsocket shanon
Websocket shanon
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and Silverlight
 
Data power v7 update - Ravi Katikala
Data power v7 update - Ravi KatikalaData power v7 update - Ravi Katikala
Data power v7 update - Ravi Katikala
 
Plack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversPlack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and servers
 
introduction to node.js
introduction to node.jsintroduction to node.js
introduction to node.js
 
Web assembly with PWA
Web assembly with PWA Web assembly with PWA
Web assembly with PWA
 
Web sockets - Pentesting
Web sockets - Pentesting Web sockets - Pentesting
Web sockets - Pentesting
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
Websocket vs SSE - Paris.js - 24/06/15
Websocket vs SSE - Paris.js - 24/06/15Websocket vs SSE - Paris.js - 24/06/15
Websocket vs SSE - Paris.js - 24/06/15
 
Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and Scala
 
Nodejs a-practical-introduction-oredev
Nodejs a-practical-introduction-oredevNodejs a-practical-introduction-oredev
Nodejs a-practical-introduction-oredev
 
Writing & Using Web Services
Writing & Using Web ServicesWriting & Using Web Services
Writing & Using Web Services
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013
 
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketV2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
 
111214 node conf
111214 node conf111214 node conf
111214 node conf
 

Último

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 

Último (20)

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 

Pushing the web — WebSockets

  • 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
  • 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
  • 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.
  • 29. 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...
  • 30. 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/
  • 31. Emulated Browser Support http://kaazing.org/ http://github.com/gimite/web-socket-js
  • 33. Ruby :-) • http://github.com/gimite/web-socket- ruby • http://github.com/igrigorik/em- websocket
  • 34. 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 }
  • 36. JSON AMQP Bayeux STOMP XMPP (Jabber) BOSH etc.. Current limitation: No binary data!
  • 37. !!! 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.
  • 39. Example • http://code.google.com/p/quake2-gwt- port/
  • 40. Proxy Integration • http://www.infoq.com/articles/Web- Sockets-Proxy-Servers
  • 41. 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)
  • 42. PusherApp • http://pusherapp.com/ • Push only (one-way)
  • 43. PubNub.com • http://www.pubnub.com/
  • 44. 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
  • 45. => Github.com => Search => WebSockets
  • 46. mehr! • http://bergmans.com/WebSockets.html

Notas del editor