手把手教你学node.js 之使用 eventproxy 控制并发

使用 eventproxy 控制并发

目标

创建一个 lesson4 项目，在其中编写代码。

代码的入口是 app.js，当调用 node app.js 时，它会输出 CNode(https://cnodejs.org/ ) 社区首页的全部主题的标题，连接和第一条评论，以 json 的格式。

输出示例：

[
  {
    "title": "【公告】发招聘帖的同窗留意一下这里",
    "href": "http://cnodejs.org/topic/541ed2d05e28155f24676a12",
    "comment1": "呵呵呵呵"
  },
  {
    "title": "发布一款 Sublime Text 下的 JavaScript 语法高亮插件",
    "href": "http://cnodejs.org/topic/54207e2efffeb6de3d61f68f",
    "comment1": "沙发！"
  }
]

挑战

以上文目标为基础，输出 comment1 的做者，以及他在 cnode 社区的积分值。

示例：

[
  {
    "title": "【公告】发招聘帖的同窗留意一下这里",
    "href": "http://cnodejs.org/topic/541ed2d05e28155f24676a12",
    "comment1": "呵呵呵呵",
    "author1": "auser",
    "score1": 80
  },
  ...
]

知识点

1.体会 Node.js 的 callback hell 之美

2.学习使用 eventproxy 这一利器控制并发

课程内容

注意，cnodejs.org 网站有并发链接数的限制，因此当请求发送太快的时候会致使返回值为空或报错。建议一次抓取3个主题便可。文中的40只是为了方便讲解

这一章咱们来到了 Node.js 最牛逼的地方——异步并发的内容了。

上一课咱们介绍了如何使用 superagent 和 cheerio 来取主页内容，那只须要发起一次 http get 请求就能办到。但此次，咱们须要取出每一个主题的第一条评论，这就要求咱们对每一个主题的连接发起请求，并用 cheerio 去取出其中的第一条评论。

CNode 目前每一页有 40 个主题，因而咱们就须要发起 1 + 40 个请求，来达到咱们这一课的目标。

此次课程咱们须要用到三个库：superagent cheerio eventproxy(https://github.com/JacksonTian/eventproxy )

手脚架的工做各位本身来，咱们一步一步来一块儿写出这个程序。

首先 app.js 应该长这样,咱们先获取到首页的全部的连接：

var superagent = require('superagent');
var cheerio = require('cheerio');
// url 模块是 Node.js 标准库里面的
// http://nodejs.org/api/url.html
var url = require('url');

var cnodeUrl = 'https://cnodejs.org/';

superagent.get(cnodeUrl)
  .end(function (err, res) {
    if (err) {
      return console.error(err);
    }
    var topicUrls = [];
    var $ = cheerio.load(res.text);
    // 获取首页全部的连接
    $('#topic_list .topic_title').each(function (idx, element) {
      var $element = $(element);
      // $element.attr('href') 原本的样子是 /topic/542acd7d5d28233425538b04
      // 咱们用 url.resolve 来自动推断出完整 url，变成
      // https://cnodejs.org/topic/542acd7d5d28233425538b04 的形式
      // 具体请看 http://nodejs.org/api/url.html#url_url_resolve_from_to 的示例
      var href = url.resolve(cnodeUrl, $element.attr('href'));
      topicUrls.push(href);
    });

    console.log(topicUrls);
  });

运行 node app.js

输出以下图：

OK，这时候咱们已经获得全部 url 的地址了，接下来，咱们把这些地址都抓取一遍，就完成了，Node.js 就是这么简单。

抓取以前，仍是得介绍一下 eventproxy 这个库。

用 js 写过异步的同窗应该都知道，若是你要并发异步获取两三个地址的数据，而且要在获取到数据以后，对这些数据一块儿进行利用的话，常规的写法是本身维护一个计数器。

先定义一个 var count = 0，而后每次抓取成功之后，就 count++。若是你是要抓取三个源的数据，因为你根本不知道这些异步操做到底谁先完成，那么每次当抓取成功的时候，就判断一下 count === 3。当值为真时，使用另外一个函数继续完成操做。

而 eventproxy 就起到了这个计数器的做用，它来帮你管理到底这些异步操做是否完成，完成以后，它会自动调用你提供的处理函数，并将抓取到的数据当参数传过来。

假设咱们不使用 eventproxy 也不使用计数器时，抓取三个源的写法是这样的：

// 参考 jquery 的 $.get 的方法
$.get("http://data1_source", function (data1) {
  // something
  $.get("http://data2_source", function (data2) {
    // something
    $.get("http://data3_source", function (data3) {
      // something
      var html = fuck(data1, data2, data3);
      render(html);
    });
  });
});

上述的代码你们都写过吧。先获取 data1，获取完成以后获取 data2，而后再获取 data3，而后 fuck 它们，进行输出。

但你们应该也想到了，其实这三个源的数据，是能够并行去获取的，data2 的获取并不依赖 data1 的完成，data3 同理也不依赖 data2。

因而咱们用计数器来写，会写成这样：

(function () {
  var count = 0;
  var result = {};

  $.get('http://data1_source', function (data) {
    result.data1 = data;
    count++;
    handle();
    });
  $.get('http://data2_source', function (data) {
    result.data2 = data;
    count++;
    handle();
    });
  $.get('http://data3_source', function (data) {
    result.data3 = data;
    count++;
    handle();
    });

  function handle() {
    if (count === 3) {
      var html = fuck(result.data1, result.data2, result.data3);
      render(html);
    }
  }
})();

若是咱们用 eventproxy，写出来是这样的：

var ep = new eventproxy();
ep.all('data1_event', 'data2_event', 'data3_event', function (data1, data2, data3) {
  var html = fuck(data1, data2, data3);
  render(html);
});

$.get('http://data1_source', function (data) {
  ep.emit('data1_event', data);
  });

$.get('http://data2_source', function (data) {
  ep.emit('data2_event', data);
  });

$.get('http://data3_source', function (data) {
  ep.emit('data3_event', data);
  });

好看多了是吧，也就是个高等计数器嘛。

ep.all('data1_event', 'data2_event', 'data3_event', function (data1, data2, data3) {});

这一句，监听了三个事件，分别是 data1_event, data2_event, data3_event，每次当一个源的数据抓取完成时，就经过 ep.emit() 来告诉 ep 本身，某某事件已经完成了。

当三个事件未同时完成时，ep.emit() 调用以后不会作任何事；当三个事件都完成的时候，就会调用末尾的那个回调函数，来对它们进行统一处理。

eventproxy 提供了很多其余场景所需的 API，但最最经常使用的用法就是以上的这种，即：

1.先 var ep = new eventproxy(); 获得一个 eventproxy 实例。

2.告诉它你要监听哪些事件，并给它一个回调函数。ep.all('event1', 'event2', function (result1, result2) {})。

3.在适当的时候 ep.emit('event_name', eventData)。
eventproxy 这套处理异步并发的思路，我一直以为就像是汇编里面的 goto 语句同样，程序逻辑在代码中随处跳跃。原本代码已经执行到 100 行了，忽然 80 行的那个回调函数又开始工做了。若是你异步逻辑复杂点的话，80 行的这个函数完成以后，又激活了 60 行的另一个函数。并发和嵌套的问题虽然解决了，但老祖宗们消灭了几十年的 goto 语句又回来了。

至于这套思想糟糕不糟糕，我我的却是以为仍是不糟糕，用熟了看起来蛮清晰的。不过 js 这门渣渣语言原本就乱嘛，什么变量提高（http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html ）啊，没有 main 函数啊，变量做用域啊，数据类型经常简单得只有数字、字符串、哈希、数组啊，这一系列的问题，都不是事儿。

编程语言美丑啥的，咱心中有佛就好。

回到正题，以前咱们已经获得了一个长度为 40 的 topicUrls 数组，里面包含了每条主题的连接。那么意味着，咱们接下来要发出 40 个并发请求。咱们须要用到 eventproxy 的 #after API。

你们自行学习一下这个 API 吧：https://github.com/JacksonTian/eventproxy#%E9%87%8D%E5%A4%8D%E5%BC%82%E6%AD%A5%E5%8D%8F%E4%BD%9C

我代码就直接贴了哈。

// 获得 topicUrls 以后

// 获得一个 eventproxy 的实例
var ep = new eventproxy();

// 命令 ep 重复监听 topicUrls.length 次（在这里也就是 40 次） `topic_html` 事件再行动
ep.after('topic_html', topicUrls.length, function (topics) {
  // topics 是个数组，包含了 40 次 ep.emit('topic_html', pair) 中的那 40 个 pair

  // 开始行动
  topics = topics.map(function (topicPair) {
    // 接下来都是 jquery 的用法了
    var topicUrl = topicPair[0];
    var topicHtml = topicPair[1];
    var $ = cheerio.load(topicHtml);
    return ({
      title: $('.topic_full_title').text().trim(),
      href: topicUrl,
      comment1: $('.reply_content').eq(0).text().trim(),
    });
  });

  console.log('final:');
  console.log(topics);
});

topicUrls.forEach(function (topicUrl) {
  superagent.get(topicUrl)
    .end(function (err, res) {
      console.log('fetch ' + topicUrl + ' successful');
      ep.emit('topic_html', [topicUrl, res.text]);
    });
});

输出长这样：

附完整代码：

var eventproxy = require('eventproxy')
var superagent = require('superagent')
var cheerio = require('cheerio')

//url 模块是Node.js 标准库里面的
//http://nodejs.org/api/url.html
var url = require('url')

var cnodeUrl = 'https://cnodejs.org/'

superagent.get(cnodeUrl)
  .end(function(err,res){
    if (err) {
      return console.log(err);
    }
    var topicUrls = []
    var $ = cheerio.load(res.text)
    //获取首页全部的连接
    $('#topic_list .topic_title').each(function(idx, element){
      var $element = $(element)
      // $element.attr('href') 原本的样子是 /topic/542acd7d5d28233425538b04
      // 咱们用 url.resolve 来自动推断出完整 url，变成
      //https://cnodejs.org/topic/542acd7d5d28233425538b04 的形式
      // 具体请看 http://nodejs.org/api/url.html#url_url_resolve_from_to 的示例
      //http://nodejs.cn/api/url.html#url_url_resolve_from_to//中文版😳
      var href = url.resolve(cnodeUrl, $element.attr('href'));
      topicUrls.push(href)
    })
    console.log('topicUrls:',topicUrls)
    // 获得 topicUrls 以后
    // 获得一个 eventproxy 实例
    var ep = new eventproxy();

    //命令 ep 重复监听 topicUrls.length 次(在这里也就是 40次)`topic_html` 事件再行动
    ep.after('topic_html',topicUrls.length, function(topics){
      // topics 是个数组，包含了 40次 em.emit('topic_html',pair)中的 那个 40个pair
      // 开始行动
      topics = topics.map(function(topicPair){
        // 接下来都是 jq的用法了
        var topicUrl = topicPair[0];
        var topicHtml = topicPair[1];
        var $ = cheerio.load(topicHtml);
        return({
          title: $('.topic_full_title').text().trim(),
          href: topicUrl,
          comment1: $('.reply_content').eq(0).text().trim()
        })
      })
      console.log('final:')
      console.log(topics)
    })
    topicUrls.forEach(function (topicUrl) {
      superagent.get(topicUrl)
        .end(function (err,res) {
          console.log('fetch'+topicUrl+'successful')
          ep.emit('topic_html',[topicUrl, res.text])
        })
    })
  })

阅读原文