このsocket.ioとTwitter Streaming APIを組み合わせてAKB48さんのワードが入ったツイートを眺めるアプリを作ってみます。
システム構成
- Node 0.6.7
- socket.io 0.8.7
- express 2.5.5
- Twitter-Node（SSL対応版）
Expressをインストールします。
$ sudo npm install express -g
$
Expressで雛形作成を作成します。
$ express tweets_akb48
$ cd tweets_akb48 && npm install
$
socket.ioをインストールします。
$ npm install socket.io
socket.io@0.8.7 ./node_modules/socket.io
├── policyfile@0.0.4
├── redis@0.6.7
└── socket.io-client@0.8.7
$
Twitter-Nodeの最新版をgithubから取得します。
$ cd node_modules
$ git clone git://github.com/technoweenie/twitter-node.git
$
以上で環境が整いました。
app.jsを編集します。ツイッターのアカウントとパスワードを用意しましょう。
/**
* Module dependencies.
*/
var express = require('express')
, app = express.createServer()
, routes = require('./routes')
, io = require('socket.io').listen(app)
, util = require('util')
, TwitterNode = require('twitter-node').TwitterNode
;
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(require('stylus').middleware({ src: __dirname + '/public' }));
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// Routes
app.get('/', routes.index);
app.listen(3000);
io.sockets.on('connection', function(socket) {
var twitter = new TwitterNode({
port: 443,
user: 'ツイッターのアカウント',
password: 'パスワード',
track: ['AKB']
});
twitter.addListener('tweet', function(tweet) {
socket.emit('message',tweet.text);
}).stream();
});
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
views/index.jadeを編集します。
#tweets
全部消して一行だけにします。
views/layout.jadeを編集します。
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js')
script(type='text/javascript', src='/socket.io/socket.io.js')
script(type='text/javascript')
$(document).ready(function(){
var socket = io.connect();
socket.on('connect', function(){
socket.on('message', function(data){
$('<div/>')
.css({
'margin':'4px'
,'padding':'4px'
,'background-color':'#eee'
,'border-radius':'4px'
})
.text(data)
.prependTo($('#tweets'))
// 古い方から消す
if($('#tweets').children().length>100){
console.log('remove');
$('#tweets div:last').remove();
}
});
});
});
body!= body
実行してみましょう。
$ node app.js
info - socket.io started
The "sys" module is now called "util". It should have a similar interface.
Express server listening on port 3000 in development mode
ブラウザからhttp://localhost:3000/ にアクセスすると、、、
debug - served static content /socket.io.js
debug - client authorized
info - handshake authorized 15161463341759372366
debug - setting request GET /socket.io/1/websocket/15161463341759372366
debug - set heartbeat interval for client 15161463341759372366
debug - client authorized for
debug - websocket writing 1::
（この辺にツイートがたくさん）
コンソールがすごい勢いで流れます。
ブラウザもすごい勢いで流れます。
眺めます。
ほう、春の選抜でカチューシャなのか。おい。
眺めます。
ほう、春の選抜でカチューシャなのか。おい。
