首頁 >web前端 >js教程 >Nodejs實戰心得之eventproxy模組控制並發_node.js

Nodejs實戰心得之eventproxy模組控制並發_node.js

WBOY
WBOY原創
2016-05-16 15:34:591671瀏覽

目標

建立一個 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 的 callback hell 之美

學習使用 eventproxy 這一利器控制並發

課程內容

這一章我們來到了 Node.js 最屌的地方──非同步並發的內容了。

上一課我們介紹如何使用 superagent 和 cheerio 來取首頁內容,那隻需要發起一次 http get 請求就能辦到。但這次,我們需要取出每個主題的第一條評論,這就要求我們對每個主題的連結發起請求,並用 cheerio 去取出其中的第一條評論。

CNode 目前每一頁有 40 個主題,於是我們就需要發起 1 40 個請求,來達到我們這一課的目標。

後者的 40 個請求,我們並發地發起:),而且不會遇到多線程啊鎖什麼的,Node.js 的並發模型跟多線程不同,拋卻那些觀念。更具體一點的話,比如異步到底為何異步,Node.js 為何單線程卻能並發這類走近科學的問題,我就不打算講了。對於這方面有興趣的同學,強烈推薦 @樸靈 的 《九淺一深Node.js》: http://book.douban.com/subject/25768396/

有些逼格比較高的朋友可能聽過 promise 和 generator 這類概念。不過我呢,只會講 callback,主要原因是我個人只喜歡 callback。

這次課程我們需要用到三個函式庫: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);
 });

運行 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,但最最常用的用法就是以上的这种,即:

先 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 请求,然后利用得到的数据进行后期的处理工作,如何方便地判断数据已经全部并发获取得到,就可以用到该模块了。而模块不仅可以在服务端使用,也可以应用在客户端

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn