Adding RSS to your Node.js app with Primus and Feedparser
YLD
26 Mar
2014
3
Min.
No items found.
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);
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>
.png)
.png){kind=small}
