基于 node 的微小爬虫——扒了一下知乎

Aaaaaaaty commented 7 years ago

写在最前

近期读到了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基础知识的理解。基础真的很重要。

zzuzsj commented 6 years ago

咱俩学习的方向好像差不多。。。 canvas+node。。。

Aaaaaaaty commented 6 years ago

@zzuzsj 哈哈哈这俩比较有意思

zzuzsj commented 6 years ago

我也喜欢这俩玩意儿很感兴趣

Aaaaaaaty commented 6 years ago

@zzuzsj 多多交流哈哈

zzuzsj commented 6 years ago

1127284964 我的qq

luozheao commented 6 years ago

运行了下代码,发现抓取的13个页面的内容都一样,也就是说参数传了0,5,10,15,,,,,,, 但并没有起到分页的效果,望解答

luozheao commented 6 years ago

我debug出来了, superagent.get(baseUrl).query({ params: params}) 应该改成superagent.get(baseUrl).query({ params: JSON.stringify(params)})

哥,不仔细啊

Aaaaaaaty commented 6 years ago

@luozheao 谢谢指出；之前可能是没仔细看抓取的内容

Ocean-ZH commented 4 years ago

superagent.get(baseUrl)
          ...
          .end(function(err, obj) {
           ...
            res.end(JSON.stringify(items))
            ...
          })

res.end(JSON.stringify(items)) 如果在这里就响应那在页面上就看不到最终的结果了--

Aaaaaaaty / blog