基于 Electron 的爬虫框架 Nightmare
作者:William
本文为原创文章,转载请注明作者及出处
Electron 可以让你使用纯 JavaScript 调用 Chrome 丰富的原生的接口来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体,而不是 Web 服务器。其基于浏览器的应用方式可以极方便的做各种响应式的交互,接下来介绍下关于 Electron 上衍生出的框架 Nightmare。
Nightmare 是一个基于 Electron 的框架,针对 Web 自动化测试和爬虫(其实爬虫这个是大家自己给这个框架加的功能XD),因为其具有跟 PlantomJS 一样的自动化测试的功能可以在页面上模拟用户的行为触发一些异步数据加载,也可以跟 Request 库一样直接访问 URL 来抓取数据,并且可以设置页面的延迟时间,所以无论是手动触发脚本还是行为触发脚本都是轻而易举的(这边注意,如果事件具备 isTrusted 的检查的话,就无法触发了)。
使用 Nightmare
为了更快速使用 NPM 下载,可以使用淘宝的镜像地址。直接 NPM 安装Nightmare 就完成安装了(二进制的 Electron 依赖有点大,安装时间可能比较长)。
写一个简单的启动 app.js;
const Nightmare = require('nightmare')
const nightmare = new Nightmare({
show: true,
openDevTools: {
mode: 'detach'
}
})
nightmare.goto('https://www.hujiang.com')
.evaluate(function() {
// 该环境中能使用浏览器中的任何对象window/document,并且返回一个promise
console.log('hello nightmare')
console.log('5 second close window')
})
.wait(5000)
.end()
.then(()=> {
console.log('close nightmare')
})
这个脚本会在打开的浏览器的调试控制台中打印出 hello nightmare 并且在5秒后关闭,随后在运行的该脚本的中输出 close nightmare。
Nightmare原理
利用了 Electron 提供的 Browser 的环境,同时具备了 Node.js 的 I/O 能力,所以可以很方便实现一个爬虫应用。Nightmare 的官网有更详细的介绍:
大致操作:
- 浏览器事件: goto,back,forward,refresh,
- 用户事件: click,mousedown,mouseup,mouseover,type,insert,select,check,uncheck,selectscrollTo
- 向网页注入脚本: .js .css的文件类型原理是跟油猴差不多,可以编写自己的js代码注入十分方便
- wait 函数可以按照延迟时间或者一个 dom 元素的出现
- evaluate 以浏览器的环境运行的脚本函数,然后返回一个 promise 函数
一个完整的nightmare爬虫应用
我们以抓取知乎上的话题的为应用场景,需要的数据是知乎的话题信息 包含以下字段 话题名称/话题的图片/关注者数量/话题数量/精华话题数量,但是因为后三者只能在其父亲话题中包含,所以必须先抓父话题才能抓取子话题,而且这些子话题是以 hover 的形式在父话题中异步加载的,如果用Request/Superagent 需要 HTTP 传递其解析过的id才能获取,但是用Nightmare 可以直接调用其 hover 事件触发数据的加载。
第一步获取需要抓取的话题深度,默认的根是现在知乎的根话题;
/**
* 抓取对应的话题页面的url和对应的深度保存到指定的文件名中
* @param {string} rootUrl - 顶层的url
* @param {int} deep - 抓取页面的深度
* @param {string} toFile - 保存的文件名
* @param {Function} cb - 完成后的回调
*/
async function crawlerTopicsFromRoot (rootUrl, deep, toFile, cb) {
rootUrl = rootUrl ||'https://www.zhihu.com/topic/19776749/hot'
toFile = toFile || './topicsTree.json'
console.time()
const result = await interactive
.iAllTopics(rootUrl, deep)
console.timeEnd()
util.writeJSONToFile(result['topics'], toFile, cb)
}
crawlerTopicsFromRoot('', 2, '', _ => {
console.log('完成抓取')
})
然后进行交互函数的核心函数,注意在开始抓取前,要去看看知乎的 robots.txt 文件看看哪些能抓和抓取的间隔不然很容易 timeout 的错误。
// 获取对应的话题的信息
const cntObj = queue.shift()
const url = `https://www.zhihu.com/topic/${cntObj['id']}/hot`
const topicOriginalInfo = await nightmare
.goto(url)
.wait('.zu-main-sidebar') // 等待该元素的出现
.evaluate(function () {
// 获取这块数据
return document.querySelector('.zu-main-sidebar').innerHTML
})
// .....若干步的操作后
// 获取其子话题的数值信息
const hoverElement = `a.zm-item-tag[href$='${childTopics[i]['id']}']`
const waitElement = `.avatar-link[href$='${childTopics[i]['id']}']`
const topicAttached = await nightmare
.mouseover(hoverElement) // 触发hover事件
.wait(waitElement)
.evaluate(function () {
return document.querySelector('.zh-profile-card').innerHTML
})
.then(val => {
return parseRule.crawlerTopicNumbericalAttr(val)
})
.catch(error => {
console.error(error)
})
cheerio 是一个 jQuery 的 selector 库,可以应用于 HTML 片段并且获得对应的DOM 元素,然后我们就可以进行对应的 DOM 操作->增删改查都可以,这边主要用来查询 DOM 和获取数据。
const $ = require('cheerio')
/** *抓取对应话题的问题数量/精华话题数量/关注者数量 */
const crawlerTopicNumbericalAttr = function (html) {
const $ = cheerio.load(html)
const keys = ['questions', 'top-answers', 'followers']
const obj = {}
obj['avatar'] = $('.Avatar.Avatar--xs').attr('src')
keys.forEach(key => {
obj[key] = ($(`div.meta a.item[href$=${key}] .value`).text() || '').trim()
})
return obj
}
/** * 抓取话题的信息 */
const crawlerTopics = function (html) {
const $ = cheerio.load(html)
const obj = {}
const childTopics = crawlerAttachTopic($, '.child-topic')
obj['desc'] = $('div.zm-editable-content').text() || ''
if (childTopics.length > 0) {
obj['childTopics'] = childTopics
}
return obj
}
/** * 抓取子话题的信息id/名称 */
const crawlerAttachTopic = function ($, selector) {
const topicsSet = []
$(selector).find('.zm-item-tag').each((index, elm) => {
const self = $(elm)
const topic = {}
topic['id'] = self.attr('data-token')
topic['value'] = self.text().trim()
topicsSet.push(topic)
})
return topicsSet
}
然后一个简单的爬虫就完成了,最终获得部分数据格式如何:
{
"value": "rootValue",
"id": "19776749",
"fatherId": "-1",
"desc": "知乎的全部话题通过父子关系构成一个有根无循环的有向图。「根话题」即为所有话题的最上层的父话题。话题精华即为知乎的 Top1000 高票回答。请不要在问题上直接绑定「根话题」。这样会使问题话题过于宽泛。",
"cids": [
"19778317",
"19776751",
"19778298",
"19618774",
"19778287",
"19560891"
]
},
{
"id": "19778317",
"value": "生活、艺术、文化与活动",
"avatar": "https://pic4.zhimg.com/6df49c633_xs.jpg",
"questions": "3.7M",
"top-answers": "1000",
"followers": "91K",
"fid": "19776749",
"desc": "以人类集体行为和人类社会文明为主体的话题,其内容主要包含生活、艺术、文化、活动四个方面。",
"cids": [
"19551147",
"19554825",
"19550453",
"19552706",
"19551077",
"19550434",
"19552266",
"19554791",
"19553622",
"19553632"
]
},
总结
Nightmare 作为爬虫的最大优势是只需要知道数据所在页面的 URL 就可以获取对应的同步/异步数据,并不需要详细的分析 HTTP 需要传递的参数。只需要知道进行哪些操作能使得网页页面数据更新,就能通过获取更新后的 HTML 片段获得对应的数据,在 Demo 中的 Nightmare 是打开了 chrome-dev 进行操作的,但是实际运行的时候是可以关闭的,关闭了之后其操作的速度会有一定的上升。下面的项目中还包含了另外一个爬取的知乎的动态。
Demo源码地址: https://github.com/williamstar/nightmare-demo
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
报名地址:http://www.huodongxing.com/event/4404706591400
基于 Electron 的爬虫框架 Nightmare的更多相关文章
- scrapy爬虫框架实例一,爬取自己博客
本篇就是利用scrapy框架来抓取本人的博客,博客地址:http://www.cnblogs.com/shaosks scrapy框架是个比较简单易用基于python的爬虫框架,相关文档:http:/ ...
- 基于java的网络爬虫框架(实现京东数据的爬取,并将插入数据库)
原文地址http://blog.csdn.net/qy20115549/article/details/52203722 本文为原创博客,仅供技术学习使用.未经允许,禁止将其复制下来上传到百度文库等平 ...
- 基于redis的简易分布式爬虫框架
代码地址如下:http://www.demodashi.com/demo/13338.html 开发环境 Python 3.6 Requests Redis 3.2.100 Pycharm(非必需,但 ...
- [原创]一款基于Reactor线程模型的java网络爬虫框架
AJSprider 概述 AJSprider是笔者基于Reactor线程模式+Jsoup+HttpClient封装的一款轻量级java多线程网络爬虫框架,简单上手,小白也能玩爬虫, 使用本框架,只需要 ...
- 基于Python使用scrapy-redis框架实现分布式爬虫
1.首先介绍一下:scrapy-redis框架 scrapy-redis:一个三方的基于redis的分布式爬虫框架,配合scrapy使用,让爬虫具有了分布式爬取的功能.github地址: https: ...
- 基于Java的开源爬虫框架WebCollector的使用
一.WebCollector介绍 WebCollector是一个无须配置.便于二次开发的JAVA爬虫框架(内核),它提供精简的的API,只需少量代码即可实现一个功能强大的爬虫. WebCollecto ...
- 基于node.js的爬虫框架 node-crawler简单尝试
百度爬虫这个词语,一般出现的都是python相关的资料. py也有很多爬虫框架,比如scrapy,Portia,Crawley等. 之前我个人更喜欢用C#做爬虫. 随着对nodejs的熟悉.发现做这种 ...
- 使用Squirrel创建基于Electron开发的Windows 应用安装包
我们把自己开发的Electron应用发布之前,需要把app打包成简单的安装包,这样app更容易被获取,以此来发布我们的应用.我们可以参考Wix或其他的安装程序,但是对于Electron应用更好的打包程 ...
- 爬虫框架YayCrawler
爬虫框架YayCrawler 各位好!从今天起,我将用几个篇幅的文字向大家介绍一下我的一个开源作品——YayCrawler,其在GitHub上的网址是:https://github.com/liush ...
随机推荐
- VMware Workstation 12 Player之安装林耐斯-Linux Deepin -系统
VMware Workstation 12 Player之安装林耐斯-Linux Deepin -系统... ============= ============= ============= === ...
- java的引用数据类型,你知道吗???
有些人很清楚java的八种基本数据类型,但说到java的引用数据类型就不清楚了. Java的数据类型分为两大类,即基本数据类型和引用数据类型,在基本数据类型中有8种 基本数据类型(逻辑型-boolea ...
- 总结切面编程AOP的注解式开发和XML式开发
有段日子没有总结东西了,因为最近确实有点忙,一直在忙于hadoop集群的搭建,磕磕碰碰现在勉强算是能呼吸了,因为这都是在自己的PC上,资源确实有点紧张(搭建过程后期奉上),今天难得大家都有空(哈哈哈~ ...
- 数据结构之合并链表STL
#include <iostream> #include <list> using namespace std; int main() { int n, m; while (c ...
- 《阿里巴巴Java开发手册v1.2》解析(编程规约篇)
之前在乐视天天研究各种底层高大上的东西,因为我就一个人,想怎么弄怎么弄.如今来了新美大,好好研读一下<阿里巴巴Java开发手册v1.2>.还要对这么看似简单的东西解析一番.毕竟现在带团队, ...
- 迁移学习-Transfer Learning
迁移学习两种类型: ConvNet as fixed feature extractor:利用在大数据集(如ImageNet)上预训练过的ConvNet(如AlexNet,VGGNet),移除最后几层 ...
- Django1-10-5管理界面中文设置
先确定一下版本是否更高,低版本设置(settings.py文件): LANGUAGE_CODE = 'zh-CN'TIME_ZONE = 'Asia/Shanghai' 但是新版本就会提示不识别zh- ...
- Flask04 后台获取请求数据、视图函数返回类型、前台接受响应数据
1 后台获取请求数据 1.1 提出问题 前台发送请求的方式有哪些 后台如何获取这些请求的参数 1.2 前台发送请求的方式 GET.POST.AJAX 点睛:如果不指定请求方式,浏览器默认使用GET请求 ...
- Entity Framework Core Like 查询揭秘
在Entity Framework Core 2.0中增加一个很酷的功能:EF.Functions.Like(),最终解析为SQL中的Like语句,以便于在 LINQ 查询中直接调用. 不过Entit ...
- 详解java设计模式之责任链模式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt175 从击鼓传花谈起 击鼓传花是一种热闹而又紧张的饮酒游戏.在酒宴上宾客依次 ...