基于websocket设计一个文件传输助手网站

项目地址

http://www.huagecloud.top:8093/

初期目标------5/27

(htttp协议版本)利用nodejs（multer，express），Ajax实现页面初步的上传下载

掌握

multer(官网中文API)的使用：storage设置存储位置，上传文件预处理利用时间戳对文件的重命名

回顾express创建静态资源服务器：static的参数里写路径，目录名都行，都会对应到一个目录，在网页里这个目录名不需要带上，直接访问文件名即可；部署多个静态资源服务器，如果目录之间有同名文件，则按static执行顺序找，找到就停止，找不到就下一个

响应返回资源的设置：

//默认情况(响应头不调整的情况)
//相当于跳转，但实际是返回资源给浏览器显示
  res.sendFile(__dirname + "/index.html");
//区分
//下载所需响应头
  res.setHeader("Content-type", "application/octet-stream");
  //！！！响应头里不允许带中文
  res.setHeader("Content-Disposition", `attachment;filename=asd.jpg`);
  res.sendFile(__dirname + "/uploads/QQ图片20200621185630.jpg");

下载响应头说明补充链接

中期目标------5/30

仿照HTTP的文件上传下载改成websocket协议的版本

补充资料

socket.io官网的案例 https://socket.io/get-started/chat

socket.io emit方法支持文件传输的数据类型

前端上传文件的方法总结与利弊

准备工作，确定能编写websocket的工具------socket.io
仿照官网的案例，我们就可以很快的搭建一个websocket环境
我们实现文件传输就得确认如何从前端拿取数据，用什么数据类型进行存储，传输，这是整个项目的核心。基于api提供的emit方法和补充内容，socket是可以接收很多种类的参数，自然也包括文件，但限定一下几种类型Blob，ArrayBuffer，File
再了解前端通过input[type=file]的标签拿取文件数据的方式后，采用**fileReader**的方式，因为其余两种方式对HTTP的依赖性较强，websocket难以处理
数据到node服务端就到了上传步骤，就需要有能处理这种ArrayBuffer类型的工具：fs，path（fs负责将数据写入进文件，path处理文件的路径问题）
最大问题，fs.writeFile方法对写入数据类型会有限制：ArrayBuffer 不完全等于Buffer

解决办法就是类型转换https://blog.csdn.net/iningwei/article/details/100143603 let buffer = Buffer.from(arraybuffer)//ArrayBuffer 转 Buffer
写入成功执行其回调函数时，我们就可以提供对应的下载链接给前端，借助服务端的下载接口完成下载（借助http协议去实现下载，因为下载是属于用户自身需求，不需要共享）
后续问题，对1M以上的文件无法上传