0

ライブの Twitter ストリームからツイートを取り込む方法を見つけようとして苦労しています。ストリーム接続を開いたままにし、ツイートが入ってくるとマップ上にレンダリングしたいと考えています。

ストリームが更新されたときにストリームを処理する方法がわからないため、問題は tweetmap.php にあると思います。さらに、最後のツイートの位置を正しく (ツイートの ID で) チェックしているとは思えません。

私はこのチュートリアルをガイダンスとして使用してきましたが、データベースへの保存をバイパスして、その場で処理したいと考えています。

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();
            }
        }
    }
?>

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);
    });
});
4

1 に答える 1

1

HTTP リクエストを連続ストリームとして処理しようとしていますが、それは機能しません。HTTP は、リクエストを処理してから閉じるステートレス プロトコルです。やろうとしていることを実行するには、2 つのオプションがあります。

  1. おそらく 1 秒間隔で、複数の要求を使用します。これにより、リアルタイムの新しいツイートの外観が作成されます。新しいツイートのみが配信されるように、最後のリクエストからの時間を追跡する必要がある場合があります。

  2. ウェブソケットを使用します。これにより、期待どおりの通信チャネルが提供されます。ただし、すべてのブラウザでサポートされているわけではありません。

于 2013-01-14T16:14:35.443 に答える