26042012 coffeescript Node.js
now.js楽ちんですね。
twitter-streamとnow.jsを使ってリアルタイムにtweetを拾ってブラウザに表示したくなったのでやってみた。コード書いてる時に丁度スケットダンスが放映されていたたみたいで、twitterのトレンドに表示されてたのでこれを拾ってみた。
ちなみにジャンプは毎週読んでるけどスケットダンスはほとんど見ないのでついていけてませんな。
スケルトン作成
とりあえずいつものようにコマンドを打って、スケルトンを作成
express twnow
cd twnow
package.jsonを修正して
{ "name": "application-name" , "version": "0.0.1" , "private": true , "dependencies": { "express": "2.5.8" , "jade": ">= 0.25.0" , "ntwitter": ">= 0.3.0" , "now": ">= 0.8.1" } }
依存モジュールをインストールする
npm install -d
コード
あとはコードを描く
app.coffee
twitter = require("ntwitter") express = require("express") routes = require("./routes") nowjs = require("now") twit = new twitter( consumer_key: "####" consumer_secret: "####" access_token_key: "####" access_token_secret: "###" ) app = module.exports = express.createServer() app.configure -> app.set "views", __dirname + "/views" app.set "view engine", "jade" app.use express.bodyParser() app.use express.methodOverride() app.use express.cookieParser() app.use express.session(secret: "tweetandsweet") app.use app.router app.use express.static(__dirname + "/public") app.configure "development", -> app.use express.errorHandler( dumpExceptions: true showStack: true ) app.configure "production", -> app.use express.errorHandler() everyone = nowjs.initialize(app) app.get "/", (req, res) -> console.log req.session.user_profile res.render "index", title: "twitter streaming and now.js" twit.stream( 'statuses/filter' {track:['#sketdance']} (stream) -> stream.on 'data', (data) -> everyone.now.receiveMessage data console.log data ) app.listen 3000 console.log( "Express server listening on port %d in %s mode" app.address().port app.settings.env )
style.css
body { padding: 50px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } a { color: #00B7FF; } li.tweet { list-style-type:none; width: 500px; } img.tweet { float: left; padding-right: 20px; } hr { width: 500px; clear: left; border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); }
layout.jade
!!! 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(src="/nowjs/now.js") body!= body
index.jade
h1= title p sample apps ul#messages script $(document).ready(function() { now.receiveMessage = function(data) { $("#messages").prepend( '<li class="tweet"><img class="tweet" src=\"' + data.user.profile_image_url +'\">'+ data.text + '<hr></li>'); } });
now.jsは抽象度が上がりすぎてて、裏で何が行われているかよく理解できないんだが、使うぶんには簡単ですね。IE7対策をしなくてもとりあえず動くので、それもお気に入りポイント(企業のブラウザはIEでしかも古いからねー)