Add RSS to a Node.js app with Primus and feedparser

by YLD • March 26th, 2014 • 1min

Serving a static website in Node.js is simple:

mkdir wtfjs  
npm init  
mkdir public  
touch public/index.html  
touch index.js

Install the node-static dependency

npm install node-static --save

If you want to use the npm start command you need to replace the script property in your package.json file with {“scripts”: {“start”: “node index.js”} }

Using your favorite text editor add the following code to index.js

var static = require('node-static');  
var http = require('http');  
  
var file = new static.Server('./public');  
  
var server = http.createServer(function (request, response) {  
  request.addListener('end', function () {  
    file.serve(request, response);  
  }).resume();  
}).listen(8082);  
  
console.log(8082);

And a simple index.html

<html>  
<script>  
</script>  
<ul>  
<li>One</li>  
<li>Two</li>  
<li>Three</li>  
</ul>  
</html>

See your website:

node index.js

open [http://localhost:8082](http://localhost:8082)

We want to replace <li> items with the last three blog posts from the YLD! blog.

We will use node-feedparser to parse the rss feed and primus to establish a websocket connection to our static page and send the items when they are available. On the static page we will then receive that and change the <li> to the last three blog post titles from the feed. Easy?

mkdir public/js  
npm install primus feedparser request ws --save

Probably better to divide the work into chunks. Let’s start by just sending some information to the static page and using console.log on the html page to display that information in the developer tools screen.

var static = require('node-static');  
var Primus = require('primus');  
var http = require('http');  
  
var file = new static.Server('./public');  
  
var server = http.createServer(function (request, response) {  
  request.addListener('end', function () {  
    file.serve(request, response);  
  }).resume();  
}).listen(process.env.PORT || 8082);  
  
var primus = new Primus(server, { parser: 'JSON' });  
  
primus.on('connection', function connection(spark) {  
  primus.write('Spark: ' + spark.id + ' connected');  
});  
  
// save the client side primus code so its available  
// to the html page  
primus.save(\_\_dirname + '/public/js/primus.js');  
  
console.log(process.env.PORT || 8082);

Then change index.html according to the following

<html>  
<script src="/js/primus.js"></script>  
<script>  
(function () {  
  var primus = new Primus();  
  
  primus.on('data', function incoming(data) {  
    console.log('data', 'Received data', data);  
  });  
  
})();  
</script>  
<li>One</li>  
<li>Two</li>  
<li>Three</li>  
</html>

You should be able to see the console.log on developer tools (cmd+alt+j).

We don’t want to just send any message to the site. we want to update the <li> to list the three latest posts on the YLD blog. We can use node-feedparser for that

var static = require('node-static');  
var Primus = require('primus');  
var http = require('http');  
var FeedParser = require('feedparser');  
var request = require('request');  
  
var file = new static.Server('./public');  
  
var server = http.createServer(function (request, response) {  
  request.addListener('end', function () {  
    file.serve(request, response);  
  }).resume();  
}).listen(process.env.PORT || 8082);  
  
var primus = new Primus(server, { parser: 'JSON' });  
var onError = function (error) { console.error(error); };  
  
primus.on('connection', function connection(spark) {  
  request('http://blog.yld.io/rss')  
    .on('error', onError)  
    .pipe(new FeedParser())  
    .on('error', onError)  
    .on('readable', function() {  
      var stream = this, item;  
      while (item = stream.read()) {  
        spark.write(item.title);  
      }  
    });  
});  
  
primus.save(\_\_dirname + '/public/js/primus.js');  
  
console.log(process.env.PORT || 8082);

And on our front end code

<html>  
<script src="/js/primus.js"></script>  
<script>  
(function () {  
  var primus = new Primus();  
  
  primus.on('data', function incoming(data) {  
    //  
    // thanks @doodlemoonch  
    // \* https://twitter.com/doodlemoonch   
    //  
    var list = document.querySelectorAll('ul')\[0\];  
    var item = document.createElement('li');  
  
    item.innerText = data;  
  
    list.removeChild(list.querySelectorAll('li:first-child')\[0\]);  
    list.appendChild(item);  
  });  
  
})();  
</script>  
<ul>  
<li>One</li>  
<li>Two</li>  
<li>Three</li>  
</ul>  
</html>

That’s it! :)

Published by Nuno Job on YLD Engineering Blog

Written by YLD • March 26th, 2014

Share this article