Nodejs 실무 경험: eventproxy 모듈이 concurrency_node.js를 제어합니다.-JS 튜토리얼-php.cn

목표

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
 },
 ...
]

로그인 후 복사

지식 포인트

Node.js의 콜백 지옥의 아름다움을 경험해보세요

동시성 제어 도구인 eventproxy 사용 방법 알아보기

강좌 내용

이 장에서는 Node.js의 가장 멋진 부분인 비동기 동시성에 대해 알아봅니다.

이전 강의에서는 superagent와 Cherio를 사용하여 홈페이지 콘텐츠를 가져오는 방법을 소개했습니다. http 가져오기 요청만 시작하면 됩니다. 하지만 이번에는 각 주제의 첫 번째 댓글을 검색해야 하며, 이를 위해서는 각 주제의 링크에 대한 요청을 시작하고 첫 번째 댓글을 검색하기 위해 Cherio를 사용해야 합니다.

CNode에는 현재 페이지당 40개의 주제가 있으므로 이 강의의 목표를 달성하려면 140개의 요청을 시작해야 합니다.

우리는 후자의 40개 요청을 동시에 시작했습니다. :) Node.js의 동시성 모델은 멀티스레딩과 다르기 때문에 이러한 개념을 포기합니다. 좀 더 구체적으로 말하면 왜 비동기식이 비동기식인지, Node.js가 단일 스레드이지만 동시성이 있는 이유와 같은 과학적인 문제는 다루지 않겠습니다. 이 측면에 관심이 있는 학생들에게는 @puling의 "Nine Lights and One Deep Node.js"를 강력히 추천합니다: http://book.douban.com/subject/25768396/.

좀 더 세련된 친구들은 Promise나 Generator 같은 개념을 들어본 적이 있을 것입니다. 하지만 저는 콜백에 대해서만 이야기할 수 있습니다. 주된 이유는 제가 개인적으로 콜백만을 좋아하기 때문입니다.

이 과정에서는 3개의 라이브러리를 사용해야 합니다: superagent Cherio 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);
 });

로그인 후 복사

node app.js 실행

출력은 아래와 같습니다.

자, 이제 모든 URL의 주소를 얻었습니다. 다음으로 모든 주소를 크롤링하면 Node.js가 완료됩니다.
크롤링하기 전에 eventproxy 라이브러리를 소개해야 합니다.

JS에서 비동기적으로 작성해 본 학생들은 두세 개의 주소에서 동시에 비동기적으로 데이터를 얻고, 데이터를 얻은 후에 이 데이터를 함께 사용하려는 경우 전통적인 작성 방법은 스스로 유지하는 것임을 모두 알고 있어야 합니다. 계수기.

먼저 var count = 0으로 정의한 다음 크롤링이 성공할 때마다 개수를 계산합니다. 세 가지 소스에서 데이터를 캡처하려는 경우 누가 이러한 비동기 작업을 먼저 완료할지 모르기 때문에 캡처가 성공할 때마다 개수 === 3을 확인합니다. 값이 true이면 다른 함수를 사용하여 작업을 계속하십시오.
Eventproxy는 이러한 비동기 작업이 완료되었는지 관리하는 데 도움이 되며, 제공된 처리 기능을 자동으로 호출하고 캡처된 데이터를 매개 변수로 전달합니다.
eventproxy나 counter를 사용하지 않는다는 가정하에 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을 얻은 다음 엿먹이고 출력하십시오.

그러나 실제로는 이 세 가지 소스의 데이터를 동시에 얻을 수 있다고 생각했을 것입니다. 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]);
  });
});

로그인 후 복사

输出长这样：