Intro to WebSockets and Comet

Web Sockets and Comet

Dylan Schiemann (@dylans)
SitePen, Inc.
HTML5 Code Camp, October, 2010

© SitePen, Inc. All Rights Reserved

Sunday, October 17, 2010

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


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



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



Comet Use
Google Talk and Docs
Meebo
Facebook Chat
Many more...



Comet Methods



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


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


Callback-Polling or JSONP-Polling

Long-polling, but works cross-
domain
Relies on JSONP technique for
establishing trust
<script> blocks instead of
XHR


The Future of Comet: HTML5 WebSocket

HTML5 "friend"
Full-duplex communication
Binary data transfer
A Comet transport that wouldn’t
be a hack
Underspeciﬁed in places
Local Storage to synchronize
across tabs and frames


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?)
Diﬀerent 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/

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
}


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


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();

});


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);

});


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
speciﬁcally for Comet
Comet servers best when sitting alongside a traditional web
server


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)
...


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


Comet Security

Authentication can happen on the web server and deﬁne a
unique channel on the Comet server
Web server can pass authentication credentials to the comet
server
Adds overhead


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


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


Hosted Hookbox

Hookbox: Very simple Comet server
http://hosted.hookbox.org/ Free Hosted Comet Service
http://dylan.io/hookbox.php


Intro to WebSockets and Comet

Recommended

More Related Content

Similar to Intro to WebSockets and Comet (20)

Recently uploaded (20)

Intro to WebSockets and Comet