Limit number of data streamed to a webpage with node.jsand socket.io

Question

Limit number of data streamed to a webpage with node.jsand socket.io

I'm currently working on a streaming app using Node.js and SOcket.io. For the moment the app works perfectly but I need to do one thing: Since it's a streaming app there is to much data push to the client, so I only want to display the 10 most recent object pushed by the server. How can I do that ? Should I do that on the client code or directly on the server ? I really have no idea.

Here's the code of the client

<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>

    var socket = io.connect('http://192.168.1.29:5000');
    socket.on('stream', function(tweet){
    $('#tweetd').append(tweet+'<br>');
    });
</script>
<div id="tweetd"></div>
</div>

Server code :

 var express = require('express')
       , app = express()
      , http = require('http')
    , server = http.createServer(app)
      ,Twit = require('twit')
       , io = require('socket.io').listen(server);

  server.listen(8080);

  // routing
  app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
  });

  var watchList = ['love', 'hate'];
  var T = new Twit({
   consumer_key:         ''
 , consumer_secret:      ''
   ,  access_token:         ''
  , access_token_secret: ''  
 });
 io.sockets.on('connection', function (socket) {
  console.log('Connected');



  T.stream('statuses/filter', { track: watchList },function (stream) {

  stream.on('tweet', function (tweet) {

        io.sockets.emit('stream',tweet.text);
        console.log(tweet.text);

  });
 });
});

Hope you can help me !

node.js
streaming
client
socket.io

Answer 1

You should do that on the server. Saves bandwidth and time.

If you have a list of objects to send back, simply slice the list before you send it via socket.io.

tweets = tweets.slice(tweets.length-10);

Now send your tweets via socket.io and you'll only get the last 10 in the list.

Or if you list is in reverse order:

tweets = tweets.slice(0,10);

Answer 2

You have to pipe your tweets in an array and than send the limited array.

Answer 3

I think I just found a solution. Here's the code :

<script>

          var tweetNum = 0;
          var socket = io.connect('/');
          socket.on('stream', function(tweet){
          $('<div id="tweet' + tweetNum + '" class="tweet ' + (((tweetNum++)%2) ? 'odd' : 'even') + '">' +
          '<div class="tw_txt">' + tweet.text + '</div>' +'</div>').prependTo('#tweetd');

          if (tweetNum >= 11) {
            $('#tweet' + (tweetNum - 11)).remove();
          }
        });
  </script>

It may not be the most elegant way but it works