Weitere ähnliche Inhalte Ähnlich wie Intro to WebSockets and Comet (20) Kürzlich hochgeladen (20) Intro to WebSockets and Comet1. Web Sockets and Comet
Dylan Schiemann (@dylans)
SitePen, Inc.
HTML5 Code Camp, October, 2010
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
2. What is Comet?
Set of techniques for long-lived HTTP connections
Low-latency data transmission from the server to the
browser or client
Deliver data from server to the client at any time
Improve speed and scaling over Ajax
Develop event-driven web applications
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
3. Normal XHR Cycle
Browser
Each request is a distinct
HTTP setup and teardown Application JS Code, HTML, Etc.
Client must initiate request XHR Library
to server
Low-latency applications Server
HTTP HTTP HTTP
require frequent polling for
server updates Server Application Code
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
4. Comet HTTP Request Cycle
Browser
Application JS Code, HTML, Etc.
Long-running HTTP
connection Comet Library
Low-latency
Event Delivery
HTTP Tunnel
Server can push data to
Server
the client
Server Application Code
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
5. Comet Use
Google Talk and Docs
Meebo
Facebook Chat
Many more...
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
6. Comet Methods
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
7. Forever-Frame
Long-lived http connection is kept alive in a hidden iframe
A hack on HTTP 1.1 chunked encoding
Incremental content pushed from server to client
Browser incremental rendering allows processing and event
handling of <script> tags
Great performance
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
8. Long-Polling
Client makes a request
Server doesn’t immediately return, unless it has something
to return
When request is closed by server or the poll times out, a new
request is immediately opened
XHR-based
Cross-browser compatible
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
9. Callback-Polling or JSONP-Polling
Long-polling, but works cross-
domain
Relies on JSONP technique for
establishing trust
<script> blocks instead of
XHR
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
10. The Future of Comet: HTML5 WebSocket
HTML5 "friend"
Full-duplex communication
Binary data transfer
A Comet transport that wouldn’t
be a hack
Underspecified in places
Local Storage to synchronize
across tabs and frames
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
11. Web Sockets
WebSocket is a technology providing bi-directional, full-
duplex communications channels, over a single
Transmission Control Protocol (TCP) socket, designed to be
implemented in web browsers and web servers.
API standardized by W3C, protocol standardized by IETF
Support in Firefox 4, Chrome 4, Opera 10.7, and Safari 5
Not available within Internet Explorer (IE9?)
Different versions of rec. in browsers, x-domain issues
Simple, easy to use API; much simpler than current methods
of PUSH technology
http://dev.w3.org/html5/websockets/
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
12. Simple WebSocket Example
// Check for presence in browser
if("WebSocket" in window) {
// Create the WebSocket
var ws = new WebSocket("ws://yourdomain.com/service");
// Open the WebSocket
ws.onopen = function() {
// Send a message to the server
ws.send("Ping!"); ....
};
// React when a message is received from the server
ws.onmessage = function (e) {
var receivedMessage = e.data;
};
// Close and error events
ws.onclose = function() { };
ws.onerror = function() { };
}
else {
// The browser doesn't support WebSocket
}
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
13. Web Sockets and Dojo
Like XHR, you're going to want a toolkit...
DojoX (pre 1.6) now features dojox.Socket
Provides a simple socket connection using WebSocket, or
alternate communication mechanisms in legacy browsers
for comet-style communication
Allows for socket handling with standard Dojo
methodologies (i.e. dojo.connect to listen to events)
Automatic reconnects using the
dojox.socket.Reconnect class
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
14. dojox.Socket Usage
// Require the classes
dojo.require("dojox.socket");
// When the class is loaded...
dojo.ready(function() {
// Create a Dojox socket instance
var socket = dojox.socket({ url: "//comet-server/comet" });
// Connect to events via standard dojo.connect method
dojo.connect(socket, "onmessage", function(event){
//Retrieve the message
var message = event.data;
});
// Alternate event listening syntax
socket.on(“message”, function() { /* handle message */ });
// Send a message
socket.send("Ping!");
// Close a socket
socket.close();
});
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
15. dojox.socket.Reconnect Usage
// Require both Dojo classes
dojo.require("dojox.socket");
dojo.require("dojox.socket.Reconnect");
// When the resources are ready...
dojo.ready(function() {
// Create socket
var socket = dojox.socket({url:"/comet"});
// Make sockets reconnect automatically
socket = dojox.socket.Reconnect(socket);
});
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
16. Comet Servers
Historically, web servers have been written to handle burst
of short-lived connections
Comet connections are long-lived but not always transmitting
data
Many servers are written geared toward Comet or
specifically for Comet
Comet servers best when sitting alongside a traditional web
server
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
17. Comet Servers
cometD (Java, Bayeux)
Tunguska (on Node.js or Narwhal, Bayeux or RestChannels)
Hookbox (Python, CSP)
DWR (Java, Bayeux and others)
Lightstreamer (Java, Bayeux and others)
Faye (JavaScript or Ruby, on Node.js or Rails)
APE (Python, CSP)
WebSync (.NET, Bayeux)
...
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
18. Publish and Subscribe with Comet
Communication is done through channels
Allows the web server to send directed messages to the Comet
server
Channels are hierarchical
Wildcards can be used
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
19. Comet Security
Authentication can happen on the web server and define a
unique channel on the Comet server
Web server can pass authentication credentials to the comet
server
Adds overhead
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
20. Protocols
Bayeux
PubSub, Transports
CSP (Comet Session Protocol)
More like working with a socket
PubSub is separated
REST/HTTP Channels
XMPP
Many other proprietary and open messaging protocols
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
21. Comet Clients
Each project has one
Many toolkits (Dojo, jQuery) have one
Dojo 1.6 has dojox.socket
Server-side clients to connect normal servers to Comet
servers
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
22. Hosted Hookbox
Hookbox: Very simple Comet server
http://hosted.hookbox.org/ Free Hosted Comet Service
http://dylan.io/hookbox.php
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010