Node配合WebSocket做多文件下载以及进度回传


Posted in Javascript onNovember 07, 2019

起因

为什么做这个东西,是突然间听一后端同事说起Annie这个东西,发现这个东西下载视频挺方便的,会自动爬取网页中的视频,然后整理成列表。发现用命令执行之后是下面的样子:

Node配合WebSocket做多文件下载以及进度回传

心里琢磨了下,整一个界面玩一下吧。然后就做成下面这个样子了。

列表

Node配合WebSocket做多文件下载以及进度回传

下载列表

Node配合WebSocket做多文件下载以及进度回传

本文地址仓库: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研究不深,敬请谅解^_^)

下载部分细节

Node配合WebSocket做多文件下载以及进度回传

首先浏览器会连接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的进度条回传是不会出现问题的。

Javascript 相关文章推荐
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
vue 实现单选框设置默认选中值
Nov 07 #Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 #Javascript
vue获取data数据改变前后的值方法
Nov 07 #Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 #Javascript
vue.js循环radio的实例
Nov 07 #Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 #Javascript
vue遍历对象中的数组取值示例
Nov 07 #Javascript
You might like
PHP系统流量分析的程序
2006/10/09 PHP
使用php来实现网络服务
2009/09/15 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
浅谈django中的认证与登录
2016/10/31 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
python实现三壶谜题的示例详解
2020/11/02 Python
公司合作意向书
2014/04/01 职场文书
公司应聘自荐书
2014/06/14 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2014年教学工作总结
2014/11/13 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python