先日に書いたTwitter Streaming API + Node.js (ntwitter)で指定キーワードのツイートを取得するをWebサイト側に表示させてみます。
##準備
socket.ioを使います。
$ npm i socket.io
ソースコードはNode.js + Socket.IO + jQuery で最小構成チャットをもとにしています。
###サーバー側
twstream.js
var util = require('util');
var twitter = require('twitter');
var twit = new twitter({
consumer_key: 'xx',
consumer_secret: 'xx',
access_token_key: 'xx',
access_token_secret: 'xx'
});
var keyword = process.argv[2]; //第一引数
var option = {'track': keyword};
console.log(keyword+'を含むツイートを取得します。');
var fs = require('fs');
var app = require('http').createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(fs.readFileSync('index.html'));
}).listen(3000);
var io = require('socket.io').listen(app);
io.sockets.on('connection', function(socket) {
socket.on('msg', function(data) {
io.sockets.emit('msg', data);
});
});
twit.stream('statuses/filter', option, function(stream) {
stream.on('data', function (data) {
io.sockets.emit('msg', data.text);
console.log(data);
});
});
###フロント側
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>chat</title>
<script src="/socket.io/socket.io.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var socket = io.connect();
$('form').submit(function() {
socket.emit('msg', $('input').val());
$('input').val('');
return false;
});
socket.on('msg', function(data) {
console.log(data);
$('div').prepend(data + '<br>');
});
});
</script>
<form><input></form><div></div>
##使い方
起動する際に引数に検索ワードを入れて起動します。
$ node twstream 検索するワード
$ node twstream twitter
ligincを含むツイートを取得します。
/*しばらく待ちます...*/
{ created_at: 'Wed Nov 26 03:37:50 +0000 2014',
id: 537450127229997060,
id_str: '537450127229997056',
text: 'RT @BestYahooAnswer: What are the symptoms of homosexuality http://t.co/FRRQySyx7c',
source: '<a href="http://twitter.com/download/iphone" rel="nofollow">Twitter for iPhone</a>',
truncated: false,
in_reply_to_status_id: null,
in_reply_to_status_id_str: null,
in_reply_to_user_id: null,
in_reply_to_user_id_str: null,
in_reply_to_screen_name: null,
user:
{ id: 1906062012,
id_str: '1906062012',
name: 'master debator',
screen_name: 'patrickstump420',
location: 'ig: bitchtml',
url: 'http://kamisthebomb.com',
description: 'hi im lulu & im scared of straight people',
protected: false,
http://localhost:3000にアクセスしてみましょう。
こんな感じで[サーバー]Streamingで取得 -> [サーバー]Socket.ioでemit! -> [クライアント]Socketイベントとデータ取得 -> [クライアント]描画という流れでリアルタイムにツイートを扱うことが出来ました。