当你输入一个url时，这个url可能对应服务器上的一个资源（文件）也可能对应一个目录。 So服务器会对这个url进行分析，针对不同的情况做不同的事。 如果这个url对应的是一个文件，那么服务器就会返回这个文件。 如果这个url对应的是一个文件夹，那么服务器会返回这个文件夹下包含的所有子文件/子文件夹的列表。 以上，就是一个静态服务器所主要干的事。
但真实的情况不会像这么简单， 我们所拿到的url可能是错误的，它所对应的文件或则文件夹或许根本不存在， 又或则有些文件和文件夹是被系统保护起来的是隐藏的，我们并不想让客户端知道。 因此，我们就要针对这些特殊情况进行一些不同的返回和提示。
再者，当我们真正返回一个文件前，我们需要和客户端进行一些协商。 我们需要知道客户端能够接受的语言类型、编码方式等等以便针对不同浏览器进行不同的返回处理。 我们需要告诉客户端一些关于返回文件的额外信息，以便客户端能更好的接收数据： 文件是否需要缓存，该怎样缓存？ 文件是否进行了压缩处理，该以怎样的方式解压？ 等等...
至此，我们已经初步了解了一个静态服务器所主要做的几乎所有事情， let's go!
实现
项目目录
static-server/ | | - bin/ | | - start # 批处理文件 | | | - src/ | | - App.js # main文件 | | - Config.js # 默认配置 | | ·- package.json
配置文件
要启动一个服务器，我们需要知道这个服务器的启动时的端口号和静态服务器的工作目录
let config = { host:'localhost' //提升用 ,port:8080 //服务器启动时候的默认端口号 ,path:path.resolve(__dirname,'..','test-dir') //静态服务器启动时默认的工作目录 }
整体框架
注意
事件函数中的this默认指向绑定的对象（这里是小server），这里修改成了Server这个大对象，以便调用在回调函数中调用Server下的方法。
class Server(){ constructor(options){ /* === 合并配置参数 === */ this.config = Object.assign({},config,options) } start(){ /* === 启动http服务 === */ let server = http.createServer(); server.on('request',this.request.bind(this)); server.listen(this.config.port,()=>{ let url = `${this.config.host}:${this.config.port}`; console.log(`server started at ${chalk.green(url)}`) }) } async request(req,res){ /* === 处理客户端请求，决定响应信息 === */ // try //如果是文件夹 -> 显示子文件、文件夹列表 //如果是文件 -> sendFile() // catch //出错 -> sendError() } sendFile(){ //对要返回的文件进行预处理并发送文件 } handleCache(){ //获取和设置缓存相关信息 } getEncoding(){ //获取和设置编码相关信息 } getStream(){ //获取和设置分块传输相关信息 } sendError(){ //错误提示 } } module.exports = Server;
request请求处理
获取url的 pathname ，和 服务器本地的工作根目录地址 进行拼接，返回一个 filename 利用filename和 stat方法 检测是文件还是文件夹
是文件夹， 利用 readdir方法 返回该文件夹下的列表，将列表包装成一个对象组成的数组 然后结合handlebar将数组数据编译到模板中，最后返回这个模板给客户端
是文件， 将req、res、statObj、filepath传递给 sendFile ，接下来交由sendFile处理
async request(req,res){ let pathname = url.parse(req.url); if(pathname == '/favicon.ico') return; let filepath = path.join(this.config.root,pathname); try{ let statObj = await stat(filepath); if(statObj.isDirectory()){ let files = awaity readdir(filepath); files.map(file=>{ name:file ,path:path.join(pathname,file) }); // 让handlebar 拿着数去编译模板 let html = this.list({ title:pathname ,files }) res.setHeader('Content-Type','text/html'); res.end(html); }else{ this.sendFile(req,res,filepath,statObj); } }catch(e){ this.sendError(e,req,res); } }
[tip] 我们将 request 方法 async 化，这样我们就能像写同步代码一样写异步
方法
sendFile
涉及缓存、编码、分段传输等功能
sendFile(){ if(this.handleCache(req,res,filepath,statObj)) return; //如果走缓存，则直接返回。 res.setHeader('Content-type',mime.getType(filepath)+';charset=utf-8'); let encoding = this.getEncoding(req,res); //获取浏览器能接收的编码并选择一种 let rs = this.getStream(req,res,filepath,statObj); //支持断点续传 if(encoding){ rs.pipe(encoding).pipe(res); }else{ rs.pipe(res); } }
handleCache