Upload
dylanks
View
1.172
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
© SitePen, Inc. All Rights Reserved
Web Sockets and Comet
Dylan Schiemann (@dylans)SitePen, Inc.HTML5 Code Camp, October, 2010
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
Comet UseGoogle Talk and Docs
Meebo
Facebook Chat
Many more...
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
Comet Methods
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
Callback-Polling or JSONP-Polling
Long-polling, but works cross-domain
Relies on JSONP technique for establishing trust
<script> blocks instead of XHR
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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/
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// 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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// 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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// 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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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)
...
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
Hosted Hookbox
Hookbox: Very simple Comet server
http://hosted.hookbox.org/ Free Hosted Comet Service
http://dylan.io/hookbox.php
Sunday, October 17, 2010