intro to websockets and comet

© SitePen, Inc. All Rights Reserved

Web Sockets and Comet

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

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 CycleEach request is a distinct HTTP setup and teardown

Client must initiate request to server

Low-latency applications require frequent polling for server updates

Application JS Code, HTML, Etc.

XHR Library

Server Application Code

Browser

ServerHTTP HTTP HTTP



Comet HTTP Request Cycle

Long-running HTTP connection

Low-latency

Server can push data to the client

Application JS Code, HTML, Etc.

Comet Library

Server Application Code

Browser

Server

Event DeliveryHTTP Tunnel



Comet UseGoogle 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

Underspecified 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?)

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/





// Check for presence in browserif("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}

Simple WebSocket Example



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



// Require the classesdojo.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 Usage



// Require both Dojo classesdojo.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); });

dojox.socket.Reconnect Usage



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



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


http://hosted.hookbox.org

http://hosted.hookbox.org



intro to websockets and comet

Technology