Surfin' JavaScript Wave

Twitter API: Stream of messages for query with PHP, JSON and Prototype

keemor~20 lipca 2009 /Javascript/JSON/Prototype

Last week Antonio Lupetti presented on his blog turorial on Twitter API: How to create a stream of messages Monitter-like with PHP and jQuery.

I would like to present how I did such widget using PrototypeJS and JSON.
I left html and css unchanged and you can CHECK OUT DEMO HERE.
I used JSON-PHP library to convert $results list of objects into JSON.


header('Content-type: application/json'); 
//Set header to application/json to easily read JSON in javascript
require_once "lib/twitterapi.php";
require_once "lib/JSON.php";

	$twitter_query= $_POST['twitterq'];
	$search = new TwitterSearch($twitter_query);
	$results = $search->results();
	foreach($results as $result){
	$json = new Services_JSON();
	echo $json->encode($results);

Object Stream in index.html

var Stream = {
	init: function() {
//On form twittersearch submit call xhrSearch method
		$('twittersearch').observe('submit', this.xhrSearch.bindAsEventListener(this));
//On load clear input and set focus on it
//Change the scope of displayTwitts method to Stream
		this.displayTwitts = this.displayTwitts.bind(this);
//Change the scope of clearInterval method to Stream
		this._clearInterval = this._clearInterval.bind(this);
	template: new Template(
//Template for each twitt 
		'<div class="twitter_status" style="display: none">'+
		'<img src="#{profile_image_url}" class="twitter_image">#{text}'+
		'<span class="twitter_small">'+
		'<strong>From:</strong> <a href="{from_user}">#{from_user}</a>: '+
		'<strong>at:</strong> #{created_at}'+
		'<input type="hidden" value="#{id}"></input>'+
	xhrSearch: function(e) {
//If input field is blank set focus to it and return
		if ($F('twitterq').blank()) {
//Make ajax call, default method is POST
		var xhr = new Ajax.Request("search.php", {
			parameters: {
//On success call xhrSearchSuccess in the Stream object scope
			onSuccess: this.xhrSearchSuccess.bind(this)
	xhrSearchSuccess: function(transport){
		this.i = 0;
//Due to header application/json we have JSON object in response = transport.responseJSON;
//Set the amount of twitts to limit var
		this.limit =;
//Set the reference to 'twitter-results' div
		this.twitterResults = $('twitter-results');
//Clear 'twitter-results' div
//Call displayTwitts method via setInterval function in 1 sec intervals
		this.intervalId = window.setInterval(this.displayTwitts,1000); 
	displayTwitts: function () {
//Insert each evaluated twitt into 'twitter-results' div
		this.twitterResults.insert (this.template.evaluate([this.i]));
//Show twitt in 0.5 sec time
		this.twitterResults.childElements()[this.i].appear({ duration: 0.5 });
//Clear interval when the last twitt appears
		if (this.i === this.limit) {
	_clearInterval: function(){
document.observe('dom:loaded', Stream.init.bind(Stream));

That’s all! Thanks for reading.

This is my first post in english on this blog. Whole blog is in polish.
For now you can check out page about me in english.