【nodeJS爬蟲】前端爬蟲系列


本文轉自  http://www.cnblogs.com/coco1s/p/4954063.html

寫這篇 blog 其實一開始我是拒絕的,因為爬蟲爬的就是cnblog博客園。搞不好編輯看到了就把我的賬號給封了:)。

言歸正傳,前端同學可能向來對爬蟲不是很感冒,覺得爬蟲需要用偏后端的語言,諸如 php , python 等。當然這是在 nodejs 前了,nodejs 的出現,使得 Javascript 也可以用來寫爬蟲了。由於 nodejs 強大的異步特性,讓我們可以輕松以異步高並發去爬取網站,當然這里的輕松指的是 cpu 的開銷。
要讀懂本文,其實只需要有
  • 能看懂 Javascript 及 JQuery

  • 簡單的nodejs基礎

  • http 網絡抓包 和 URL 基礎

本文較長且圖多,但如果能耐下心讀完本文,你會發現,簡單的一個爬蟲實現並不難,並且能從中學到很多東西。

本文中的完整的爬蟲代碼,在我的github上可以下載。主要的邏輯代碼在 server.js 中,建議邊對照代碼邊往下看。

在詳細說爬蟲前,先來簡單看看要達成的最終目標,入口為 http://www.cnblogs.com/ ,博客園文章列表頁每頁有20篇文章,最多可以翻到200頁。我這個爬蟲要做的就是異步並發去爬取這4000篇文章的具體內容,拿到一些我們想要的關鍵數據。

 

   爬蟲流程

看到了最終結果,那么我們接下來看看該如何一步一步通過一個簡單的 nodejs 爬蟲拿到我們想要的數據,首先簡單科普一下爬蟲的流程,要完成一個爬蟲,主要的步驟分為:

抓取

爬蟲爬蟲,最重要的步驟就是如何把想要的頁面抓取回來。並且能兼顧時間效率,能夠並發的同時爬取多個頁面。

同時,要獲取目標內容,需要我們分析頁面結構,因為 ajax 的盛行,許多頁面內容並非是一個url就能請求的的回來的,通常一個頁面的內容是經過多次請求異步生成的。所以這就要求我們能夠利用抓包工具分析頁面結構。

如果深入做下去,你會發現要面對不同的網頁要求,比如有認證的,不同文件格式、編碼處理,各種奇怪的url合規化處理、重復抓取問題、cookies 跟隨問題、多線程多進程抓取、多節點抓取、抓取調度、資源壓縮等一系列問題。

所以第一步就是拉網頁回來,慢慢你會發現各種問題待你優化。

存儲

當把頁面內容抓回來后,一般不會直接分析,而是用一定策略存下來,個人覺得更好的架構應該是把分析和抓取分離,更加松散,每個環節出了問題能夠隔離另外一個環節可能出現的問題,好排查也好更新發布。
那么存文件系統、SQL or NOSQL 數據庫、內存數據庫,如何去存就是這個環節的重點。

分析

對網頁進行文本分析,提取鏈接也好,提取正文也好,總之看你的需求,但是一定要做的就是分析鏈接了。通常分析與存儲會交替進行。可以用你認為最快最優的辦法,比如正則表達式。然后將分析后的結果應用與其他環節。

展示

要是你做了一堆事情,一點展示輸出都沒有,如何展現價值?
所以找到好的展示組件,去show出肌肉也是關鍵。
如果你為了做個站去寫爬蟲,抑或你要分析某個東西的數據,都不要忘了這個環節,更好地把結果展示出來給別人感受。

 

   編寫爬蟲代碼

Step.1 頁面分析

現在我們一步一步來完成我們的爬蟲,目標是爬取博客園第1頁至第200頁內的4000篇文章,獲取其中的作者信息,並保存分析。

共4000篇文章,所以首先我們要獲得這個4000篇文章的入口,然后再異步並發的去請求4000篇文章的內容。但是這個4000篇文章的入口 URL 分布在200個頁面中。所以我們要做的第一步是 從這個200個頁面當中,提取出4000個 URL 。並且是通過異步並發的方式,當收集完4000個 URL 再進行下一步。那么現在我們的目標就很明確了:

 

Step2.獲取4000個文章入口URL

要獲取這么多 URL ,首先還是得從分析單頁面開始,F12 打開 devtools 。很容易發現文章入口鏈接保存在 class 為 titlelnk 的 <a> 標簽中,所以4000個 URL 就需要我們輪詢 200個列表頁 ,將每頁的20個 鏈接保存起來。那么該如何異步並發的從200個頁面去收集這4000個 URL 呢,繼續尋找規律,看看每一頁的列表頁的 URL 結構:

那么,1~200頁的列表頁 URL 應該是這個樣子的:

1
2
3
for ( var  i=1 ; i<= 200 ; i++){
     pageUrls.push( 'http://www.cnblogs.com/#p' +i);
}

有了存放200個文章列表頁的 URL ,再要獲取4000個文章入口就不難了,下面貼出關鍵代碼,一些最基本的nodejs語法(譬如如何搭建一個http服務器)默認大家都已經會了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 一些依賴庫
var  http = require( "http" ),
     url = require( "url" ),
     superagent = require( "superagent" ),
     cheerio = require( "cheerio" ),
     async = require( "async" ),
     eventproxy = require( 'eventproxy' );
 
var  ep =  new  eventproxy(), 
     urlsArray = [],  //存放爬取網址
     pageUrls = [],   //存放收集文章頁面網站
     pageNum = 200;   //要爬取文章的頁數
 
for ( var  i=1 ; i<= 200 ; i++){
     pageUrls.push( 'http://www.cnblogs.com/#p' +i);
}
 
// 主start程序
function  start(){
     function  onRequest(req, res){   
         // 輪詢 所有文章列表頁
         pageUrls.forEach( function (pageUrl){
             superagent.get(pageUrl)
                 .end( function (err,pres){
               // pres.text 里面存儲着請求返回的 html 內容,將它傳給 cheerio.load 之后
               // 就可以得到一個實現了 jquery 接口的變量,我們習慣性地將它命名為 `$`
               // 剩下就都是利用$ 使用 jquery 的語法了
               var  $ = cheerio.load(pres.text);
               var  curPageUrls = $( '.titlelnk' );
 
               for ( var  i = 0 ; i < curPageUrls.length ; i++){
                 var  articleUrl = curPageUrls.eq(i).attr( 'href' );
                 urlsArray.push(articleUrl);
                 // 相當於一個計數器
                 ep.emit( 'BlogArticleHtml' , articleUrl);
               }
             });
         });
 
         ep.after( 'BlogArticleHtml' , pageUrls.length*20 , function (articleUrls){
         // 當所有 'BlogArticleHtml' 事件完成后的回調觸發下面事件
         // ...
         });
     }
     http.createServer(onRequest).listen(3000);
}
exports.start= start;
這里我們用到了三個庫,superagent 、 cheerio 、 eventproxy。
分別簡單介紹一下:

superagent

superagent(http://visionmedia.github.io/superagent/ ) 是個輕量的的 http 方面的庫,是nodejs里一個非常方便的客戶端請求代理模塊,當我們需要進行 get 、 post 、 head 等網絡請求時,嘗試下它吧。

cheerio

cheerio(https://github.com/cheeriojs/cheerio ) 大家可以理解成一個 Node.js 版的 jquery,用來從網頁中以 css selector 取數據,使用方式跟 jquery 一樣一樣的。

eventproxy

eventproxy(https://github.com/JacksonTian/eventproxy ) 非常輕量的工具,但是能夠帶來一種事件式編程的思維變化。

用 js 寫過異步的同學應該都知道,如果你要並發異步獲取兩三個地址的數據,並且要在獲取到數據之后,對這些數據一起進行利用的話,常規的寫法是自己維護一個計數器。

先定義一個 var count = 0,然后每次抓取成功以后,就 count++。如果你是要抓取三個源的數據,由於你根本不知道這些異步操作到底誰先完成,那么每次當抓取成功的時候,就判斷一下count === 3。當值為真時,使用另一個函數繼續完成操作。

而 eventproxy 就起到了這個計數器的作用,它來幫你管理到底這些異步操作是否完成,完成之后,它會自動調用你提供的處理函數,並將抓取到的數據當參數傳過來。

OK,運行一下上面的函數,假設上面的內容我們保存在 server.js 中,而我們有一個這樣的啟動頁面 index.js,

現在我們在回調里增加幾行代碼,打印出結果:

打開node命令行,鍵入指令,在瀏覽器打開 http://localhost:3000/ ,可以看到:

1
node index.js

成功了!我們成功收集到了4000個 URL ,但是我將這個4000個 URL 去重后發現,只有20個 URL 剩下,也就是說我將每個 URL  push 進數組了200次,一定是哪里錯,看到200這個數字,我立馬回頭查看 200 個 文章列表頁。

我發現,當我用 http://www.cnblogs.com/#p1 ~ 200 訪問頁面的時候,返回的都是博客園的首頁。 而真正的列表頁,藏在這個異步請求下面:

看看這個請求的參數:

把請求參數提取出來,我們試一下這個 URL,訪問第15頁列表頁:http://www.cnblogs.com/?CategoryId=808&CategoryType=%22SiteHome%22&ItemListActionName=%22PostList%22&PageIndex=15&ParentCategoryId=0 。

成功了,那么我們稍微修改下上面的代碼:

1
2
3
4
5
6
7
//for(var i=1 ; i<= 200 ; i++){
//  pageUrls.push('http://www.cnblogs.com/#p'+i);
//}
//改為
for ( var  i=1 ; i<= 200 ; i++){
     pageUrls.push( 'http://www.cnblogs.com/?CategoryId=808&CategoryType=%22SiteHome%22&ItemListActionName=%22PostList%22&PageIndex=' + i + '&ParentCategoryId=0' );
}

再試一次,發現這次成功收集到了4000個沒有重復的 URL 。第二步完成!

 

Step.3 爬取具體頁面內容 使用 async 控制異步並發數量 

獲取到4000個 URL ,並且回調入口也有了,接下來我們只需要在回調函數里繼續爬取4000個具體頁面,並收集我們想要的信息就好了。其實剛剛我們已經經歷了第一輪爬蟲爬取,只是有一點做的不好的地方是我們剛剛並沒有限制並發的數量,這也是我發現 cnblog 可以改善的一點,不然很容易被單IP的巨量 URL 請求攻擊到崩潰。為了做一個好公民,也為了減輕網站的壓力(其實為了不被封IP),這4000個URL 我限制了同時並發量最高為5。這里用到了另一個非常強大的庫 async ,讓我們控制並發量變得十分輕松,簡單的介紹如下。

async

async(https://github.com/caolan/async#queueworker-concurrency),async是一個流程控制工具包,提供了直接而強大的異步功能mapLimit(arr, limit, iterator, callback)。

這次我們要介紹的是 async 的 mapLimit(arr, limit, iterator, callback) 接口。另外,還有個常用的控制並發連接數的接口是 queue(worker, concurrency) ,大家可以去看看它的API。

繼續我們的爬蟲,進到具體的文章頁面,發現我們想獲取的信息也不在直接請求而來的 html 頁面中,而是如下這個 ajax 請求異步生成的,不過慶幸的是我們上一步收集的 URL 包含了這個請求所需要的參數,所以我們僅僅需要多做一層處理,將這個參數從 URL 中取出來再重新拼接成一個ajax URL 請求。

下面,貼出代碼,在我們剛剛的回調函數中,繼續我們4000個頁面的爬取,並且控制並發數為5:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
ep.after( 'BlogArticleHtml' ,pageUrls.length*20, function (articleUrls){
     // 當所有 'BlogArticleHtml' 事件完成后的回調觸發下面事件
     // 控制並發數
     var  curCount = 0;
     var  reptileMove =  function (url,callback){
         //延遲毫秒數
         var  delay = parseInt((Math.random() * 30000000) % 1000, 10);
       curCount++;
       console.log( '現在的並發數是' , curCount,  ',正在抓取的是' , url,  ',耗時'  + delay +  '毫秒' );  
     
     superagent.get(url)
         .end( function (err,sres){
             // sres.text 里面存儲着請求返回的 html 內容
             var  $ = cheerio.load(sres.text);
             // 收集數據
             // 拼接URL
             var  currentBlogApp = url.split( '/p/' )[0].split( '/' )[3],
                 appUrl =  "http://www.cnblogs.com/mvc/blog/news.aspx?blogApp=" + currentBlogApp;
             // 具體收集函數
             personInfo(appUrl);
         });
 
     setTimeout( function () {
         curCount--;
         callback( null ,url + 'Call back content' );
     }, delay);      
     };
 
// 使用async控制異步抓取    
// mapLimit(arr, limit, iterator, [callback])
// 異步回調
async.mapLimit(articleUrls, 5 , function  (url, callback) {
       reptileMove(url, callback);
     },  function  (err,result) {
         // 4000 個 URL 訪問完成的回調函數
         // ...
     });
});

根據重新拼接而來的 URL ,再寫一個具體的 personInfo(URL) 函數,具體獲取我們要的昵稱、園齡、粉絲數等信息。

這樣,我們把抓取回來的信息以 JSON 串的形式存儲在 catchDate 這個數組當中,

node index.js 運行一下程序,將結果打印出來,可以看到中間過程及結果:

至此,第三步就完成了,我們也收集到了4000條我們想要的原始數據。

 

Step.4 分析 展示

本來想將爬來的數據存入 mongoDB ,但因為這里我只抓取了4000條數據,相對於動不動爬幾百萬幾千萬的量級而言不值一提,故就不添加額外的操作 mongoDB 代碼,專注於爬蟲本身。

收集到數據之后,就想看你想怎么展示了,這里推薦使用 Highcharts 純JS圖表庫去展示我們的成果。當然這里我偷懶了沒有做,直接用最原始的方法展示結果。

下面是我不同時間段爬取,經過簡單處理后的的幾張結果圖:

(結果圖的耗時均在並發量控制為 5 的情況下)

 

   后記

OK,至此,整個爬蟲就完成了,其實代碼量很少,我覺得寫爬蟲更多的時間是花在在處理各類問題,分析頁面結構。

完整的爬蟲代碼,在我的github上可以下載。如果仍有疑問,可以把代碼 down 到本地,重新從文章開頭對照代碼再實踐一次,相信很多問題會迎刃而解。

因為代碼開源,本着負責任的心態,希望大家可以照着代碼寫寫其他網站的爬蟲,如果都拿cnblog來爬,服務器可能會承受不住的:)

參考文章:《Node.js 包教不包會》

原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM