Electronによる爬虫枠

William本文はオリジナル文章です.転載は作者と出典を明記してください.
Electronは、純粋なJavaScriptを使ってChromeの豊富なネイティブインターフェースを呼び出してデスクトップアプリケーションを作成することができます.それを、Webサーバではなく、デスクトップアプリケーションに専念するノード.jsの変形体と見なすことができます.ブラウザベースのアプリケーションは、様々な応答式のインタラクションが非常に便利であり、次に、Electron上から派生したフレームNightmartについて紹介する.
Nightmateは、Electronのフレームワークに基づいて、Web自動化テストと爬虫(実は爬虫類はみんな自分でこのフレームに追加する機能XDです)に対して、PlantomJSと同じ自動化テストの機能を持っていますので、ページ上でユーザーの行動をシミュレーションして、いくつかの非同期データのロードをトリガすることができます.また、ページの遅延時間を設定することができますので、手動トリガスクリプトやアクショントリガスクリプトは簡単です.
Nightmateを使う
より速くNPMを使ってダウンロードするために、タオバオの鏡像アドレスが使えます.直接NPMにNightmareをインストールするとインストールが完了します.
簡単な起動アプリ.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')
   })

このスクリプトは、開いているブラウザのデバッグコンソールでハローnightmateを印刷し、5秒後にクローズし、その後、実行しているスクリプトの中からclose nightmateを出力します.
Nightmateの原理
Electronが提供するBrowserの環境を利用して、Node.jsのI/O能力を備えていますので、爬虫応用を簡単に実現できます.Nightmateの公式サイトにはもっと詳しい紹介があります.
大体の操作:

ブラウザ事件:goto、back、forward、refresh、

ユーザイベント:click、mousedown、mouseup、mouseover、type、insert、select、check、uncheck、selectscrollto

.ウェブページにスクリプトを注入する:js.cssのファイルタイプの原理はオイル猿と同じで、自分のjsコードを作成することができます.

wait関数は、遅延時間またはdom要素の出現に応じて

を行うことができる.

evaluateは、ブラウザの環境で実行されるスクリプト関数であり、プロミセ関数

に戻る.
完全なnightmate爬虫応用
上の話題をキャッチすることを応用シーンとして、必要なデータは、以下のフィールドの話題の名前/話題の画像/注目者の数/話題の数/精華の話題の数を含んでいますが、後の三者は父の話題にしか含まれないので、父の話題を先につかんでから話題をつかむ必要があります.また、これらのサブトピックは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ファイルを見に行きます.キャプチャとキャプチャの間隔が分かりにくいです.

//           
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)
  })

cherioはjQueryのselectorライブラリです.HTMLセグメントに適用され、対応する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/williamsta...
iKcampのオリジナル新書「モバイルWebフロントエンドの効率的な開発実戦」はアマゾン、京東ですでに発売されています.
>>沪江Webフロントエンド上海チームは、「Webフロントエンド構築師」を募集します[email protected]<<
申し込み先:http://www.huodongxing.com/ev...