CODEWITHSUNDEEP
javascriptjquerytimeouttwitter
Adam Lynch
Adam Lynch

Reputation: 3369

Request timeout

I'm using some jQuery to display tweets but once the Twitter API limit is reached, the request is sent but just keeps loading and loading. This doesn't look good. I want to be able to determine if the request is taking too long and then obviously do stuff, like cancel the request, change the styling, etc.

So this is the code that sends the request:

var fileref = document.createElement('script');

fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=50");

document.getElementsByTagName("head")[0].appendChild(fileref);

And this is the TweetTick function:

function TweetTick(ob)
{
var container=$('#tweet-container');
container.html('');

$(ob.results).each(function(el){

    /* in here, a div is built for each tweet and then appended to container */

});

container.jScrollPane(); /* just adds the scrollbar */
}

Upvotes: 2

Views: 2814

Answers (3)

tadywankenobi
tadywankenobi

Reputation: 765

I had a very similar problem lately. I use this script by Remy Sharp for most of my twitter requests: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/

What you need to realise is that the api timeout is per IP address. So if the api has timed out for you based on your testing, it won't have timed out for someone else on a different IP address. Now, if someone accessing the site is doing so within a corporation or business, and others in the same place are doing the same, that timeout will occur almost instantaneously.

To get around this you need to cache your results. The way I did this was as follows.

I created a twitter caching system using the following code:

$twitter_username = "tadywankenobi"; //
$number_of_tweets = "10";

$options[CURLOPT_URL] = 'http://api.twitter.com/1/statuses/user_timeline.xml?screen_name='.$twitter_username.'&count='.$number_of_tweets.'&include_rts=1';
$options[CURLOPT_PORT] = 80;
$options[CURLOPT_FOLLOWLOCATION] = true;
$options[CURLOPT_RETURNTRANSFER] = true;
$options[CURLOPT_TIMEOUT] = 60;

$tweets = cache($options);

$twxml = new SimpleXMLElement($tweets);

echo "<ul>";
for($i=0;$i<=($number_of_tweets-1);$i++){
    $text = $twxml->status[$i]->text;
    echo "<li>".auto_link_twitter($text)."</li>";
}
echo "</ul>";

function cache($options) {

    $cache_filename = "/var/cache/tweets.xml";
    if(!file_exists($cache_filename)){
        $handle = fopen($cache_filename, 'w') or die('Cannot open file:  '.$my_file);
        fclose($handle);
    }// Check if cache file exists and if not, create it

    $time_expire = filectime($cache_filename) + 60*60; // Expire Time (1 hour) // Comment for first run
    // Set time to check file against

    if(filectime($cache_filename) >= $time_expire || filesize($cache_filename) == 0) {
        // File is too old or empty, refresh cache
        $curl = curl_init();
        curl_setopt_array($curl, $options);
        $response = curl_exec($curl);
        curl_close($curl);
        if($response){
            file_put_contents($cache_filename, $response);
        }
        else{
            unlink($cache_filename);
        }
    }else{
        $response = file_get_contents($cache_filename);
    }
    return $response;
}

What the cache function at the end does is create a file on the server and stores the twitter xml feedback in there. The system then checks to see the age of that file and if it's younger than an hour old, it takes its results from there. Otherwise, it re-accesses twitter. You need to have the file writable in the /var/cache folder (create it if it's not there).

I've kinda hacked this code together a bit, so let me know if you run into any issues with it. It also uses an auto_link_twitter() function, which creates the links required within the twitter text. I didn't write that, so I'll try and find you a link to it now.

Hope that all helps,

T

UPDATE: I can't remember where I got the auto_link_twitter() function, so here it is. If the person who wrote it reads this post, my apologies, I couldn't find the source again.

function auto_link_twitter($text) {
    // properly formatted URLs
    $urls = "/(((http[s]?:\/\/)|(www\.))?(([a-z][-a-z0-9]+\.)?[a-z][-a-z0-9]+\.[a-z]+(\.[a-z]{2,2})?)\/?[a-z0-9._\/~#&=;%+?-]+[a-z0-9\/#=?]{1,1})/is";
    $text = preg_replace($urls, " <a href='$1'>$1</a>", $text);

    // URLs without protocols
    $text = preg_replace("/href=\"www/", "href=\"http://www", $text);

    // Twitter usernames
    $twitter = "/@([A-Za-z0-9_]+)/is";
    $text = preg_replace ($twitter, " <a href='http://twitter.com/$1'>@$1</a>", $text);

    // Twitter hashtags
    $hashtag = "/#([A-Aa-z0-9_-]+)/is";
    $text = preg_replace ($hashtag, " <a href='http://twitter.com/#!/search?q=%23$1'>#$1</a>", $text);
    return $text;
}

Upvotes: 1

bjornd
bjornd

Reputation: 22941

You can use specific jQuery methods to make a JSONP request. There is basic $.ajax method and shorthand method $.getJSON which fits better for you. To control timeout of the request you can use timeout parameter. Request exceeded timeout can be processed using the error callback.

$.ajax(
    dataType: 'jsonp',
    url: 'http://search.twitter.com/search.json',
    data: {
        q: buildString,
        rpp: 50         
    },
    jsonpCallback: 'TweetTick',
    timeout: 30000,
    error: function(jqXHR, textStatus, errorThrown) {
        if (textStatus == 'timeout') {
            alert('timeout exceeded');
        }
    }    
);

Upvotes: 0

excanoe
excanoe

Reputation: 696

You need to cache twitter api response on your server side.

How do I keep from running into the rate limit?

Upvotes: 2

Related Questions