「node.jsでTwitter Streaming APIを利用する方法」の続きです。
Streaming APIを使ってサーバで受信したつぶやきをブラウザにプッシュするには、Socket.IOを使うのが簡単です。
準備
必要なパッケージをインストールします。
npm install socket.io express ntwitter
サーバ側
Streaming APIで取得したツイートの情報を、次のようなJavaScriptコード(server.jsとします)でクライアントにプッシュします。consumer_key
とconsumer_secret
、access_token_key
、access_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上にリアルタイムに表示する方法