Twitter Streaming APIで取得したツイートをブラウザにプッシュする方法


「node.jsでTwitter Streaming APIを利用する方法」の続きです。

Streaming APIを使ってサーバで受信したつぶやきをブラウザにプッシュするには、Socket.IOを使うのが簡単です。

準備

必要なパッケージをインストールします。

npm install socket.io express ntwitter

サーバ側

Streaming APIで取得したツイートの情報を、次のようなJavaScriptコード(server.jsとします)でクライアントにプッシュします。consumer_keyconsumer_secretaccess_token_keyaccess_token_secretの部分は適切なもので埋めます。

var express = require('express')
  , app = express()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);

//port: Heroku || AppFog || 3000
var port = process.env.PORT || process.env.VMC_APP_PORT || 3000;
server.listen(port);

app.use(express.static(__dirname + '/public'));

var twitter = require('ntwitter');
var tw = new twitter({
  consumer_key: '',
  consumer_secret: '',
  access_token_key: '',
  access_token_secret: ''
});

tw.stream('statuses/sample', function(stream) {
  stream.on('data', function (data) {
    io.sockets.emit('message', {
      'text': data.text
    });
  });
});

つぶやきを受信すると、「io.sockets.emit()」を呼び出し、つぶやきの本文を全クライアントにブロードキャストします(「io.sockets.volatile.emit()」ではよくないようです)。この例では、「io.sockets.emit()」の引数は単なる文字列でもいいのですが、他の情報もブロードキャストしたい場合を考慮して、上のようなオブジェクトにしています。

クライアント側

次のようなHTMLファイルpublic/index.htmlを作ります。サーバからプッシュされたツイートの情報をページに追記しています(最大100個まで)。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <title>statuses/sample</title>
</head>
<body>
  <script>
    $(document).ready(function() {
      var socket = io.connect();
      socket.on('message', function(data) {
        $('<p>' + data.text + '</p>').prependTo('body');
        $('p:eq(100)').remove();    
      });
    });
  </script>
</body>
</html>

実行

node server.js」として実行し、ウェブブラウザから「http://localhost:3000/」にアクセスすると、大量のツイートが流れていく様子が見られるでしょう。

つづき:位置情報付きのつぶやきをGoogle Maps上にリアルタイムに表示する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です