目的
由于經常會閱讀關于C++的博客，譬如Meeting C++!的blogroll、 reddit的r/cpp等，面對很多信息來源，每天去對應站點讀新博客是比較麻煩的事情，試過一些RSS閱讀器，不太會用......那就自己動手制作一個吧。
思路
- 獲取博客主頁內容
- 取出文章標題及URL
- 移除舊文章
- 生成新文章列表
- 提示用戶閱讀
開發環境準備
起步
我們將建立一個命令行程序，在對應路徑建立myreader目錄，進入目錄輸入：
npm init
根據提示信息輸入對應內容，生成package.json結果如下：
{
"name": "myreader",
"version": "0.0.1",
"description": "simple RSS-like reader",
"main": "./bin/AppEntry.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"blog",
"rss",
"reader"
],
"author": "liff.engineer@gmail.com",
"license": "ISC"
}
在這里我將應用程序入口指定為./bin/AppEntry.js，測試內容如下：
#!/usr/bin/env node
console.log("我的RSS閱讀器");
注意在Node.js的命令行程序，可執行程序第一行要這樣寫才能正確執行。
然后在myreader目錄執行：
起步測試
npm link命令相當于注冊了myreader，之后就可以使用myreader來執行AppEntry.js了。
獲取博客主頁內容
使用request來獲取博客主頁內容，測試的博客為Fluent{C++}:
安裝request庫
npm install --save request
修改AppEntry.js
#!/usr/bin/env node
var request = require('request');
var domain = "http://www.fluentcpp.com/";
request(domain,function(error,response,body){
if(error){
console.log(error);
}
if(response.statusCode != 200){
console.log(response);
}
console.log(body);
});
運行myreader：
myreader > index.html
即可得到博客主頁的內容。
取出文章的標題和URL
規律分析
打開Fluent{C++}，使用Chrome的檢查打開分析界面：
fluentcpp
可以看到所有的文章都是用<article>...</article>包裹起來的，而文章的標題和URL存放在<a href="URL">標題</a>中，上一級為<h2 class="entry-title">...</h2>。
那么，我們可以取出所有的article，然后查找內容的class為entry-title的元素，然后再取出其中的a拿到標題和href屬性。
如何實現
使用cheerio來對網頁進行處理，cheerio可以采用jQuery的方式對HTML進行操作：
npm install --save cheerio
#!/usr/bin/env node
var request = require('request');
var cheerio = require('cheerio');
var domain = "http://www.fluentcpp.com/";
request(domain,function(error,response,body){
if(error){
console.log(error);
}
if(response.statusCode != 200){
console.log(response);
}
var $ = cheerio.load(body);
$('article').each(function(i,e){
var entry = $(e).find('.entry-title').find('a');
var article = {
title:entry.text(),
url:entry.attr('href')
};
console.log(article);
});
});
運行myreader結果如下：
獲取文章的標題和URL
封裝成為Fetch.js
通過之前的方式,就可以獲取博客主頁上的文章信息了，將其封裝成為Fetch.js。
博客的內容大致如此，都是獲取文章列表，然后定位到標題，即可取出想要的信息，那么對于特定的博客主頁，輸入的信息為：
{
domain: 博客主頁
articleFilter: 文章過濾
urlFilter: 標題過濾
}
Fetch.js實現如下：
var request = require('request');
var cheerio = require('cheerio');
function fetchArticles(input,callback){
request(input.domain,function(error,response,body){
if(error){
console.log(error);
}
if(response.statusCode != 200){
console.log(response);
}
var articles = [];
var $ = cheerio.load(body);
var urlFilters = input.urlFilter.split(" ");
$(input.articleFilter).each(function(i,e){
var entry = $(e);
urlFilters.forEach(function(item,index,array){
if(item)
entry = entry.find(item);
});
entry = entry.find('a');
var article = {
title:entry.text(),
url:entry.attr('href')
};
articles.push(article);
});
callback(articles);
});
};
exports.fetchArticles = fetchArticles;
此時的AppEntry.js為：
#!/usr/bin/env node
var fetch = require("./Fetch.js");
var input = {
domain:"http://www.fluentcpp.com/",
articleFilter:"article",
urlFilter:".entry-title"
};
fetch.fetchArticles(input,function(articles){
console.log(articles);
});
移除舊文章
最簡單的實現就是記錄每次獲取到的博客站點最新的文章URL，當獲取到文章列表數組時進行遍歷，一旦碰到上一次的URL，則后續的文章都是舊文章。
簡單起見，采用直接保存JSON對象的方式處理：
var jsonfile = require('jsonfile');
//讀取JSON文件
function loadJSONFile(file){
if(!fs.existsSync(file))
return {};
return jsonfile.readFileSync(file);
};
//保存JSON文件
function saveJSONFile(file,json){
jsonfile.writeFileSync(file,json,{spaces:4});
};
對于結果的操作實現如下：
const fs = require('fs');
const path = require('path');
function result(location){
return {
lastFile:path.join(location,"./last.json"),//最新的文章文件位置
lastArticles:function(){
return loadJSONFile(this.lastFile);
},
lastArticle:function(domain){//查詢某博客最新的文章
var vals = this.lastArticles();
if(!vals.hasOwnProperty(domain))
return "";
return vals[domain];
},
updateLastArticle:function(domain,url){//更新某博客最新的文章
var vals = this.lastArticles();
vals[domain] = url;
saveJSONFile(this.lastFile,vals);
return vals;
},
updateLastArticles:function(articles){//更新最新的文章
var vals = this.lastArticles();
articles.forEach(function(article,index,array){
vals[article.domain] = article.url;
});
saveJSONFile(this.lastFile,vals);
return vals;
}
}
};
移除舊文章操作實現如下：
//過濾掉舊文章
function removeOldArticles(last,articles){
var results = [];
articles.every(function(article,idx){
if(article.url === last)
return false;
results.push(article);
return true;
});
return results;
};
多博客站點設置
對于每個博客站點，只需要保存相應信息到配置，然后即可使用Fetch.js訪問并得到文章列表，設置操作實現如下：
//配置文件的操作
function setting(location){
return {
file:path.join(location,'./setting.json'),
inputs:function(){ //獲取博客源列表
var set = loadJSONFile(this.file);
if(set.hasOwnProperty('inputs'))
return set.inputs;
return {};
},
append:function(input){//追加新博客源
var result = loadJSONFile(this.file);
if(!result.hasOwnProperty('inputs'))
result.inputs = new Map();
result.inputs[input.domain] = input;
saveJSONFile(this.file,result);
return result.inputs;
}
}
};
整合操作
將設置、獲取、移除舊文章操作進行整合后的AppEntry.js:
#!/usr/bin/env node
const path = require('path');
var result = require('../src/Result.js').result(__dirname);
var setting = require('../src/Setting.js').setting(__dirname);
var fetch = require('../src/Fetch.js');
var action = require('../src/action.js');//removeOldArticles在此實現
console.log('配置文件位于:'+setting.file);
var inputs = setting.inputs();
var results = [];
Object.keys(inputs).forEach(function(domain){
fetch.fetchArticles(inputs[domain],function(articles){
//得到文章列表并移除舊文章
var vals = action.removeOldArticles(result.lastArticle(domain),articles);
results.push({domain,results:vals});
if(results.length === Object.keys(inputs).length){//當所有博客源都遍歷完成
console.log(results);//輸出結果
}
});
});
通知用戶
當獲取到所有的新文章之后，需要告知用戶有新文章可讀及其入口，簡單起見將新文章列表生成為HTML，然后彈出系統通知，當用戶點擊時打開該HTML頁面。
生成HTML
function writeAsHTMLFile(file,articles){
var content = '<div class="articles">\n';
articles.forEach(function(item,index,array){
item.results.forEach(function(article,idx,obj){
content+='<article>\n';
content+='<a href="'+article.url+'">'+article.title+'</a>\n';
content+='</article>\n';
});
});
content+='</div>\n';
fs.writeFileSync(file,content);
};
彈出通知
這里使用node-notifier來彈出系統通知：
const notifier = require('node-notifier');
const path = require('path');
function fireNotify(NotifyInput){
notifier.notify({
title:NotifyInput.title,
message:NotifyInput.message,
icon:path.join(__dirname,NotifyInput.icon),
sound:true,
wait:true
});
notifier.on('click',NotifyInput.onClick? NotifyInput.onClick:function(object,options){});
notifier.on('timeout',NotifyInput.onTimeout? NotifyInput.onTimeout:function(object,options){});
};
打開HTML頁面
使用open：
var open = require('open');
function notifyNewArticles(number,location){
fireNotify({
title:"新文章可讀",
message:'有'+(number+1)+"篇新文章可讀,點擊查看.",
icon:'invalid.png',
onClick:function(object,option){
open("file:///"+location);
}
});
};
處理結果
當獲取了每個博客站點的新文章列表后，還需要處理一下結果，然后用來刷新"最新的文章URL"，實現如下：
function mergeArticles(articles){
var last = [];
var number = 0;
articles.forEach(function(item,index,array){
if(item.results.length >0){
last.push({
domain:item.domain,
url:item.results[0].url
});
number+=item.results.length;
}
});
return {
number:number, //新文章個數
last:last //每個站點最新的文章URL
};
};
流程整合
將原先的單純輸出結果到命令行替換成寫入到HTML頁面，并通知用戶，點擊打開頁面：
if(results.length === Object.keys(inputs).length){
var val = action.mergeArticles(results);//處理結果
if(val.number > 0){
result.updateLastArticles(val.last);//刷新最新的文章URL
var location = path.join(__dirname,'./result.html');
writer.writeAsHTMLFile(location,results);//寫入到HTML文件
notifier.notifyNewArticles(val.number,location);//通知新文章可讀
}
}
運行效果
新文章通知
打開后的界面
