pi.comet2009-01-06 09:23:21

Summary

pi.comet is a simple javascript class to create cross browser Comet(Reverse Ajax) applications easily.It provides realtime data transfers between client and server.You can use pi.comet with any serverside language, but I recommend Python(CherryPy) and PHP.

Download: 4.1KB

Demo

Realtime Web Chat (PHP)
- Try
- Source
Realtime Web Chat (CherryPy(Python))
- Source

Syntax

var stream = new pi.comet(name (optional),onread (optional),onclose (optional));

Usage Example

Quick usage: var stream = pi.comet.get(url,onread,onclose); General Usage:

var stream = new pi.comet;
stream.environment.setName('test');
stream.environment.setUrl('push.php');
stream.event.push = function(_response){ alert(_response); };
stream.event.disconnect = function(){ alert('Connection is closed'); };
stream.environment.send();

There is a one more alternative usage too, you can use the "get" static method:

var stream = pi.comet.get(
	'push.php',
	function(_response){ alert(response); },
	function(){ alert('Connection is closed'); }
);

Methods

abort

Cancels the request.

send

Sends the request.

environment.setUrl

Sets transfer path.

Events

push

When the target url prints data between "<comet>" and "</comet>" tags, the data is sent to event.push.

disconnect

Runs when the stream is closed.

StaticMethods

get

Opens a comet channel and returns the pi.comet object.

Serverside Scripting

How it works

Understanding the push technology.

Push Classes

The classes which provide cross browser outputs.

Examples

Example #1: simple data stream

Source files of the above example:

examples/simple/simple.html

<button id="start">Start</button><button id="stop">Stop</button>
<textarea id="monitor">
</textarea>

examples/simple/simple.css

#monitor { display:block; width:400px; height:150px; }

examples/simple/simple.js

var stream;
function start(){
	stream = pi.comet.get("examples/simple/simple.php",read,disable);
	startButton.attribute.set("disabled","disabled").event.removeListener("click",start);
	stopButton.attribute.remove("disabled").event.addListener("click",stop);
	textbox.update("");
}

function read(_response){
	textbox.element.value+="\n"+_response;
}

function stop(){
	stream.abort();
	disable();
}

function disable(){
	startButton.attribute.remove("disabled").event.addListener("click",start);
	stopButton.attribute.set("disabled","disabled").event.removeListener("click",stop);
}

var startButton = new pi.element(pi.get("start")).event.addListener("click",start), 
stopButton = new pi.element(pi.get("stop")).attribute.set("disabled","disabled"), 
textbox = new pi.element(pi.get("monitor")).attribute.set("readonly","readonly");

examples/simple/simple.php

<?
	require_once "pi_comet.php";
	
	$stream = new PIComet($_GET["PICometMethod"],$_GET["PICometName"]);
	
	header("Content-type:".$stream->header);
	
	$messages = Array("If the number's there I'll find it!","Something's going on.","It has to do with that number.","There's an answer in that number.","You see the simplicity of the circle.","Mathematics is the language of nature","Everything around us can be represented and understood through numbers","If you graph these numbers, patterns emerge.","Therefore: There are patterns everywhere in nature.");
	
	for($i=0; $i<15; $i++){
		print $stream->push( time() . " " . $messages[rand(0,count($messages)-1)]  );
		ob_flush();
		flush();
		sleep(1);
	}
?>

Essential Documents

Reference