Pushing the web — WebSockets

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">

HTTP Client Server

CC / via http://www.ﬂickr.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!

Specs • http://www.whatwg.org/specs/web- apps/current-work/ • http://www.whatwg.org/specs/websocket-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 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 (ﬁrewall 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-ﬁrefox/ • 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, glassﬁsh 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 :-)

http://blog.sambervalley.com	51
http://fe.com	34
http://web.vabx.com	23
http://www.slideshare.net	1

Pushing the web — WebSockets

by Roland M on Jun 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 109

Statistics

Pushing the web — WebSockets — Presentation Transcript