0

我正在努力弄清楚如何从实时 Twitter 流中提取推文。我想保持流连接打开，并在推文进入时将推文渲染到地图上。

我认为我的问题出在 tweetmap.php 中，因为我不知道如何处理更新的流。此外，我认为我没有正确检查最后一条推文的位置（通过推文的 ID）。

我一直使用THIS TUTORIAL作为我的指导，但我想绕过将它们存储到数据库中并即时处理它们。

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

推文地图.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();
            }
        }
    }
?>

推特地图.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);
    });
});
4

1 回答 1

1

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

  1. 使用多个请求，可能间隔一秒。这将创建实时新推文的外观。您可能必须跟踪自上次请求以来的时间，以便仅发送新推文。

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

于 2013-01-14T16:14:35.443 回答