socket.ioでAKB48のツイートを眺めるアプリをつくる

socket.ioはサーバーとクライアント間でソケット通信できるパッケージです。個人的にはHTML5、Nodeで最もアツい技術かと思います。

このsocket.ioとTwitter Streaming APIを組み合わせてAKB48さんのワードが入ったツイートを眺めるアプリを作ってみます。

システム構成

• Node 0.6.7
• socket.io 0.8.7
• express 2.5.5
• Twitter-Node（SSL対応版）

HTMLテンプレートはjadeです。

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::
（この辺にツイートがたくさん）

コンソールがすごい勢いで流れます。

ブラウザもすごい勢いで流れます。

眺めます。
ほう、春の選抜でカチューシャなのか。おい。