Comet server-push framework

I've just been asked to look into a way to 'stream' information from the server to any listening clients. Basically it's a server-push rather than client-pull system where changes made on one client are (almost) immediately reflected on all other clients. This is similar to AJAX in that there is no page refresh but it is more autonomous.

I've been reading up on Comet, which is basically just a term for a kind of AJAX solution to this problem, but it doesn't specify any implementation suggestions.

Bayeux takes this a step further by actually outlining a protocol for message transfer between client and server.

Most implementations on the server-side are in Java but we need PHP. I've tracked down a PHP implementation called Comep that works quite well on the server-side (although its procedural rather than OO based) and I'm going to look into replacing its vanilla-javascript client-side with this jQuery Comet plugin.

For any other LAMP developers interested in Comet a good place to start is the Comet Daily Blog.

Update, 2008-06-15: Although PERL rather than PHP based it is also worth mentioning Meteor, which is a highly polished comet server implementation.

Custom ExtJS header buttons

ExtJS Panels can have a limited range of buttons on the header bar but what if you want a custom button? These can be added to a toolbar just underneath the header but if space is at a premium or perhaps you only want one button it's not always ideal.

One solution is to have no header and just make the toolbar look like a header:

var obj_panel = new Ext.Panel({
 tbar: new Ext.Toolbar({
// make the toolbar background look like a header
 cls: 'x-panel-header',
 height: 25,
 items: [
// give the toolbar a title which looks like a Panel title
  '<span style="color:#15428B; font-weight:bold">Title Here</span>',
  '->', //fill element
  {
   text: 'Button Text',
   iconCls: 'add', // optional icon class
   handler: function() {
   // do stuff here
  }
 },' ']
 }),
// ...
});

(The styles used above fit the standard ExtJS theme)

This produces something like this:

Extending classes in JavaScript

Note: This post was originally written in 2008. There's a 2015 update at the bottom.

There are many different ways to achieve Object Orientation in JavaScript and the Internet is littered with examples.

jQuery Uses an extend method within the super-class that allows you to add functionality onto an instance of that class, creating a kind of sub-class (although it is an object):

function SuperClass() {}
SuperClass.prototype = {
// ...
extend: function() {
 var int_count = 0;
 var arr_prop;
 while ( (arr_prop = arguments[int_count++]) != null ) {
  for ( var i in arr_prop ) {
   this[i] = arr_prop[i];
  }
 }
 // Return the modified object
 return this;
}
}

// ...

var obj_subclass = new SuperClass();
obj_subclass.extend({
foo: 'bar',
// ...
});

This is quick and dirty but not proper OO and if you want several instances of the 'sub-class' you need to call extend on each one.

You probably already know that to add member variables/methods to a class you assign them to its prototype property. This can be one value at a time:

function SuperClass() {}
SuperClass.prototype.foo = 'bar';

Or a simple object can be assigned:

function SuperClass() {}
SuperClass.prototype = {
 foo: 'bar',
 x: 'y',
 super_func: function() {
 //...
 }
}

A good way to simulate inheritance is to assign an instance of the super-class to the sub-class' prototype example here:

var obj_super = new SuperClass();
function SubClass() {}
SubClass.prototype = obj_super;

This means that all member variables/functions of SuperClass are now contained within SubClass' prototype.

In order to now extend SuperClass' functionality in SubClass we revert back to adding one new thing at a time with SubClass.prototype.sub_func = function() { //... }. This is fine but if you plan on adding a lot more stuff it's not ideal.

The solution I have come up with (I say "I", maybe other people do this but I can't find any mention of it on the net) is to combine the two methods above:

var obj_super = new SuperClass();
function SubClass() {}
SubClass.prototype = obj_super.extend({
 foo: 'bar',
 sub_func: function() { //... },
 // ...
});

This way we are still creating a proper sub-class and inheriting the super-classes functionality whilst conveniently adding our own.

Note: You can call super-class methods directly from within the sub-class with SuperClass.prototype.super_func.call(this, arg1, arg2, argN);

Update (03/01/2015)

The above used to be how I extended 'classes' in JavaScript but these days I use a different method. Again, there are many ways to achieve JS extension, what follows is just my preference.

This method has two main requirements:

1. You call the constructor of the parent inside the constructor of the child using the child's context
2. You copy the parents prototype onto the child's prototype via the Object.create method

For example:

function SuperClass()
{
    var a = 1;
    this.getA = function()
    {
        return a;
    };
}

SuperClass.prototype.functionA = function()
{
    alert('SuperClass functionA');
};

function SubClass()
{
    SuperClass.call(this);
    var b = 2;
    this.getB = function()
    {
         return b;
    };
}

SubClass.prototype = Object.create(SuperClass.prototype);
SubClass.prototype.functionB = function()
{
    var aPlusB = this.getA() + this.getB();
    alert('SubClass functionB. a+b == '+aplusB);
};

var eg = new SubClass();
eg.functionA(); // alerts "SuperClass functionA"
eg.functionB(); // alerts "SubClass functionB. a+b == 3"

Now SubClass extends SuperClass. So why not use SubClass.prototype = new SuperClass(); you ask? Well there's a subtle difference between new and Object.create() in that the latter doesn't actually call SuperClass's constructor, it just copies the prototype so the SuperClass constructor will only get called at the time of creation of the SubClass (as we are calling it explicitly with SuperClass.call(this)).

Note that, as with the old method from this post, the way to call SuperClass function directly is with SuperClass.prototype.functionName.call(this, arg1, argN)