Display streaming twitter on a web page using socket.io/node.js

Question

I am trying to create a Twitter streaming web application using node.js socket.io and twit.

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']; io.sockets.on('connection', function (socket) { console.log('Connected'); var T = new Twit({ consumer_key: '' , consumer_secret: '' , access_token: '' , access_token_secret: '' }) T.stream('statuses/filter', { track: watchList },function (stream) { stream.on('tweet', function (tweet) { io.sockets.emit('stream',tweet.text); console.log(tweet.text); }); }); }); 

Here is my client side

  <script src="/socket.io/socket.io.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script> $(function(){ var socket = io.connect('http://localhost:8080'); socket.on('tweet', function(tweet) { $( '<div class="tweet">' + tweet.text + '</div>'); }); }); </script> </div> 

When I run node app.js and try to connect to localhost: 8080, I just get a blank page even if everything (soket.io, jquery, ...) seems to load correctly.

Here is a sample server output file:

 info - socket.io started debug - served static content /socket.io.js debug - client authorized info - handshake authorized pwH0dbx4WvBhzSQXihpu debug - setting request GET /socket.io/1/websocket/pwH0dbx4WvBhzSQXihpu debug - set heartbeat interval for client pwH0dbx4WvBhzSQXihpu debug - client authorized for debug - websocket writing 1:: debug - websocket writing 5:::{"name":"stream","args":["RT @mintycreative: Great to chat today RT @SharonHolistic: Treatments available tomorrow http://t.co/5Poq3KU08u Book yours now #WestMidsHou…"]} 

debug - websocket writing 5: {"name": "stream", "args": ["RT @laurenpeikoff: #BREAKING @ScottsdalePD confirms that the police are investigating Michael Beasley for alleged sexual assault. @ 12News @azcentr ..."]}

I hope you can help me fix my mistakes.

Answer 1

Problem resolved

Here is the error-free code: (server side)

 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'); var stream = T.stream('statuses/filter', { track: watchList }) stream.on('tweet', function (tweet) { io.sockets.emit('stream',tweet.text); }); }); }); 

(client side)

  <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://localhost:8080'); socket.on('stream', function(tweet){ $('#tweetd').append(tweet+'<br>'); }); </script> <div id="tweetd"></div> </div> 

Answer 2

The first problem is that you create a new Twitter listener every time a socket connection is opened. You must move this outside of the connection event. This is probably not perfect. I'm not sure how the twitter module handles this internally, but it probably actually creates a new connection to their API every time a websocket connects.

On the client side, you jQuery can beat a bit. If you just want to add twitter to the page every time a tweet appears, add a new tweet to the body element with $('body').append()

See this index for reference.