使用PHP和JSON处理实时Twitter流



我正在努力弄清楚如何从实时Twitter流中拉入tweet。我想保持流连接打开,并在tweet进入时将其渲染到地图上。

我认为我的问题是在tweetmap.php,因为我不知道如何处理流,因为它的更新。此外,我认为我没有正确地检查最后一条推文的位置(通过推文的ID)。

我一直使用本教程作为我的指导,但我想绕过将它们存储到数据库中,只是在飞行中处理它们。

poll()(在tweetmap.js中)在页面首次加载时调用。

tweetmap.php:

<?php
    $opts = array(
        'http'=>array(
            'method'    =>  "POST",
            'content'   =>  'track=lol',
        )
    );
    $context = stream_context_create($opts);
    while (1){
        $instream = fopen('https://stream.twitter.com/1/statuses/filter.json','r' ,false, $context);
        while(! feof($instream)) {
            if(! ($line = stream_get_line($instream, 20000, "n"))) {
                continue;
            } else{
                $tweets = json_decode($line);
                echo $tweets;
                flush();
            }
        }
    }
?>

tweetmap.js:

var last = '';
var timeOut;
function getTweets(id){
    $.getJSON("./php/tweetmap.php?start=" + id,
    function(data){
        $.each(data, function(count,item){
            harvest(item);
            last = item.id;
        });
    });
}
function harvest(tweets) {
    for (var i = 0; i < tweets.results.length; i++) {
        if (tweets.results[i].geo !== null) {
            mapTweet(tweets.results[i]);
        }
    }
}
function mapTweet(tweetData) {
    var tipText;
    var coordinates = projection([tweetData.geo.coordinates[1], tweetData.geo.coordinates[0]]);
    [...]
    // Determines the coordinates of the tweet and adds a circle
    addCircle(coordinates, tipText);
}
function addCircle(coordinates, tipText, r) {
    // Adds and SVG circle to the map
    addTipsy(tipText, tweetNumber);
}
// add tipsy tweet-tip 
function addTipsy(tipText, num) {
    // Adds a hover tip of the tweet on the map
    [...]
}
// Draw the map (is also called to redraw when the browser is resized)
function draw(ht) {
    [...]
    // Draws the SVG map
}
function poll(){
    timeOut = setTimeout('poll()', 200); // Calls itself every 200ms
    getTweets(last);
}
$(function() {
    poll();
    draw($("#mapContainer").width()/2.25);
    $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });
    $(window).bind('resizeEnd', function() {
        var height = $("#mapContainer").width()/2.25;
        $("#mapContainer svg").css("height", height);
        draw(height);
    });
});

您试图将HTTP请求视为连续流,而这不是它的工作方式。HTTP是一种无状态协议,它处理请求然后关闭。你有两个选择来做你想做的事情:

  1. 使用多个请求,间隔时间可能为1秒。这将创建实时的新tweet外观。您可能需要跟踪上次请求的时间,以便只发送新的tweet。

  2. Websocket使用。这将提供一个您所期望的沟通渠道。但是,并不是所有的浏览器都支持。

相关内容

  • 没有找到相关文章

最新更新