blog

  • Home
  • blog
  • Visualizing a Twitter Stream in VR with Three.js and Node

Visualizing a Twitter Stream in VR with Three.js and Node

Twitter is a wonderful and information rich beast. I wanted to combine some of the powers of visualization, Three.js and its VR capabilities with Socket.IO and Node to create a pretty world of particles generated via a Twitter stream.

I’ve previously discussed all the basics of developing virtual reality web experiences in the SitePoint article Bringing VR to the Web with Google Cardboard and Three.js, so if you are new to this whole idea – read that one first and come back. This demo uses the same foundations.

The demo we will be building will watch a live Twitter stream for a keyword. When one is tweeted out whilst it is watching the stream, it will bring up a “tower” of shining particles that represent how long the tweet was. This demo in particular will look for mentions of the word “pizza”. Why pizza you ask? I was looking for a term which was not mentioned as frequently as “bieber” but more frequently than “boxcar racing hyenas”. In short, the best terms are ones which are relatively frequent enough that they’ll appear whilst you are watching, but not so frequent that they come through at many hundreds a second. Pizza is one of them.

Demo Code

If you’re keen to get straight into the code and try it out, you can find it here on GitHub.

Want to try it in action? I’ve got a running version hosted here: VR Twitter World.

Our Server Code

We’ll begin by looking at our Node server code. It will display our flat HTML and also operate as a Socket.IO server that’ll pull in a stream of data from Twitter.

The full server is relatively short and looks like so:

[code language=”js”]
var express = require(‘express’),
app = express(),
server = require(‘http’).createServer(app),
port = process.env.PORT || 80,
io = require(‘socket.io’)(server),
config = require(‘./config.json’),
Twitter = require(‘node-tweet-stream’),
t = new Twitter(config);

app.get(‘/’, function(request, response) {
response.sendFile(__dirname + ‘/public/index.html’);
});

app.get(/^(.+)$/, function(req, res) {
res.sendFile(__dirname + ‘/public/’ + req.params[0]);
});

app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500).send(‘Something broke!’);
});

server.listen(port, function() {
console.log(‘Listening on ‘ + port);
});

t.track(‘pizza’);
t.on(‘tweet’, function(tweet){
console.log(‘Roger that. Tweets incoming!’);
console.log(tweet);

io.emit(‘tweet’, tweet);
});

t.on(‘error’, function (err) {
console.log(‘Brace yourself! We are goin doooowwwwwwnnnnnnnn! ‘, err);
});
[/code]

Our first lines set up a server using the Node Express framework. It’s a rather simple set up that is pulling in all our dependencies and preparing the app variable for us to access our server functionality. port sets up which port we want our server to run on (process.env.PORT is a server variable some hosting set ups like Heroku will have defined).

[code language=”js”]
var express = require(‘express’),
app = express(),
server = require(‘http’).createServer(app),
port = process.env.PORT || 80,
[/code]

Then we set up the io variable whilst simultaneously starting up our Socket.IO server functionality, attaching it to the Express server we set up above:

[code language=”js”]
io = require(‘socket.io’)(server),
[/code]

Setting Up Twitter Access

The config variable is a nice way of keeping the application’s Twitter authentication keys and access tokens in their own file. In order to live view the Twitter stream, we will be using an npm module called node-tweet-stream which provides all the functions we will need. We assign the object for our Twitter access and all associated functions to the t variable, passing in our config JSON to prove we’re allowed to access it.

[code language=”js”]
config = require(‘./config.json’),
Twitter = require(‘node-tweet-stream’),
t = new Twitter(config),
[/code]

If you don’t have any Twitter keys for access to the Twitter API, never fear! You just need to register an app with Twitter. Head to the Twitter Application Management page, log in with your Twitter credentials and then click “Create New App”.

Once you have an app, you can get your keys and access tokens by clicking the “Keys and Access Tokens” link that will appear on your app’s management page. If you can’t find it, it will be at the URL of: https://apps.twitter.com/app/0000000/keys (replacing 0000000 with your app’s ID).

Then, create a file on the same level as index.html called config.json. Within it, add the following with your own app’s values:

[code language=”js”]
{
“consumer_key”: “YOURKEY”,
“consumer_secret”: “YOURKEYSECRET”,
“token”: “YOURTOKEN”,
“token_secret”: “YOURTOKENSECRET”
}
[/code]

Other Server Basics

Further along in our index.js file, we set up calls to the root of our server to load /public/index.html:

[code language=”js”]
app.get(‘/’, function(request, response) {
response.sendFile(__dirname + ‘/public/index.html’);
});
[/code]

We also have it serve up any other static files within the public directory on our server:

[code language=”js”]
app.get(/^(.+)$/, function(req, res) {
res.sendFile(__dirname + ‘/public/’ + req.params[0]);
});
[/code]

If we do have an error, we log that error in our server’s console and return a 500 error:

[code language=”js”]
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500).send(‘Something broke!’);
});
[/code]

The following lines start our server running with all the settings above.

[code language=”js”]
server.listen(port, function() {
console.log(‘Listening on ‘ + port);
});
[/code]

Continue reading %Visualizing a Twitter Stream in VR with Three.js and Node%

LEAVE A REPLY