摘要：前提本項(xiàng)目地址如果需要，可以到本地打開(kāi)可直接查看爬蟲(chóng)數(shù)據(jù)目標(biāo)爬取斗魚(yú)正在直播的主播數(shù)據(jù)房間號(hào)，在線(xiàn)人數(shù)，房間標(biāo)題，主播名稱(chēng)，直播分類(lèi)等等依賴(lài)構(gòu)建安裝包的應(yīng)用程序框架小型漸進(jìn)式客戶(hù)端請(qǐng)求庫(kù)，和模塊具有相同的，具有許多高級(jí)客戶(hù)端功能可以

本項(xiàng)目github地址：https://github.com/janyin/dou...
如果需要，可以clone到本地

$ npm install --save

$ node app

打開(kāi)http://localhost:3030/index.html 可直接查看爬蟲(chóng)數(shù)據(jù)

爬取斗魚(yú)正在直播的主播數(shù)據(jù)（房間號(hào)，在線(xiàn)人數(shù)，房間標(biāo)題，主播名稱(chēng)，直播分類(lèi)等等）

安裝npm包express+superagent+cheerio

$ npm install express superagent cheerio --save

express:Node.js的Web應(yīng)用程序框架

superagent:小型漸進(jìn)式客戶(hù)端HTTP請(qǐng)求庫(kù)，和Node.js模塊具有相同的API，具有許多高級(jí)HTTP客戶(hù)端功能

cheerio:可以理解為一個(gè)Node.js版本的jquery，用來(lái)從網(wǎng)頁(yè)中以 css selector取數(shù)據(jù)，使用方式和jquery基本相同

const express = require("express");
const superagent = require("superagent");
const cheerio = require("cheerio");
const app = express();

const url = "https://www.douyu.com/directory/all";
const rooturl = "https://www.douyu.com";

rooturl是斗魚(yú)首頁(yè),url是斗魚(yú)全部直播間第一頁(yè),rooturl后面直播間地址數(shù)據(jù)要用到

用superagent發(fā)送get請(qǐng)求到斗魚(yú)，回調(diào)函數(shù)接受到的數(shù)據(jù)給cheerio解析，這樣就可以用jquery選擇器進(jìn)行操作

使用cheerio.load()解析

打開(kāi)斗魚(yú)，發(fā)現(xiàn)其直播列表均在id為live-list-contentbox的ul里,用jquery選擇器獲取所有l(wèi)i并遍歷

在li里尋找到我們需要的數(shù)據(jù),最后push到data里

app.get("/", function (req, response) { // 聲明get請(qǐng)求在指定的路徑下調(diào)用相應(yīng)的回調(diào)函數(shù)
   let data = [];//存放獲取的數(shù)據(jù)
   superagent.get(url).end(function (err, res) {//發(fā)起get請(qǐng)求
       if (err) {
           console.log(err);
       } else {
           console.log("狀態(tài)碼：" + res.status);
           let $ = cheerio.load(res.text);//使用cheerio解析數(shù)據(jù)
           $("#live-list-contentbox li").each(function (i, ele) { //獲取目標(biāo)數(shù)據(jù) 并遍歷存放到data中
               let href = rooturl + $(ele).find("a.play-list-link").attr("href");//href是存放的直播間id，加rooturl生成直播間鏈接
               let lives = {
                   name: $(ele).find("span.dy-name").text(),
                   num: $(ele).find("span.dy-num").text(),
                   title: $(ele).find(".mes-tit>h3").text().trim(),
                   links: href,//直播間鏈接
               };
               data.push(lives);
           })
       }
       response.send(data);//目標(biāo)數(shù)據(jù)發(fā)送給前端

})

app.listen(3030, function () {
    console.log("server is listening port 3030....");
})

最后node這個(gè)項(xiàng)目，打開(kāi)http://localhost:3000/ 得到我們需要的數(shù)據(jù)

以上全部代碼在first.js里. 爬蟲(chóng)數(shù)據(jù)部分結(jié)果：

思考：這只是斗魚(yú)第一頁(yè)主播的數(shù)據(jù)，如果是100頁(yè)的數(shù)據(jù)，或者全部呢？
這時(shí)候就需要async,不可能同步發(fā)100個(gè)請(qǐng)求，容易被誤以為惡意攻擊

Async提供了直接,強(qiáng)大的函數(shù)來(lái)處理異步JavaScript,雖然最初設(shè)計(jì)用于Node.js，但它也可以直接在瀏覽器中使用

$ npm install async --save

100個(gè)頁(yè)面可以先獲取100個(gè)相應(yīng)的url，但是發(fā)現(xiàn)斗魚(yú)切換到第二頁(yè)的時(shí)候其url并沒(méi)有改變，
通過(guò)chrome devtools發(fā)現(xiàn)在切換頁(yè)面時(shí)的ajax請(qǐng)求。

發(fā)現(xiàn)ajax請(qǐng)求的url是https://www.douyu.com/gapi/rk... ,后面加的/2就是相應(yīng)的頁(yè)數(shù)（這里是第二頁(yè)）

const express = require("express");
const superagent = require("superagent");
const async = require("async");

const app = express();
const rooturl = "https://www.douyu.com/gapi/rkc/directory/0_0";

function geturls(num) {
    let href = [];
    let urls = [];
    for (let i = 1; i <= num; i++) {
        href.push("/" + i);
    }
    href.forEach(function (ele) {
        urls.push(rooturl + ele);
    })
    return urls;
}

傳進(jìn)去的num是多少，返回的url就有多少

app.get("/data", function (req, res) {
    let urls = geturls(100); //獲取100個(gè)url
    let datas = []; //存放目標(biāo)數(shù)據(jù)
    async.mapLimit(urls,25,function (url, callback) { //異步發(fā)送請(qǐng)求
        fetchPage(url, callback);//分析數(shù)據(jù)并提取
    }, function (err, result) {
        console.log("分析完成！");
        res.send(datas);//發(fā)送數(shù)據(jù)給前端
    });
})

async.mapLimit(coll, limit, iteratee, callback)

coll是迭代的集合，就是數(shù)組存放需要發(fā)送請(qǐng)求的url

limit一次最大異步操作數(shù)

一個(gè)異步函數(shù)，用于應(yīng)用于每個(gè)項(xiàng)目 coll

callback可選,所有iteratee 函數(shù)完成或發(fā)生錯(cuò)誤時(shí)調(diào)用的回調(diào)。

ps:最后一個(gè)函數(shù)里result參數(shù)的數(shù)據(jù)和datas數(shù)組數(shù)據(jù)是一樣的，發(fā)送datas主要是方便后面頁(yè)面提取

function fetchPage(url, callback) {
        superagent.get(url).end(function (err, sres) {
            if (err) {
                console.log(err);
            } else {
                let item = JSON.parse(sres.text);//解析json數(shù)據(jù)
                let list = item.data.rl;
                list.forEach(function (ele) {//提取需要的數(shù)據(jù)
                    let obj = {
                        name: ele.nn,
                        id: ele.rid,
                        online: ele.ol,
                        title: ele.rn,
                        class: ele.c2name,
                    };
                    datas.push(obj);
                });
                callback(null, datas);//這個(gè)datas會(huì)發(fā)送給result
            }
        })
    }
})

因?yàn)閍jax請(qǐng)求直接返回的是json數(shù)據(jù)就不需要上面的cheerio解析

app.use(express.static("public"))

app.listen(3030, function () {
    console.log("server is listening port 3030....");
})

前端代碼在index.html里，主要是獲取數(shù)據(jù)遍歷輸出到表格，還有一個(gè)搜索功能（不建議搜索1W以上的數(shù)據(jù)，會(huì)很卡）

以上代碼均在app.js里