add twitter stream #9

Gemfile

@@ -5,9 +5,11 @@ gem 'sass'
 gem 'coffee-script'
 gem 'thin'
 gem 'pusher'
-gem "tweetstream"
+gem "tweetstream", "1.1.3"
+# TODO: at 1.1.4 raise error "undefined method `default_engine' for MultiJson:Module"
 gem "clockwork"
 gem "yajl-ruby"
+gem "rake"
 
 group :development do
   gem 'heroku'

Gemfile.lock

@@ -8,15 +8,15 @@ GEM
     coffee-script (2.2.0)
       coffee-script-source
       execjs
-    coffee-script-source (1.2.0)
+    coffee-script-source (1.3.1)
     daemons (1.1.8)
     diff-lcs (1.1.3)
     eventmachine (0.12.10)
     execjs (1.3.0)
       multi_json (~> 1.0)
     foreman (0.41.0)
       thor (>= 0.13.6)
-    heroku (2.24.0)
+    heroku (2.24.1)
       launchy (>= 0.3.2)
       netrc (~> 0.7.1)
       rest-client (~> 1.6.1)
@@ -26,7 +26,7 @@ GEM
       addressable (~> 2.2.6)
     libv8 (3.3.10.4)
     mime-types (1.18)
-    multi_json (1.2.0)
+    multi_json (1.0.4)
     netrc (0.7.1)
     newrelic_rpm (3.3.3)
     pusher (0.9.2)
@@ -38,6 +38,7 @@ GEM
       rack
     rack-test (0.6.1)
       rack (>= 1.0)
+    rake (0.9.2.2)
     rest-client (1.6.7)
       mime-types (>= 1.16)
     rspec (2.9.0)
@@ -49,7 +50,7 @@ GEM
       diff-lcs (~> 1.1.3)
     rspec-mocks (2.9.0)
     ruby-hmac (0.4.0)
-    rubyzip (0.9.6.1)
+    rubyzip (0.9.7)
     sass (3.1.15)
     signature (0.1.2)
       ruby-hmac
@@ -73,15 +74,15 @@ GEM
       rack (>= 1.0.0)
     thor (0.14.6)
     tilt (1.3.3)
-    tweetstream (1.1.4)
-      daemons (~> 1.1)
-      multi_json (>= 1.0)
-      twitter-stream (= 0.1.14)
-    twitter-stream (0.1.14)
+    tweetstream (1.1.3)
+      daemons (~> 1.1.4)
+      multi_json (~> 1.0.3)
+      twitter-stream (~> 0.1.14)
+    twitter-stream (0.1.15)
       eventmachine (>= 0.12.8)
       http_parser.rb (~> 0.5.1)
       simple_oauth (~> 0.1.4)
-    tzinfo (0.3.32)
+    tzinfo (0.3.33)
     yajl-ruby (1.1.0)
 
 PLATFORMS
@@ -96,11 +97,12 @@ DEPENDENCIES
   newrelic_rpm
   pusher
   rack-test
+  rake
   rspec
   sass
   sinatra
   sinatra-contrib
   therubyracer
   thin
-  tweetstream
+  tweetstream (= 1.1.3)
   yajl-ruby

Procfile

@@ -1 +1,3 @@
 web: bundle exec thin -p $PORT -e $RACK_ENV start
+worker: bundle exec rake jobs:work
+

README.rdoc

@@ -12,6 +12,14 @@
  NEW_RELIC_ID=xxxx
  NEW_RELIC_LICENSE_KEY=xxxx
  NEW_RELIC_LOG=stdout
+ TWITTER_CONSUMER_KEY=xxxx
+ TWITTER_CONSUMER_SECRET=xxxx
+ TWITTER_OAUTH_TOKEN=xxxx
+ TWITTER_OAUTH_TOKEN_SECRET=xxxx
+ TWITTER_KEYWORD=xxxx
+ PUSHER_APP_ID=xxxx
+ PUSHER_KEY=xxxx
+ PUSHER_SECRET=xxxx
  PATH=bin:vendor/bundle/ruby/1.9.1/bin:/usr/local/bin:/usr/bin:/bin
  PUSHER_SOCKET_URL=xxxx
  PUSHER_URL=xxxx

Rakefile

@@ -23,6 +23,12 @@ TweetStream.configure do |config|
   config.parser   = :yajl
 end
 
+if ENV["RACK_ENV"] == "development"
+  Pusher.app_id = ENV["PUSHER_APP_ID"]
+  Pusher.key = ENV["PUSHER_KEY"]
+  Pusher.secret = ENV["PUSHER_SECRET"]
+end
+
 task "jobs:work" do
   Pusher['tweets'].trigger('title', ENV["TWITTER_KEYWORD"])
   TweetStream::Client.new.track(ENV["TWITTER_KEYWORD"]) do |status|

views/application.scss

@@ -15,4 +15,8 @@ body {
     left: 50%;
     margin: -100px auto auto -200px;
   }
+  ul#tweets {
+    position: relative;
+    z-index: 1;
+  }
 }

views/index.erb

@@ -14,3 +14,5 @@
   </li>
 </ul>
 <img id="title" src="/images/cooljapan.png" alt="cooljapan" width="400" height="200" />
+<h1>Tweets containing <%= ENV['TWITTER_KEYWORD'] %> </h1>
+<ul id="tweets"></ul>

views/layout.erb

@@ -18,6 +18,7 @@
   <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
   <script type="text/javascript" src="/fancybox1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
   <script type="text/javascript" src="/js/application.js"></script>
+  <script type="text/javascript" src="http://js.pusherapp.com/1.8/pusher.min.js"></script>
   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
   <script type="text/javascript">
     (function() {
@@ -39,6 +40,29 @@
   })();
 
   </script>
+  <script>
+    $(window).ready(function() {
+      var pusher = new Pusher('<%= ENV["PUSHER_KEY"] %>');
+      var channel = pusher.subscribe('tweets');
+
+      channel.bind('tweet', function(tweet) {
+        var template = $('#tweet-template').html()
+          .replace('{{PROFILE_IMAGE}}', tweet.user.profile_image_url)
+          .replace('{{TEXT}}', tweet.text);
+        $('#tweets').prepend(template);
+      });
+      channel.bind('title', function(title) {
+        //alert(title);
+        $('h1').html("Tweets about " + title);
+      });
+    });
+  </script>
+  <script id="tweet-template" type="text/html">
+    <li class="tweet">
+      <img width="48" height="48" src="{{PROFILE_IMAGE}}"/>
+      {{TEXT}}
+    </li>
+  </script>
 </head>
 <body>
 <%= yield %>