Archive

Archive for May, 2010

Long polling in Node.js

May 21st, 2010

Note: Node is currently under heavy development and the API is in a state of flux. This article was written to be compatible with v0.1.95, the most recent version of Node at the time. The examples in this article may not work with future versions.

Many web developers seem to think there is some sort of black magic behind long polling, either because the language or web server they use doesn’t support it or because they correlate it with server push technology. In this article, we’ll show how to implement long polling in Node.js and explain why you don’t need to do anything special on the client to support it.

Request types

We’re all familiar with standard web requests: the client requests a resource, the server responds synchronously, then the page is displayed. We’re also familiar with the concept of ajax requests in which the client requests a resource asynchronously and is notified when the server responds. Typically the server doesn’t treat ajax requests asynchronously; a request comes in and the server immediately (and synchronously) processes the request and responds. The asynchronous part just happens on the client where the browser doesn’t block while it waits for the server to respond.

Long polling is an ajax request in which the request and response are both treated as asynchronous operations. Rather than accepting the request and immediately processing to return a result, the server accepts the request and holds on to it until some other event occurs, providing data to send as a response to the original request. Most scripting languages don’t support holding on to requests for long periods of time because the script runs from top to bottom and then immediately responds. Trying to hold on to requests in these languages would require creating a blocking loop that waits for the relevant event to occur and that would quickly kill your server as requests build up. Node scripts run in an event loop, making them ideal for holding on to requests without blocking other processes.

Handling requests in Node

Because Node is specifically built to provide non-blocking I/O, even the Hello World example from the docs shows off an asynchronous response to an HTTP request.

var http = require("http");
http.createServer(function(request, response) {
	setTimeout(function() {
		response.writeHead(200, { "Content-Type": "text/plain" });
		response.end("Hello, World!");
	}, 2000);
}).listen(8000);

When a request comes in, the server will wait two seconds and then respond with “Hello, World!”. The important thing in this example is that the script is not blocking while it waits two seconds. This means that other requests can come in during that two second period and be handled immediately. In this case, those additional requests would also wait for two seconds before getting a response, but the response would come two seconds after the request was initiated, not two seconds after the previous request is closed.

Let’s split the response generation out of the main function to get a better idea of what’s really going on here.

var http = require("http");
var requests = [];

http.createServer(function(request, response) {
	// store the response so we can respond later
	requests.push(response);
}).listen(8000);

setInterval(function() {
	// respond to each request
	while (requests.length) {
		response = requests.shift();
		response.writeHead(200, { "Content-Type": "text/plain" });
		response.end("Hello, World!");
	}
}, 2000);

There are a few differences between this example and the first example. Right away, we can see that when a request comes in we don’t make any attempt to respond to it, we just throw the response object into an array and seemingly ignore it. Next we have a function that runs every two seconds and responds to all the requests that we’re holding on to. Since this interval is based on when the script was started, the request may be held for anywhere between one millisecond and two seconds, depending on how close the request comes in to the next run of the interval. This better represents the standard model for a long polling implementation in which some event not directly related to the request occurs on the server and triggers a response.

A more complex example

Let’s build a script the pipes stdin to HTTP requests. When an HTTP request comes, we’ll check to see if we have any data already stored from stdin. If we do, we’ll just respond to the request immediately; if we don’t, we’ll hold on to the request and respond whenever we detect some action from stdin. Likewise, when we receive data from stdin, we’ll check to see if we have a pending HTTP request. If we do, we’ll respond to the request with the data that just came in; if we don’t, we’ll store the data and respond whenever a request comes in.

var http = require("http");
var pendingResponse;
var chunks = "";

http.createServer(function(request, response) {
	// if we have data, send it
	if (chunks.length) {
		response.writeHead(200, { "Content-Type": "text/plain" });
		response.end(chunks);
		chunks = "";

	// no data sitting around, store the response for later
	} else {
		pendingResponse = response;
	}
}).listen(8000);

process.openStdin().addListener("data", function(chunk) {
	// if we have a pending request, send the data
	if (pendingResponse) {
		pendingResponse.writeHead(200, { "Content-Type": "text/plain" });
		pendingResponse.end(chunk);
		pendingResponse = null;

	// no pending request, store the chunk from stdin for later
	} else {
		chunks += chunk;
	}
});

Preventing timeouts

One problem you might run into with long polling is holding on to the request too long. If you take too long to respond, the request will eventually time out. To prevent this from occurring, you can keep track of when the requests come in, and send an empty response if the request is still open after a certain period of time. When the client receives the empty response, it will start the next long poll request. This can easily be accomplished with a slight tweak to the code above that uses an interval to respond to requests. Instead of just responding to all requests, we would check if the request has been pending for too long, and close it out if it has.

var http = require("http");
var requests = [];

http.createServer(function(request, response) {
	// store the response so we can respond later
	requests.push({
		response: response,
		timestamp: new Date().getTime()
	});
}).listen(8000);

setInterval(function() {
	// close out requests older than 30 seconds
	var expiration = new Date().getTime() - 30000;
	var response;
	for (var i = requests.length - 1; i >= 0; i--) {
		if (requests[i].timestamp < expiration) {
			response = requests[i].response;
			response.writeHead(200, { "Content-Type": "text/plain" });
			response.end("");
		}
	}
}, 1000);

Long polling on the client

As mentioned above, there’s nothing special that needs to be done on the client for long polling. The general concept is just to make an ajax request and when you get a response, handle it and make the ajax request again. This process just loops over and over, handling data whenever the server responds.

Node.js , ,

Building stateful jQuery plugins

May 15th, 2010

Background

Over the past few years, jQuery has dominated the web development community with its simple, yet brilliant, API. The “find elements, do something” pattern and ability to chain function calls together combine to create code that reads like English. jQuery’s simplicity and almost nonexistent learning curve have made it extremely popular among developers and designers alike. Equally as important as its ease of use is its extensibility. With an extension system that makes creating a plugin as simple as writing a function, jQuery has been able to maintain a lean core while offering an almost unlimited amount of functionality.

The combination of jQuery’s simple plugin system and its active community has resulted in over 2,000 plugins being listed in its plugin repository. However, like all core methods, the majority of these plugins only provide stateless functionality. While many of these plugins are useful, there’s a large set of functionality that doesn’t fit into the basic plugin pattern.

A new plugin system

In order to fill this gap, jQuery UI has implemented a more advanced plugin system. The new system manages state, allows multiple functions to be exposed via a single plugin, and provides various extension points. This system is called the widget factory and is exposed as jQuery.widget. In this article, we’ll explore the various features provided by the widget factory by building a simple progress bar plugin using jQuery UI 1.8.

Building a plugin

To start, we’ll create a progress bar that just lets us set the progress once. As we can see below, this is done by calling jQuery.widget with two parameters: the name of the plugin to create and an object literal containing functions to support our plugin. When our plugin gets called, it will create a new plugin instance and all functions will be executed within the context of that instance. This is different from a standard jQuery plugin in two important ways. First, the context is an object, not a DOM element. Second, the context is always a single object, never a collection.

$.widget( "nmk.progressbar", {
	_create: function() {
		var progress = this.options.value + "%";
		this.element
			.addClass( "progressbar" )
			.text( progress );
	}
});

The name of the plugin must contain a namespace, in this case we’ve used the nmk namespace. There is currently a limitation that exactly one namespace must be used. We can also see that the widget factory has provided two properties for us. this.element is a jQuery object containing exactly one element. If our plugin is called on a jQuery object containing multiple elements, a separate plugin instance will be created for each element, and each instance will have its own this.element. The second property, this.options, is a hash containing key/value pairs for all of our plugin’s options. These options can be passed to our plugin as shown here.

$( "<div></div>" )
	.appendTo( "body" )
	.progressbar({ value: 20 });

When we call jQuery.widget it extends jQuery by adding a function to jQuery.fn (the system for creating a standard plugin). The name of the function it adds is based on the name you pass to jQuery.widget, without the namespace; in our case “progressbar”. The options passed to our plugin are the values that get set in this.options inside of our plugin instance. As shown below, we can specify default values for any of our options. When designing your API, you should figure out the most common use case for your plugin so that you can set appropriate default values and make all options truly optional.

$.widget( "nmk.progressbar", {
	// default options
	options: {
		value: 0
	},
	_create: function() {
		var progress = this.options.value + "%";
		this.element
			.addClass( "progressbar" )
			.text( progress );
	}
});

Calling plugin methods

Now that we can initialize our progress bar, we’ll add the ability to perform actions by calling methods on our plugin instance. To define a plugin method, we just include the function in the object literal that we pass to jQuery.widget. We can also define “private” methods by prepending an underscore to the function name.

$.widget( "nmk.progressbar", {
	options: {
		value: 0
	},
	_create: function() {
		var progress = this.options.value + "%";
		this.element
			.addClass( "progressbar" )
			.text( progress );
	},
	// create a public method
	value: function( value ) {
		// no value passed, act as a getter
		if ( value === undefined ) {
			return this.options.value;
		// value passed, act as a setter
		} else {
			this.options.value = this._constrain( value );
			var progress = this.options.value + "%";
			this.element.text( progress );
		}
	},
	// create a private method
	_constrain: function( value ) {
		if ( value > 100 ) {
			value = 100;
		}
		if ( value < 0 ) {
			value = 0;
		}
		return value;
	}
});

To call a method on a plugin instance, you pass the name of the method to the jQuery plugin. If you are calling a method that accepts parameters, you simply pass those parameters after the method name.

Note: Executing methods by passing the method name to the same jQuery function that was used to initialize the plugin may seem odd. This is done to prevent pollution of the jQuery namespace while maintaining the ability to chain method calls. Later in this article we’ll see alternative uses that may feel more natural.

var bar = $( "<div></div>" )
	.appendTo( "body" )
	.progressbar({ value: 20 });

// get the current value
alert( bar.progressbar( "value" ) );

// update the value
bar.progressbar( "value", 50 );

// get the current value again
alert( bar.progressbar( "value" ) );

Working with options

One of the methods that is automatically available to our plugin is the option method. The option method allows you to get and set options after initialization. This method works exactly like jQuery’s css and attr methods: you can pass just a name to use it as a setter, a name and value to use it as a single setter, or a hash of name/value pairs to set multiple values. When used as a getter, the plugin will return the current value of the option that corresponds to the name that was passed in. When used as a setter, the plugin’s _setOption method will be called for each option that is being set. We can specify a _setOption method in our plugin to react to option changes.

$.widget( "nmk.progressbar", {
	options: {
		value: 0
	},
	_create: function() {
		this.element.addClass( "progressbar" );
		this._update();
	},
	_setOption: function( key, value ) {
		this.options[ key ] = value;
		this._update();
	},
	_update: function() {
		var progress = this.options.value + "%";
		this.element.text( progress );
	}
});

Adding callbacks

One of the easiest ways to make your plugin extensible is to add callbacks so users can react when the state of your plugin changes. We can see below how to add a callback to our progress bar to signify when the progress has reached 100%. The _trigger method takes three parameters: the name of the callback, a native event object that initiated the callback, and a hash of data relevant to the event. The callback name is the only required parameter, but the others can be very useful for users who want to implement custom functionality on top of your plugin. For example, if we were building a draggable plugin, we could pass the native mousemove event when triggering a drag callback; this would allow users to react to the drag based on the x/y coordinates provided by the event object.

$.widget( "nmk.progressbar", {
	options: {
		value: 0
	},
	_create: function() {
		this.element.addClass( "progressbar" );
		this._update();
	},
	_setOption: function( key, value ) {
		this.options[ key ] = value;
		this._update();
	},
	_update: function() {
		var progress = this.options.value + "%";
		this.element.text( progress );
		if ( this.options.value == 100 ) {
			this._trigger( "complete", null, { value: 100 } );
		}
	}
});

Callback functions are essentially just additional options, so you can get and set them just like any other option. Whenever a callback is executed, a corresponding event is triggered as well. The event type is determined by concatenating the plugin name and the callback name. The callback and event both receive the same two parameters: an event object and a hash of data relevant to the event, as we’ll see below. Your plugin may have functionality that you want to allow the user to prevent. The best way to support this is by creating cancelable callbacks. User’s can cancel a callback, or its associated event, the same way they cancel any native event, by calling event.preventDefault() or returning false. If the user cancels the callback, the _trigger method will return false so you can implement the appropriate functionality within your plugin.

var bar = $( "<div></div>" )
	.appendTo( "body" )
	.progressbar({
		complete: function( event, data ) {
			alert( "Callbacks are great!" );
		}
	})
	.bind( "progressbarcomplete", function( event, data ) {
		alert( "Events bubble and support many handlers for extreme flexibility." );
		alert( "The progress bar value is " + data.value );
	});

bar.progressbar( "option", "value", 100 );

Looking under the hood

Now that we’ve seen how to build a plugin using the widget factory, let’s take a look at how it actually works. When you call jQuery.widget, it creates a constructor for your plugin and sets the object literal that you pass in as the prototype for your plugin instances. All of the functionality that automatically gets added to your plugin comes from a base widget prototype, which is defined as jQuery.Widget.prototype. When a plugin instance is created, it is stored on the original DOM element using jQuery.data, with the plugin name as the key.
Because the plugin instance is directly linked to the DOM element, you can access the plugin instance directly instead of going through the exposed plugin method if you want. This will allow you to call methods directly on the plugin instance instead of passing method names as strings and will also give you direct access to the plugin’s properties.

var bar = $( "<div></div>" )
	.appendTo( "body" )
	.progressbar()
	.data( "progressbar" );

// call a method directly on the plugin instance
bar.option( "value", 50 );

// access properties on the plugin instance
alert( bar.options.value );

Extending a plugin’s prototype

One of the biggest benefits of having a constructor and prototype for a plugin is the ease of extending the plugin. By adding or modifying methods on the plugin’s prototype, we can modify the behavior of all instances of our plugin. For example, if we wanted to add a method to our progress bar to reset the progress to 0% we could add this method to the prototype and it would instantly be available to be called on any plugin instance.

$.nmk.progressbar.prototype.reset = function() {
	this._setOption( "value", 0 );
};

Cleaning up

In some cases, it will make sense to allow users to apply and then later unapply your plugin. You can accomplish this via the destroy method. Within the destroy method, you should undo anything your plugin may have done during initialization or later use. The destroy method is automatically called if the element that your plugin instance is tied to is removed from the DOM, so this can be used for garbage collection as well. The default destroy method removes the link between the DOM element and the plugin instance, so it’s important to call the base function from your plugin’s destroy method.

$.widget( "nmk.progressbar", {
	options: {
		value: 0
	},
	_create: function() {
		this.element.addClass( "progressbar" );
		this._update();
	},
	_setOption: function( key, value ) {
		this.options[ key ] = value;
		this._update();
	},
	_update: function() {
		var progress = this.options.value + "%";
		this.element.text( progress );
		if ( this.options.value == 100 ) {
			this._trigger( "complete", null, { value: 100 } );
		}
	},
	destroy: function() {
		this.element
			.removeClass( "progressbar" )
			.text("");

		// call the base destroy function
		$.Widget.prototype.destroy.call( this );
	}
});

Closing comments

The widget factory is only one way of creating stateful plugins. There are a few different models that can be used and each have their own advantages and disadvantages. The widget factory solves lots of common problems for you and can greatly improve productivity, it also greatly improves code reuse, making it a great fit for jQuery UI as well as many other stateful plugins.

You may have noticed that in this article we used the nmk namespace. The ui namespace is reserved for official jQuery UI plugins. When building your own plugins, you should create your own namespace. This makes it clear where the plugin came from and if it is part of a larger collection.

View this example in a new window

jQuery, jQuery UI , ,