More Related Content Similar to Pushing the web — WebSockets Similar to Pushing the web — WebSockets (20) 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! -->
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
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/
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/
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)
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
46. mehr!
• http://bergmans.com/WebSockets.html
