在抓取數(shù)據(jù)時，過程是非常緩慢的锥债，需要使用進度條來不讓用戶發(fā)瘋捻艳。
前堤
- 在抓取數(shù)據(jù)過程會非常緩慢秸讹，需要給頁面加個進度條；
- 如果同一個時間只有抓取一個公司的數(shù)據(jù)棋蚌，那太浪費Node高并發(fā)性了嫁佳。
解決方案：
- 使用socket.io來進行長連接。
- 在遮掩層有叉關(guān)閉按鍵谷暮，用戶可以抓取其他公司的數(shù)據(jù)蒿往。
本文內(nèi)容
- 項目需要的庫與技術(shù)
- 提交方案
- Socket長連接設(shè)計
- 運行項目
- 參考網(wǎng)站
- 展望
1.項目需要的庫與技術(shù)
技術(shù)棧: Node.js, React, Socket.io
服務(wù)端所需的庫: socket.io
客戶端所需的庫: socket.io-client
2.提交方案
- 進度條設(shè)計，在產(chǎn)品主頁坷备，會有一個數(shù)據(jù)記錄總頁數(shù)html元素(或js變量)熄浓，這個總頁數(shù)必須會有的，要不它也無法做數(shù)據(jù)分頁省撑。(進度條總數(shù)論情況而定-下載文件或上傳文件另論）赌蔑；每一次抓取過程，服務(wù)端向客戶端發(fā)送一個socket請求竟秫。
- 多個公司同時抓取娃惯，數(shù)據(jù)返回通過數(shù)據(jù)庫聯(lián)合控制，前端使用延時操作+socket來得到數(shù)據(jù)是否已經(jīng)抓取完成并保存到數(shù)據(jù)庫肥败。
- 前端控制不同公司趾浅，不同的公司的長連接都在同一個頁面完成愕提，采用方法是一樣，要分辨不同的操作皿哨。要設(shè)置一個state來控制浅侨。
3.Socket長連接設(shè)計
- 服務(wù)端
//index.js
import express from 'express';
const app = express();
export const server = require('http').createServer(app);
export const io = require('socket.io')(server);
//進度條 js
import { io } from '../index';
const adminNamespace = io.of(companyName); //打開compnayName命令空間
//barTotalTime為總量, currentBar為當時進度
adminNamespace.emit('news', JSON.stringify({ total: barTotalTime, current: currentBar }));
//抓取完時，關(guān)閉這個長連接
adminNamespace.on('connection', (socket) => {
setTimeout(() => socket.disconnect(true), 1000);
});
- 客戶端
import io from 'socket.io-client';
//根據(jù)用戶輸入來創(chuàng)建命令空間
let socket = io(`http://localhost:8787/${companyName}`);
//獲取到數(shù)據(jù)证膨，進行操作
await this.state.socketIO.on('news', (data) => { ...})
//在客戶端關(guān)閉長連接
this.state.socketIO.close();
4. 運行項目
-
下面將示例抓取z和zhenchen公司：
5.參考網(wǎng)站
- 上傳進度條設(shè)計：https://heartsuit.github.io/2017/04/28/File-Upload-and-Download-with-Progress.html
- 了解簡單的流程：https://medium.com/dailyjs/combining-react-with-socket-io-for-real-time-goodness-d26168429a34
- 什么都有：https://socket.io/
6.展望
- 在前端設(shè)計state控制socket如输，設(shè)計成字符串類型，沒設(shè)計成array央勒，這沒法進行redux管理不见；前端能強制關(guān)閉socket長連接，不得利于安全崔步。
- 后端與前端還細節(jié)處理方面還需要優(yōu)化...
