1

我正在使用 Twitter APIv1.1，目前我正在尝试实现一个显示我最新推文的框。这可以在这里看到：

http://www.jdiadt.com/twitterv1_1feed/testindex.html

但是，我想这样做，以便当我发推文时，该框会自动更新。我对 JQuery 和 Javascript 还是很陌生，所以如果我能提供任何关于如何做到这一点的建议，我将不胜感激。我听说 AJAX 可以用于这样的事情。目前我必须刷新整个页面才能显示任何新推文。我只想刷新盒子。

这是我的脚本：twitterfeed.js

$(document).ready(function () {

var displaylimit = 10;
var twitterprofile = "jackcoldrick";
var screenname = "Jack Coldrick";
var showdirecttweets = false;
var showretweets = true;
var showtweetlinks = true;
var showprofilepic = true;

var headerHTML = '';
var loadingHTML = '';
headerHTML += '<a href="https://twitter.com/" ><img src="http://www.jdiadt.com/twitterv1_1feed/twitteroauth/images/birdlight.png" width="34" style="float:left;padding:3px 12px 0px 6px" alt="twitter bird" /></a>';
headerHTML += '<h1>'+screenname+' <span style="font-size:13px"><a href="https://twitter.com/'+twitterprofile+'" >@'+twitterprofile+'</a></span></h1>';
loadingHTML += '<div id="loading-container"><img src="http://www.jdiadt.com/twitterv1_1feed/twitteroauth/images/ajax-loader.gif" width="32" height="32" alt="tweet loader" /></div>';

$('#twitter-feed').html(headerHTML + loadingHTML);

$.getJSON('http://www.jdiadt.com/twitterv1_1feed/get_tweets.php',
    function(feeds) {
        //alert(feeds);
        var feedHTML = '';
        var displayCounter = 1;
        for (var i=0; i<feeds.length; i++) {
            var tweetscreenname = feeds[i].user.name;
            var tweetusername = feeds[i].user.screen_name;
            var profileimage = feeds[i].user.profile_image_url_https;
            var status = feeds[i].text;
            var isaretweet = false;
            var isdirect = false;
            var tweetid = feeds[i].id_str;

            //If the tweet has been retweeted, get the profile pic of the tweeter
            if(typeof feeds[i].retweeted_status != 'undefined'){
               profileimage = feeds[i].retweeted_status.user.profile_image_url_https;
               tweetscreenname = feeds[i].retweeted_status.user.name;
               tweetusername = feeds[i].retweeted_status.user.screen_name;
               tweetid = feeds[i].retweeted_status.id_str
               isaretweet = true;
             };

             //Check to see if the tweet is a direct message
             if (feeds[i].text.substr(0,1) == "@") {
                 isdirect = true;
             }

            //console.log(feeds[i]);

             if (((showretweets == true) || ((isaretweet == false) && (showretweets == false))) && ((showdirecttweets == true) || ((showdirecttweets == false) && (isdirect == false)))) {
                if ((feeds[i].text.length > 1) && (displayCounter <= displaylimit)) {
                    if (showtweetlinks == true) {
                        status = addlinks(status);
                    }

                    if (displayCounter == 1) {
                        feedHTML += headerHTML;
                    }

                    feedHTML += '<div class="twitter-article">';
                    feedHTML += '<div class="twitter-pic"><a href="https://twitter.com/'+tweetusername+'" ><img src="'+profileimage+'"images/twitter-feed-icon.png" width="42" height="42" alt="twitter icon" /></a></div>';
                    feedHTML += '<div class="twitter-text"><p><span class="tweetprofilelink"><strong><a href="https://twitter.com/'+tweetusername+'" >'+tweetscreenname+'</a></strong> <a href="https://twitter.com/'+tweetusername+'" >@'+tweetusername+'</a></span><span class="tweet-time"><a href="https://twitter.com/'+tweetusername+'/status/'+tweetid+'">'+relative_time(feeds[i].created_at)+'</a></span><br/>'+status+'</p></div>';
                    feedHTML += '</div>';
                    displayCounter++;
                }
             }
        }

        $('#twitter-feed').html(feedHTML);


});

//Function modified from Stack Overflow
function addlinks(data) {
    //Add link to all http:// links within tweets
    data = data.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
        return '<a href="'+url+'" >'+url+'</a>';
    });

    //Add link to @usernames used within tweets
    data = data.replace(/\B@([_a-z0-9]+)/ig, function(reply) {
        return '<a href="http://twitter.com/'+reply.substring(1)+'" style="font-weight:lighter;" >'+reply.charAt(0)+reply.substring(1)+'</a>';
    });
    return data;
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  var shortdate = time_value.substr(4,2) + " " + time_value.substr(0,3);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return '1m';
  } else if(delta < 120) {
    return '1m';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + 'm';
  } else if(delta < (120*60)) {
    return '1h';
  } else if(delta < (24*60*60)) {
    return (parseInt(delta / 3600)).toString() + 'h';
  } else if(delta < (48*60*60)) {
    //return '1 day';
    return shortdate;
  } else {
    return shortdate;
  }
}

});

这是get_tweets.php我将结果编码为 JSON 格式的脚本。

    <?php
session_start();
require_once('twitteroauth/twitteroauth/twitteroauth.php');

$twitteruser = "jackcoldrick";
$notweets = 30;
$consumerkey="xxxxxxxxxxxxxx";
$consumersecret="xxxxxxxxxxxxxxx";
$accesstoken="xxxxxxxxx";
$accesstokensecret="xxxxxxxxxxxxxx";

function getConnectionWithAccessToken($cons_key, $cons_secret, $oauth_token, $oauth_token_secret){
    $connection = new TwitterOAuth($cons_key, $cons_secret, $oauth_token, $oauth_token_secret);
    return $connection;
}

$connection = getConnectionWithAccessToken($consumerkey, $consumersecret, $accesstoken, $accesstokensecret);
$tweets = $connection->get("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=".$twitteruser."&count=".$notweets);
echo json_encode($tweets);

?>
4

2 回答 2

2

这对于您当前的代码似乎是可行的。需要考虑的事项：

  • 我不确定，但 Twitter 可能对请求有限制（我想这不是一个很大的请求）
  • 只需将代码的可重用部分封装在一个名为 的函数中updateTweets，然后使用setInterval. 据我所知，无论如何都没有真正“推送”推文更新到您的 JavaScript。
于 2013-05-24T14:21:07.993 回答
1

我会将您的更新代码放入一个具有 SetTimeout() 的函数中，该函数每 x 秒对新函数进行一次递归调用。下面是一个例子。

$(document).ready(function () {

    // Call to your update twitter function
    updateTwitter(data);

});



function updateTwitter(data) {

    // do your original update twitter GET
    $.getJSON('http://www.jdiadt.com/twitterv1_1feed/get_tweets.php', function () {
        //... all that code
    });

    // Sets a timer that calls the updateTwitter function 1x a minute
    setTimeout(function () { updateTwitter(data); }, 60000);   
}
于 2013-05-24T14:29:09.077 回答