基於 node 的微小爬蟲——扒了一下知乎

寫在最前

近期讀到了alsotang的node教程，對一些基礎知識又有了些新認識，故重新梳理了一下，分享出來。這裏是教程地址。

本次使用了superagent、cheerio來爬取知乎的發現頁文章列表，通過async來控制併發數來動態獲取延時加載的文章。源碼地址，以及作者的blog歡迎關注，不定期更新中——

實現步驟

• 搭建http服務
• 通過superagent獲取頁面html
• 使用cheerio提取html相應字段
• 使用async第三方庫進行併發控制

搭建http服務

// Spider.js
var http = require('http')
const server = http.createServer((req, res) => {
  ...
}).listen(9090)

nodejs封裝了HTTP模塊可以讓我們快速的搭建一個基礎服務，由上面代碼可以看出其實一句話就可以解決問題。至於想深入HTTP模塊可參照文檔。至此我們可以通過

node Spider.js 

來開啓服務器，這裏推薦使用nodemon其自動監聽代碼修改並自啓動還是很方便的。

通過superagent獲取頁面html

var baseUrl = 'http://www.zhihu.com/node/ExploreAnswerListV2'
superagent.get(baseUrl)
          .set({
            'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
            'Referrer': 'www.baidu.com'
          })
          .query({
            params: JSON.stringify(params)
          })
          .end(function(err, obj) {
            if(err) return null
            res.end(JSON.stringify(obj)) 
            //res是一個可寫流裏面傳遞的參數類型爲string或buffer
            //故使用JSON.stringify()
          })

superagent採用了鏈式調用的形式其API用法一目瞭然。我們都知道現在的大列表都會實行懶加載，即用戶下拉到一定程度再去請求新的列表，所以我們的爬蟲也應該用某種規則來獲取那些一開始進入頁面沒有獲取到的文章列表。我們來看下知乎發現頁下的network，當頁面向下滾動的時候會加載新的文章，這個時候會發一個新的請求：

首先可以看到這是一個get請求，請求的key爲params，後面攜帶了一個對象。作者多拉了幾次頁面發現了其中加載規律，每次加載都會是5篇文章。同時offset爲0、5、10...由此我們可以通過動態生成offset拼接參數來請求，就可以理論上拿到n多的文章信息。在此作者犯了個小錯誤，一開始書寫參數的時候作者是這麼寫的：

offset = 0、5、10...
var params = {
      'offset':offset,
      'type':'day'
    }
    superagent.get(baseUrl)
          .query({
            params: params
          })
          .end(function(err, obj) {
            ...
          })
  };

這樣寫在請求中會變成什麼情況呢？

是不是哪裏怪怪的？我們發現這麼寫的話瀏覽器會解析這個參數。。本身的樣子應該是：

這個對象轉變成了字符串，也就是調用了JSON.stringify()方法來將對象進行變換。我知道作者比較愚鈍，以後不會再犯這種低級。。特此分享！

使用cheerio提取html相應字段

const cheerio = require('cheerio')
...
const server = http.createServer((req, res) => {
  ...
  superagent.get(baseUrl)
    ...
    .end(function(err, obj) {
            if(err) return null
            var $ = cheerio.load(obj.text)
            //有興趣可以打印obj看看裏面都有什麼；
            //text屬性中有着html信息；
            var items = []
            var baseUrl = 'https://www.zhihu.com'
            $('.explore-feed').each(function (index, el) {
              var $el = $(el)
              var tittle = $el.find('h2 a').text().replace(/[\r\n]/g, '')
              var href = url.resolve(baseUrl, $el.find('h2 a').attr('href'))
              var author = $el.find('.author-link').text()
              items.push({
                title: tittle,
                href: href,
                author: author
              })
            })
            res.end(JSON.stringify(items))
          })
}).listen(9090)

通過cheerio.load()方法將返回的html封裝爲jQ形式，之後就可以使用jQ的語法對立面的html操作了，whatever u want.

使用async第三方庫進行併發控制

現在的需求是我們希望可以動態的爬取頁面信息，那麼肯定就要發很多請求。在這裏有兩種選擇。我們可以一次性去請求，也可以控制請求數來執行。在這裏我們採用控制併發數的方式進行請求。原因主要在於瀏覽器通常會有安全限制不會允許對同一域名有過大的併發數畢竟早期服務器受不了這種操作，很脆弱；再由於有些網站會檢測你的請求，如果併發數過多會覺得是惡意爬蟲啥的之類的把你的IP封掉，所以乖乖的控制下併發數吧。

async

本次使用了這個爲解決異步編程的弊端即回調地獄所推出的一個流程控制庫，讓開發人員可以有着同步編程的體驗來進行異步開發，這樣也順應了人的思維模式。這裏推薦一個github倉庫這裏面有着對async庫使用的demo，簡直好用到爆炸？借用其中一個例子：

var arr = [{name:'Jack', delay:200}, {name:'Mike', delay: 100}, {name:'Freewind', delay:300}, {name:'Test', delay: 50}];
async.mapLimit(arr,2, function(item, callback) {
    log('1.5 enter: ' + item.name);
    setTimeout(function() {
        log('1.5 handle: ' + item.name);
        if(item.name==='Jack') callback('myerr');
        else callback(null, item.name+'!!!');
    }, item.delay);
}, function(err, results) {
    log('1.5 err: ', err);
    log('1.5 results: ', results);
});
//57.797> 1.5 enter: Jack
//57.800> 1.5 enter: Mike
//57.900> 1.5 handle: Mike
//57.900> 1.5 enter: Freewind
//58.008> 1.5 handle: Jack
//58.009> 1.5 err: myerr
//58.009> 1.5 results: [ undefined, 'Mike!!!' ]
//58.208> 1.5 handle: Freewind
//58.208> 1.5 enter: Test
//58.273> 1.5 handle: Test

可以看出mapLimit核心的操作就是先放入需要異步操作的數據，再設定併發數；然後在第一個func中對其進行遍歷執行，當執行完成後調用callback，最後所有callback會彙總到第二個func中。有興趣的同學可以去閱讀文檔，async對異步操作的封裝還是很完善的。

完整代碼

var superagent = require('superagent')
var cheerio = require('cheerio')
var http = require('http')
var url = require('url');
var async = require('async')
const server = http.createServer((req, res) => {
  var count = 0;
  var fetchUrl = function (offset, callback) {
    count++;
    console.log('當前併發數：', count) //測試併發數
    var baseUrl = 'http://www.zhihu.com/node/ExploreAnswerListV2'
    var params = {
      'offset':offset,
      'type':'day'
    }
    superagent.get(baseUrl)
          .set({
            'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
            'Referrer': 'www.baidu.com'
          })
          .query({
            params: params
          })
          .end(function(err, obj) {
            if(err) return null
            var $ = cheerio.load(obj.text)
            var items = []
            var baseUrl = 'https://www.zhihu.com'
            $('.explore-feed').each(function (index, item) {
              // item = this, $(this)轉換爲jq對象
              var tittle = $(this).find('h2 a').text().replace(/[\r\n]/g, '') //去掉空格
              var href = url.resolve(baseUrl, $(this).find('h2 a').attr('href'))
              var author = $(this).find('.author-link').text()
              items.push({
                title: tittle,
                href: href,
                author: author
              })
            })
            res.end(JSON.stringify(items))
            count--
            console.log('釋放了併發數後，當前併發數：', count)
            callback(null, JSON.stringify(items))
          })
  };
  var offsets = [];
  for(var i = 0; i < 13; i++) {
    offsets.push(i * 5); //生成很多offset參數值
  }
  async.mapLimit(offsets, 5, function (offset, callback) {
    fetchUrl(offset, callback);
  }, function (err, result) {
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf8' });
    //記得加上編碼utf-8 有亂碼別找我
    res.end(JSON.stringify(result))
  });
}).listen(9090)

再看下後端console下對併發數的檢測：

以及爬取到的文章列表：

最後

一直希望可以學好node，但總是由於各種原因被阻撓，現在準備開始細細學習一下原生的API(至於怎麼實現的。。對不起這輩子註定無緣c++。腦子真的不夠)，以後會不定期更新到blog中對於一些node基礎知識的理解。基礎真的很重要。慣例：作者的博客歡迎不定時關注——