Node配合WebSocket做多文件下载以及进度回传
起因
为什么做这个东西,是突然间听一后端同事说起Annie这个东西,发现这个东西下载视频挺方便的,会自动爬取网页中的视频,然后整理成列表。发现用命令执行之后是下面的样子:
心里琢磨了下,整一个界面玩一下吧。然后就做成下面这个样子了。
列表
下载列表
本文地址仓库:https://github.com/Rynxiao/yh-tools,如果喜欢,欢迎star.
涉及技术
- Express 后端服务
- Webpack 模块化编译工具
- Nginx 主要做文件gzip压缩(发现Express添加gzip有点问题,才弃坑nginx)
- Ant-design 前端UI库
- React + React Router
- WebSocket 进度回传服务
其中还有点小插曲,最开始是使用docker
起了一个nginx
服务,但是发现内部转发一直有问题,同时获取宿主主机IP也出现了点问题,然后折磨了好久放弃了。(docker
研究不深,敬请谅解_)
下载部分细节
首先浏览器会连接WebSocket
服务器,同时在WebSocket
服务器上存在一个所有客户端的Map,浏览器端生成一个uuid
作为浏览器客户端id
,然后将这个链接作为值存进Map中。
客户端:
// list.jsx
await WebSocketClient.connect((event) => {
const data = JSON.parse(event.data);
if (data.event === 'close') {
this.updateCloseStatusOfProgressBar(list, data);
} else {
this.generateProgressBarList(list, data);
}
});
// src/utils/websocket.client.js
async connect(onmessage, onerror) {
const socket = this.getSocket();
return new Promise((resolve) => {
// ...
});
}
getSocket() {
if (!this.socket) {
this.socket = new WebSocket(
`ws://localhost:${CONFIG.PORT}?from=client&id=${clientId}`,
'echo-protocol',
);
}
return this.socket;
}
服务端:
// public/javascript/websocket/websocket.server.js
connectToServer(httpServer) {
initWsServer(httpServer);
wsServer.on('request', (request) => {
// uri: ws://localhost:8888?from=client&id=xxxx-xxxx-xxxx-xxxx
logger.info('[ws server] request');
const connection = request.accept('echo-protocol', request.origin);
const queryStrings = querystring.parse(request.resource.replace(/(^\/|\?)/g, ''));
// 每有连接连到websocket服务器,就将当前连接保存到map中
setConnectionToMap(connection, queryStrings);
connection.on('message', onMessage);
connection.on('close', (reasonCode, description) => {
logger.info(`[ws server] connection closed ${reasonCode} ${description}`);
});
});
wsServer.on('close', (connection, reason, description) => {
logger.info('[ws server] some connection disconnect.');
logger.info(reason, description);
});
}
然后在浏览器端点击下载的时候,会传递两个主要的字段resourceId
(在代码中由parentId
和childId
组成)和客户端生成的bClientId
。这两个id
有什么用呢?
- 每次点击下载,都会在
Web
服务器中生成一个WebSocket
的客户端,那么这个resouceId
就是作为在服务器中生成的WebSocket
服务器的key
值。 bClientId
主要是为了区分浏览器的客户端,因为考虑到同时可能会有多个浏览器接入,这样在WebSocket
服务器中产生消息的时候,就可以用这个id
来区分应该发送给哪个浏览器客户端
客户端:
// list.jsx
http.get(
'download',
{
code,
filename,
parent_id: row.id,
child_id: childId,
download_url: url,
client_id: clientId,
},
);
// routes/api.js
router.get('/download', async (req, res) => {
const { code, filename } = req.query;
const url = req.query.download_url;
const clientId = req.query.client_id;
const parentId = req.query.parent_id;
const childId = req.query.child_id;
const connectionId = `${parentId}-${childId}`;
const params = {
code,
url,
filename,
parent_id: parentId,
child_id: childId,
client_id: clientId,
};
const flag = await AnnieDownloader.download(connectionId, params);
if (flag) {
await res.json({ code: 200 });
} else {
await res.json({ code: 500, msg: 'download error' });
}
});
// public/javascript/annie.js
async download(connectionId, params) {
//...
// 当annie下载时,会进行数据监听,这里会用到节流,防止进度回传太快,websocket服务器无法反应
downloadProcess.stdout.on('data', throttle((chunk) => {
try {
if (!chunk) {
isDownloading = false;
}
// 这里主要做的是解析数据,然后发送进度和速度等信息给websocket服务器
getDownloadInfo(chunk, ws, params);
} catch (e) {
downloadSuccess = false;
WsClient.close(params.client_id, connectionId, 'download error');
this.stop(connectionId);
logger.error(`[server annie download] error: ${e}`);
}
}, 500, 300));
}
服务端收到进度以及速度的消息后,回传给客户端,如果进度达到了100%,那么就删除掉存在server
中的服务器中起的websocket
的客户端,并且发送一个客户端被关闭的通知,通知浏览器已经下载完成。
// public/javascript/websocket/websocket.server.js
function onMessage(message) {
const data = JSON.parse(message.utf8Data);
const id = data.client_id;
if (data.event === 'close') {
logger.info('[ws server] close event');
closeConnection(id, data);
} else {
getConnectionAndSendProgressToClient(data, id);
}
}
function getConnectionAndSendProgressToClient(data, clientId) {
const browserClient = clientsMap.get(clientId);
// logger.info(`[ws server] send ${JSON.stringify(data)} to client ${clientId}`);
if (browserClient) {
const serverClientId = `${data.parent_id}-${data.child_id}`;
const serverClient = clientsMap.get(serverClientId);
// 发送从web服务器中传过来的进度、速度给浏览器
browserClient.send(JSON.stringify(data));
// 如果进度已经达到了100%
if (data.progress >= 100) {
logger.info(`[ws server] file has been download successfully, progress is ${data.progress}`);
logger.info(`[ws server] server client ${serverClientId} ready to disconnect`);
// 从clientsMap将当前的这个由web服务器创建的websocket客户端移除
// 然后关闭当前连接
// 同时发送下载完成的消息给浏览器
clientsMap.delete(serverClientId);
serverClient.send(JSON.stringify({ connectionId: serverClientId, event: 'complete' }));
serverClient.close('download completed');
}
}
}
整体来说就这么多,有一点需要指出,annie
在解析的时候有时候可能消息处理不是很稳定,导致我数据解析的时候出现了一些问题,但是我用mock
的数据以及mock
的进度条回传是不会出现问题的。
最后总结
多读书,多看报,少吃零食,多睡觉
Node配合WebSocket做多文件下载以及进度回传的更多相关文章
- Android中使用AsyncTask实现文件下载以及进度更新提示
Android提供了一个工具类:AsyncTask,它使创建需要与用户界面交互的长时间运行的任务变得更简单.相对Handler来说AsyncTask更轻量级一些,适用于简单的异步处理,不需要借助线程和 ...
- node.js Websocket实现扫码二维码登录---GoEasy
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...
- node.js Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...
- python 全栈开发,Day36(作业讲解(大文件下载以及进度条展示),socket的更多方法介绍,验证客户端链接的合法性hmac,socketserver)
先来回顾一下昨天的内容 黏包现象粘包现象的成因 : tcp协议的特点 面向流的 为了保证可靠传输 所以有很多优化的机制 无边界 所有在连接建立的基础上传递的数据之间没有界限 收发消息很有可能不完全相 ...
- Node.js+websocket+mongodb实现即时聊天室
ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- 036_python的大文件下载以及进度条展示
复习 1.黏包现象 粘包现象的成因: tcp协议的特点,面向流的,为了保证可靠传输,所以有很多优化的机制. 无边界 所有在连接建立的基础上传递的数据之间没有界限. 收发消息很有可能不完全相等. 缓存机 ...
- Android文件下载之进度检测
近期因为项目的需要,研究了一下Android文件下载进度显示的功能实现,接下来就和大家一起分享学习一下,希望对广大初学者有帮助. 先上效果图: 上方的蓝色进度条,会根据文件下载量的百分比进行加载,中部 ...
- 借助node实战WebSocket
一.WebSocket概述 WebSocket协议,是建立在TCP协议上的,而非HTTP协议. 如下: ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求. 注:w ...
随机推荐
- POJ 2431——Expedition(贪心,优先队列)
链接:http://poj.org/problem?id=2431 题解 #include<iostream> #include<algorithm> #include< ...
- 一个PHP文件搞定微信H5支付
/ 更新于 2018-07-02 / 8 条评论 过年期间也坚持要撸码啊接着给博客除草,在这个小除夕是情人节的一天,祝大家新年快乐,情人节能够顺利脱单~~~ 回归正题,这篇文章介绍一下微信H5支付, ...
- Step ‘Publish JUnit test result report’ failed: No test report files were found问题解决
1. 查看配置 2.路径设置错误,修改路径和path一致即可 修改后的测试报告路径 重新构建成功
- 关于jQery中$.Callbacks()的理解
$.Callbacks()主要使用了回调,而说到回调又不得不说javascript的事件循环机制了. 所以想了解回调最好先看看js运行机制. $.Callbacks()可以理解为创建一个回调队列 va ...
- Ubuntu16.04安装java6(jdk 1.6)
目录 下载安装包 安装 移动到指定位置并设置版本 设置环境变量 切换java版本 下载安装包 先到官网下载安装包. 安装 输入命令 chmod 777 jdk-6u45-linux-x64.bin s ...
- linux系统下使用宝塔面板安装owncloud常见问题
在安装owncloud时出现 无法写入“config”目录! 解决方法 在宝塔面板,找到owncloud根目录,点击"权限“设置权限 将权限设置为777,应用到子目录打勾(如下图) 确定后再 ...
- Vue-CLI项目快速UI布局-element-ui
0902自我总结 Vue-CLI项目快速UI布局-element-ui 一.element-ui的地址 https://element.eleme.cn/ 二.element-ui的安装 <!- ...
- Java8两大特性(一)——Stream
什么是Stream? Stream(流)是一个来自数据源的元素队列并且支持聚合操作,元素流在管道中经过中间操作,最终操作得到结果. 数据源:集合,数组,I/O channel,产生器generator ...
- 19.Linux进程管理概述
1.进程基本概述 当我们运行一个程序,那么我们将运行的程序叫进程. PS1: 当程序运行为进程后,系统会为该进程分配内存,以及进程运行的身份和权限. PS2: 在进程运行的过程中,服务器上会有各种状态 ...
- Juc1024小半年总结-面试篇
大家好,我叫Juc 这大概是我时隔2年度多 第一次以分享的形式发的第一篇公众号 今天是2019年10月26 本想在10月24就分享一下 可惜前面两天时间太忙... 很凑巧,今天我出来工作刚好满4个月, ...