node.js + socket.ioでTwitterのStreaming APIを使ってみる

2013.06.09追記

最新版で動作するよう、記事を修正しました。

はじめに

node.js + socket.ioでTwitterが提供するStreaming APIを使ってみました。今回作ったサンプルアプリケーションは、Streaming APIで指定されたキーワードにマッチするツイートを拾って、画面に表示させるものです。
この記事を書くにあたり、以下のブログを参考にさせていただきました。

Node.js[1]-soket.io v0.7以降の記述方 « cross HVN

サーバサイドJavaScript Node.js入門

posted with amazlet at 13.06.09

清水俊博大津繁樹 Jxck 小林秀和佐々木庸平篠崎祐輔高木敦也西山雄也
アスキー・メディアワークス
売り上げランキング: 177,797

Amazon.co.jpで詳細を見る

ソフトウェアのバージョン

Mac OS X Mountain Lion 10.8.3
node.js v0.10.8
npm@1.2.23
express@3.2.5
socket.io@0.9.14
ntwitter@0.5.0

必要なもの

Twitterの開発者向けアカウント。以下のサイトで取得することができます。

Twitter Developers

サンプルプログラムの作成

１．はじめに、expressコマンドで、SampleAppという名前のサンプルアプリケーションを作成します。

express -e SampleApp

２．カレントディレクトリを移動しつつ、必要なライブラリをインストールします。

cd SampleApp && npm install

３．socket.ioをインストールします。

npm install socket.io

４．node.jsからTwitter Streaming APIを使うにはntwitterが便利です。今回はntwitterを使ってつくります。

AvianFlu/ntwitter · GitHub

ntwitterをインストールします。

npm install ntwitter

５．app.jsを編集します。
このとき、dev.twitter.comで取得したカスタマーキーやアクセストークンキーを指定する必要があります。

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

以下のコードをコピーペーストして、app.jsに上書きします。

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

// add start
var twitter = require('ntwitter');
var io = require('socket.io').listen(app);
// Twitter APIを使うためのおまじない
var twitter = new twitter({
  consumer_key: 'xxx',
  consumer_secret: 'xxx',
  access_token_key: 'xxx',
  access_token_secret: 'xxx'
});
// add end

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

// del start
//app.get('/', routes.index);
// del end
app.get('/users', user.list);

// update start
//http.createServer(app).listen(app.get('port'), function(){
var server = http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});
// update end

// add start
var io = require('socket.io').listen(server);
var keyword = "AKB48";
app.get('/', function(req, res){
  // リクエストからキーワードを取得する
  if (req.query.keyword) {
    keyword = req.query.keyword;
  }
  res.render('index', {
    keyword: keyword
  });
  
  // Twitter Streaming APIを呼び出す
  twitter.stream('statuses/filter', {'track': keyword},function(stream) {
    stream.on('data', function (data) {
      io.sockets.emit('message',data.text);
    });
    stream.on('end', function (response) {
      // 切断された場合の処理
    });
    stream.on('destroy', function (response) {
      // 接続が破棄された場合の処理
    });
  });
});
// add end

６．viewsディレクトリのindex.ejsを編集します。
以下のコードをコピーして、index.ejsに上書きします。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Twitter × Node.js feat. socket.io</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect('http://localhost:3000');
      socket.on('message', function(t){
        $('<div></div>')
          .html('<li>' + t + '</li>')
          .prependTo('#tweets');
      });
    </script>
  </head>
  <body>
    <h1>Twitter × Node.js feat. socket.io</h1>
    <form id="frm" name="frm" method="GET" action="/">
    <input type="text" id="keyword" name="keyword" value="<%=keyword %>">
    に関する<input type="submit" id="search" name="search" value="ツイートを眺める">
    </form>
    <ul>
    <div id="tweets"></div>
    </ul>
  </body>
</html>

７．public/stylesheetsディレクトリのstyle.cssを編集します。
以下のコードをコピーして、style.cssに上書きします。

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

li {
  padding: 5px;
  margin-bottom: 7px;
  color: #FFF;
  background-color: #0593e2;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}