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.

search.php

<?
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";

if($_POST&#91;'twitterq'&#93;){
	$twitter_query= $_POST&#91;'twitterq'&#93;;
	$search = new TwitterSearch($twitter_query);
	$results = $search->results();
	foreach($results as $result){
		$result->text=toLink($result->text);			
	}	
	$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
		$('twitterq').clear().focus();
//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="http://www.twitter.com/#{from_user}">#{from_user}</a>: '+
		'<strong>at:</strong> #{created_at}'+
		'<input type="hidden" value="#{id}"></input>'+
		'</span></div>'),	
	xhrSearch: function(e) {
		e.stop();	
//If input field is blank set focus to it and return
		if ($F('twitterq').blank()) {
			$('twitterq').focus();
			return;
		}
//Make ajax call, default method is POST
		var xhr = new Ajax.Request("search.php", {
			parameters: {
				twitterq:$F('twitterq')
			},
//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
		this.data = transport.responseJSON;
//Set the amount of twitts to limit var
		this.limit = this.data.length;
//Set the reference to 'twitter-results' div
		this.twitterResults = $('twitter-results');
//Clear 'twitter-results' div
		this.twitterResults.update();
//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.data[this.i]));
//Show twitt in 0.5 sec time
		this.twitterResults.childElements()[this.i].appear({ duration: 0.5 });
		this.i++;
//Clear interval when the last twitt appears
		if (this.i === this.limit) {
			window.setTimeout(this._clearInterval);
		}
	},
	_clearInterval: function(){
		clearInterval(this.intervalId);
	}
}
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.

Dodaj komentarz