Node.js + Socket.io + StreamingAPIでツイートを取得してWebサイトにリアルタイム描画する #JavaScript

先日に書いた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イベントとデータ取得 -> [クライアント]描画という流れでリアルタイムにツイートを扱うことが出来ました。