Nodejs の実践経験:eventproxy モジュールが concurrency_node.js を制御する

目標

lesson4 プロジェクトを作成し、そこにコードを記述します。

コードのエントリ ポイントは app.js です。ノード 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
 },
 ...
]

知識ポイント

Node.js のコールバック地獄の美しさを体験してください

同時実行性を制御するツール、eventproxy の使用方法を学びます

コース内容

この章では、Node.js の最も素晴らしい部分である非同期同時実行について説明します。

前のレッスンでは、http get リクエストを開始するだけでホームページのコンテンツを取得するためにスーパーエージェントとチェリオを使用する方法を紹介しました。ただし、今回は各トピックの最初のコメントを取得する必要があるため、各トピックのリンクのリクエストを開始し、cheerio を使用して最初のコメントを取得する必要があります。

CNode には現在、ページごとに 40 のトピックがあるため、このレッスンの目標を達成するには 1 40 のリクエストを開始する必要があります。

後半の 40 リクエストを同時に開始しました :)、Node.js の同時実行モデルはマルチスレッドとは異なるため、これらの概念は放棄してください。より具体的に言うと、なぜ非同期が非同期なのか、なぜ Node.js はシングルスレッドでありながら同時実行できるのかなど、科学的な問題には立ち入りません。この側面に興味がある学生には、@puling の「Nine Lights and One Deep Node.js」:

http://book.douban.com/subject/25768396/ を強くお勧めします。

より洗練された友人の中には、プロミスやジェネレーターなどの概念について聞いたことがあるかもしれません。しかし、私はコールバックについてしか話せません。主な理由は、私が個人的にコールバックだけが好きなからです。

このコースでは 3 つのライブラリを使用する必要があります: superagent Cheerio eventproxy(

https://github.com/JacksonTian/eventproxy ) 足場の作業はご自身で行うことができ、プログラムを段階的に一緒に書いていきます。

最初の app.js は次のようになります

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.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);
 });

ノード app.js を実行します

出力は以下のようになります:

OK、これですべての URL のアドレスが取得できました。次に、これらのアドレスをすべてクロールすれば、Node.js は簡単に完了します。

クロールする前に、eventproxy ライブラリを導入する必要があります。

js で非同期を書いたことがある学生なら、2 つまたは 3 つのアドレスから同時に非同期でデータを取得し、データを取得した後にこれらのデータを一緒に使用したい場合、従来の書き方は自分でメンテナンスすることであることを知っているはずです。カウンタ。

最初に var count = 0 を定義し、次にクロールが成功するたびにカウントします。 3 つのソースからデータをキャプチャする場合、誰がこれらの非同期操作を最初に完了するかわからないため、キャプチャが成功するたびに count === 3 を確認します。値が true の場合、別の関数を使用して操作を続行します。

Eventproxy は、これらの非同期操作が完了したかどうかを管理するのに役立ちます。完了後、指定した処理関数が自動的に呼び出され、キャプチャされたデータがパラメーターとして渡されます。
イベントプロキシやカウンターを使用しないと仮定すると、3 つのソースをキャプチャする方法は次のとおりです:

// 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 を取得して、それらをファックして出力します。

しかし、実際には、これら 3 つのソースからのデータは並行して取得できることは誰もが考えているはずです。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，但最最常用的用法就是以上的这种，即：

先 var ep = new eventproxy(); 得到一个 eventproxy 实例。

告诉它你要监听哪些事件，并给它一个回调函数。ep.all('event1', 'event2', function (result1, result2) {})。
在适当的时候 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]);
  });
});

输出长这样：

完整的代码请查看 lesson4 目录下的 app.js 文件

总结

今天介绍的 eventproxy 模块是控制并发用的，有时我们需要同时发送 N 个 http 请求，然后利用得到的数据进行后期的处理工作，如何方便地判断数据已经全部并发获取得到，就可以用到该模块了。而模块不仅可以在服务端使用，也可以应用在客户端