Real Time Web with Node

REAL TIME WEB
WITH NODE
By Tim Caswell

Saturday, June 5, 2010

Live Interaction
The web is about doing things, not just tourism anymore.


Uses of Live Interaction
Chat Widget
Twitter Feed
Stock Ticker
Real-Time Game
Collaborative
Documents
TXJS Demos


Why we need non-blocking
Polling is too slow and ineﬃcient.
Live interaction requires the server to push data.
In order to push data, the connections need to be
persistent.
The server needs to handle thousands of persistent
connections
Threads aren’t going to scale.


This is your server.
(with blocking I/O)

This is your server
with low concurrency.


This is your server
with high concurrency.


Connect
We’ll use a new node
framework that
“connects” the web users
to each other.


It’s like Japanese Legos

Pre-Built Blocks
Connect.createServer([
{filter: "log"},
{filter: "body-decoder", route: "/stream"},
{provider: "pubsub", route: "/stream"},
{filter: "conditional-get"},
{filter: "cache"},
{filter: "gzip"},
{provider: "cache-manifest", root: root},
{provider: "static", root: root}
]);


And easy too!

method-override.js
var key;
// Initialize any state (on server startup)
exports.setup = function (env) {
key = this.key || "_method";
};
// Modify the request stream (on request)
exports.handle = function(err, req, res, next){
if (key in req.body) {
req.method = req.body[key].toUpperCase();
}
next();
};


response-time.js
exports.handle = function(err, req, res, next){
var start = new Date,
writeHead = res.writeHead;

res.writeHead = function(code, headers){
res.writeHead = writeHead;
headers['X-Response-Time'] =
(new Date - start) + "ms";
res.writeHead(code, headers);
};

next();
};


Well, actually, it’s
not always easy.

static.js


static.js
var fs = require('fs'),
Url = require('url'),
Path = require('path');

var lifetime = 1000 * 60 * 60; // 1 hour browser cache lifetime

var DEFAULT_MIME = 'application/octet-stream';

module.exports = {

setup: function (env) {
this.root = this.root || process.cwd();
},

handle: function (err, req, res, next) {
// Skip on error
if (err) {
next();
return;
}
var url = Url.parse(req.url);

var pathname = url.pathname.replace(/..+/g, '.'),
filename = Path.join(this.root, pathname);

if (filename[filename.length - 1] === "/") {
filename += "index.html";
}


static.js
// Buffer any events that fire while waiting on the stat.
var fs = require('fs'), var events = [];
Url = require('url'), function onData() {
Path = require('path'); events.push(["data"].concat(Array.prototype.slice.call(arguments)));
}
var lifetime = 1000 * 60 * 60; // 1 hourfunction onEnd() {
browser cache lifetime
events.push(["end"].concat(Array.prototype.slice.call(arguments)));
}
req.addListener("data", onData);
module.exports = { req.addListener("end", onEnd);

setup: function (env) { fs.stat(filename, function (err, stat) {
}, // Stop buffering events
req.removeListener("data", onData);
handle: function (err, req, res, next) {req.removeListener("end", onEnd);
// Skip on error
if (err) { // Fall through for missing files, thow error for other problems
next(); if (err) {
return; if (err.errno === process.ENOENT) {
} next();
var url = Url.parse(req.url); // Refire the buffered events
events.forEach(function (args) {
req.emit.apply(req, args);
var pathname = url.pathname.replace(/..+/g, '.'),
});
return;
if (filename[filename.length - 1] === "/") {
}


static.js
}
events.push(["end"].concat(Array.prototype.slice.call(arguments)));
}
module.exports = { req.addListener("end", onEnd);

(err);
setup: function (env) { fs.stat(filename, function (err, stat) {
rn;
}, // Stop buffering events
req.removeListener("end", onEnd);
the file directly using (err, req, res, next) {
handle: function buffers
ile(filename, function error data) {
// Skip on (err,
if (err) { // Fall through for missing files, thow error for other problems
err) {
next(); if (err) {
next(err);
return;
} next();
var url = Url.parse(req.url); // Refire the buffered events
writeHead(200, {
ontent-Type": Mime.type(filename),
req.emit.apply(req, args);
ontent-Length": pathname = url.pathname.replace(/..+/g, '.'),
var data.length,
});
ast-Modified": stat.mtime.toUTCString(),
return;
/ Cache in browser for 1 year
ache-Control": (filename[filename.length - 1] === "/") {
if "public max-age=" + 31536000
end(data); }


static.js
}
}; events.push(["end"].concat(Array.prototype.slice.call(arguments)));
}
// Mini mime module for static file serving
module.exports = { var req.addListener("end", onEnd);
Mime = {

(err); type: function getMime(path) (err, stat) {
setup: function (env) { fs.stat(filename, function {
rn; var index = path.lastIndexOf(".");
}, if (index < buffering events
// Stop 0) {
return DEFAULT_MIME;
} req.removeListener("end", onEnd);
the file directly using (err, req, res, next) { type = Mime.TYPES[path.substring(index).toLowerCase()] || DEFAULT_MIME;
var
ile(filename, // function error data) {
Skip on (err,
if (err) { return Fall through for missing files, thow error "; charset=utf-8" : type;
// (/(text|javascript)/).test(type) ? type + for other problems
err) { },
next(); if (err) {
next(err);
return; TYPES : { ".3gp"
} next(); "video/3gpp",
:
var url = Url.parse(req.url); ".a" Refire the buffered events
// : "application/octet-stream",
writeHead(200, { ".ai" : "application/postscript",
ontent-Type": Mime.type(filename), ".aif" req.emit.apply(req, args);
: "audio/x-aiff",
ontent-Length": pathname = url.pathname.replace(/..+/g, '.'), "audio/x-aiff",
var data.length,
".aiff" :
});
ast-Modified": stat.mtime.toUTCString(), ".asc"
return; "application/pgp-signature",
:
/ Cache in browser for 1 year ".asf" : "video/x-ms-asf",
".asm" : "text/x-asm",
".asx" : "video/x-ms-asf",
end(data); }
".atom" : "application/atom+xml",
".au" : "audio/basic",
Saturday, June 5, 2010 ".avi" : "video/x-msvideo",

static.js
var fs = require('fs'), : "video/x-flv",var events = [];
".flv"
".for" : function onData() {
Url = require('url'), "text/x-fortran",
".gem" events.push(["data"].concat(Array.prototype.slice.call(arguments)));
: "application/octet-stream",
}
".gemspec" : "text/x-script.ruby",
var lifetime = ".gif" 60: *"image/gif", function onEnd() {
1000 * 60; // 1 hour browser cache lifetime
".gz" : "application/x-gzip",
".h" : "text/x-c", }
".hh" : "text/x-c",
module.exports ".htm"
= { var Mime = {
: "text/html", req.addListener("end", onEnd);
(err); ".html" : "text/html",
rn; setup: function (env) "image/vnd.microsoft.icon", getMime(path) (err, stat) {
".ico" : { type: function
fs.stat(filename, function {
var index = path.lastIndexOf(".");
".ics" : "text/calendar",
}, ".ifb" : "text/calendar", (index < buffering events
if // Stop 0) {
".iso" : "application/octet-stream",
}
: req, res, next) {req.removeListener("end", onEnd);
the file directly ".jar" (err,"application/java-archive",
using var type = Mime.TYPES[path.substring(index).toLowerCase()] || DEFAULT_MIME;
ile(filename, // function error: data) {
Skip".java"
on (err, "text/x-java-source",
if (err) { return Fall through for missing files, thow error "; charset=utf-8" : type;
// (/(text|javascript)/).test(type) ? type + for other problems
".jnlp" : "application/x-java-jnlp-file",
err) { },
next();
".jpeg" : "image/jpeg", if (err) {
next(err);
return;
".jpg" : "image/jpeg", if (err.errno === process.ENOENT) {
return; TYPES : { ".3gp" : "video/3gpp",
} ".js" : "application/javascript", next();
var url = Url.parse(req.url); ".a" Refire the buffered events
writeHead(200, { ".json" : "application/json", ".ai" : "application/postscript",
".log" : "text/plain", events.forEach(function (args) {
ontent-Type": Mime.type(filename), ".aif" req.emit.apply(req, args);
: "audio/x-aiff",
var data.length, "audio/x-mpegurl",
".m3u" :
".aiff" :
".m4v" : "video/mp4", });
:
/ Cache in browser ".man" year "text/troff",
for 1 :
".asf" : "video/x-ms-asf",
".mathml" : "application/mathml+xml",
".asm" : "text/x-asm",
filename += : "application/mbox",
".mbox" "index.html";
end(data); } ".mdoc" : "text/troff",
".me" : "text/troff", ".atom" : "application/atom+xml",
".mid" : "audio/midi",

static.js
// Buffer any events that fire while waiting "text/x-c",
".cc" : on the stat.
".flv" ".chm" : "application/vnd.ms-htmlhelp",
".for" : function onData() { ".class" : "application/octet-stream",
: "application/octet-stream", ".com" : "application/x-msdownload",
}
".gemspec" : "text/x-script.ruby", ".conf" : "text/plain",
1000 * 60; // 1 hour browser cache lifetime ".cpp" : "text/x-c",
".crt" : "application/x-x509-ca-cert",
".h" : "text/x-c", } ".css" : "text/css",
req.addListener("data", onData); ".csv" : "text/csv",
".hh" : "text/x-c",
module.exports ".htm"= { var Mime = {
: "text/html", req.addListener("end", onEnd); ".cxx" : "text/x-c",
".html" : "text/html", ".deb" : "application/x-debian-package",
(err);
fs.stat(filename, function { ".der" : "application/x-x509-ca-cert",
var index = path.lastIndexOf(".");".diff" : "text/x-diff",
if // Stop 0) { ".djv" : "image/vnd.djvu",
".djvu" : "image/vnd.djvu",
}
: req, res, next) {req.removeListener("end", onEnd); ".dll" : "application/x-msdownload",
the file directly ".jar" (err,"application/java-archive",
using var type = Mime.TYPES[path.substring(index).toLowerCase()] || DEFAULT_MIME;
// function error: data) {
Skip".java"
on (err, "text/x-java-source", ".dmg" : "application/octet-stream",
ile(filename, return Fall through for missing files, thow error "; charset=utf-8" : type;
if (err) { // (/(text|javascript)/).test(type) ? : "application/msword",
".jnlp" : "application/x-java-jnlp-file", ".doc" type + for other problems
err) { },
next();
".jpeg" : "image/jpeg", if (err) { ".dot" : "application/msword",
next(err);
return;
".jpg" : "image/jpeg", if (err.errno === process.ENOENT) { "application/xml-dtd",
".dtd" :
return; TYPES : { ".3gp" : "video/3gpp", ".dvi"
} ".js" : "application/javascript", next(); : "application/x-dvi",
var url = Url.parse(req.url); ".a" Refire the buffered events : "application/java-archive",
".ear"
".log" : "text/plain", events.forEach(function (args) : "message/rfc822",
".eml" {
ontent-Type": Mime.type(filename), ".aif" req.emit.apply(req, args); : "application/postscript",
: "audio/x-aiff",
".eps"
".m3u" :
".aiff" :
".m4v" : "video/mp4", }); ".exe" : "application/x-msdownload",
: ".f" : "text/x-fortran",
for 1 :
".f77" : "text/x-fortran",
".asm" : "text/x-asm", ".f90"
".mbox" "index.html"; : "text/x-fortran",

static.js
// Buffer any events that fire while waiting "text/x-c",
".cc" : on the stat.
".flv" ".chm" : "application/vnd.ms-htmlhelp",
".for" : function onData() { ".class" : "application/octet-stream",
: "application/octet-stream", ".com" : "application/x-msdownload",
}
".gemspec" : "text/x-script.ruby", ".conf" : "text/plain",
1000 * 60; // 1 hour browser cache lifetime ".cpp" : "text/x-c",
".crt" : "application/x-x509-ca-cert",
".h" : "text/x-c", } ".css" : "text/css",
req.addListener("data", onData); ".csv" : "text/csv",
".hh" : "text/x-c",
module.exports ".htm"= { var Mime = {
: "text/html", req.addListener("end", onEnd); ".cxx" : "text/x-c",
".html" : "text/html", ".deb" : "application/x-debian-package",
(err);
fs.stat(filename, function { ".der" : "application/x-x509-ca-cert",
var index = path.lastIndexOf(".");".diff" : "text/x-diff",
if // Stop 0) { ".djv" : "image/vnd.djvu",
".djvu" : "image/vnd.djvu",
} req.removeListener("end", onEnd);
".dll" : "application/x-msdownload",
the file directly ".jar"".bmp" req, "image/bmp", type = Mime.TYPES[path.substring(index).toLowerCase()] || DEFAULT_MIME;
handle: function (err,"application/java-archive",
using buffers : res, next) {
:
var
// function error: data) {
Skip".java"
on (err, "text/x-java-source",
".bz2" : "application/x-bzip2", ".dmg" : "application/octet-stream",
ile(filename, return (/(text|javascript)/).test(type) ? : "application/msword", : type;
type + "; charset=utf-8"
err) { if (err) { : "text/x-c", // Fall through for missing files, thow error for other problems
".jnlp" : "application/x-java-jnlp-file",
".c" ".doc"
}, if (err) { ".dot" : "application/msword",
next(err); next(); ".cab"
".jpeg" : "image/jpeg",
: "application/vnd.ms-cab-compressed",
return;
".jpg" : "image/jpeg", if (err.errno === process.ENOENT) { "application/xml-dtd",
".dtd" :
return; TYPES : { ".3gp" : "video/3gpp", ".dvi"
} ".js" : "application/javascript", next(); : "application/x-dvi",
var url = Url.parse(req.url); ".a" Refire the buffered events : "application/java-archive",
".ear"
".log" : "text/plain", events.forEach(function (args) : "message/rfc822",
".eml" {
ontent-Type": Mime.type(filename), ".aif" req.emit.apply(req, args); : "application/postscript",
: "audio/x-aiff",
".eps"
".m3u" :
".aiff" :
".m4v" : "video/mp4", }); ".exe" : "application/x-msdownload",
: ".f" : "text/x-fortran",
for 1 :
".f77" : "text/x-fortran",
".asm" : "text/x-asm", ".f90"
".mbox" "index.html"; : "text/x-fortran",

Built-in Filter Modules
Authentication Error Handler
Authorization Gzip
Body Decoder Log
Cache Method Override
Conditional Get Response Time
Debug Session


Built-in Data Providers

Static Cache Manifest
Rest Direct
Router JSON-RPC
PubSub More...


Demo Time!


app.js (stack)
require.paths.unshift("./lib");
var Connect = require('connect');
var root = __dirname + "/public";

module.exports = Connect.createServer([
{filter: "log"},
{filter: "body-decoder"},
{provider: "pubsub", route: "/stream",
logic: Backend},
{filter: "conditional-get"},
{filter: "cache"},
{filter: "gzip"},
{provider: "cache-manifest", root: root},
{provider: "static", root: root}
]);


app.js (Backend)
var Backend = {
subscribe: function (subscriber) {
if (subscribers.indexOf(subscriber) < 0) {
subscribers.push(subscriber);
}
},
unsubscribe: function (subscriber) {
var pos = subscribers.indexOf(subscriber);
if (pos >= 0) {
subscribers.slice(pos);
}
},
publish: function (message, callback) {
subscribers.forEach(function (subscriber) {
subscriber.send(message);
});
callback();
}
};


http://github.com/extjs/connect

http://twitter.com/creationix

http://raphaeljs.com

http://nodejs.org


Any
Questions
?


Real Time Web with Node

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (6)

Similar to Real Time Web with Node

Similar to Real Time Web with Node (20)

Recently uploaded

Recently uploaded (20)

Real Time Web with Node