mini-http-server, 基于Node.js

在Windows本地调试静态网页时, file://的绝对路径根目录是系统盘的根目录, 并不是我们理想的根目录。

或者你在类似于Cloud Studio这样没有自己提供实时展示的网页IDE, 对于调试来说会比较麻烦。

这时, 你可能会想要安装一个http服务器来帮助你调试网页. 但是安装一个完整的http服务器太麻烦了.

Cloud Studio的网页IDE所提供的虚拟Ubuntu环境没有自带http服务器. Python拥有自带的http服务器, 但是对于Python一窍不通的我, 为了一个http服务器而安装Python会很麻烦. npm有一个http-server,但是它功能很多, 只是调试静态网页的并不需要太多的功能.

如果你像我一样, 那么, 你可以使用这样一个基于Node.js的小型http服务端.

这是源代码仓库链接：https://github.com/BovineBeta/mini-http-server.

console.time('start WebServer need time');
//请求模块 
var libHttp = require('http');  //HTTP协议模块 
var libUrl = require('url');    //URL解析模块 
var libFs = require("fs");      //文件系统模块 
var libPath = require("path");  //路径解析模块 
//依据路径获取返回内容类型字符串,用于http响应头 
var funGetContentType = function (filePath) {
    var contentType = "";
    
    //使用路径解析模块获取文件扩展名 
    var ext = libPath.extname(filePath);
    
    switch (ext) {
        case ".html":
            contentType = "text/html";
            break;
        case ".js":
            contentType = "text/javascript";
            break;
        case ".css":
            contentType = "text/css";
            break;
        case ".gif":
            contentType = "image/gif";
            break;
        case ".jpg":
            contentType = "image/jpeg";
            break;
        case ".png":
            contentType = "image/png";
            break;
        case ".ico":
            contentType = "image/icon";
            break;
        default:
            contentType = "application/octet-stream";
    }
    
    //返回内容类型字符串 
    return contentType;
}
//Web服务器主函数,解析请求,返回Web内容 
var funWebSvr = function (req, res) {
    //获取请求的url 
    var reqUrl = req.url;
    
    //向控制台输出请求的路径 
    console.log(reqUrl);
    
    //使用url解析模块获取url中的路径名 
    var pathName = libUrl.parse(reqUrl).pathname;    
    if (libPath.extname(pathName) == "") {
        //如果路径没有扩展名 
        pathName += "/"; //指定访问目录 
    }
    if (pathName.charAt(pathName.length - 1) == "/") {
        //如果访问目录 
        pathName += "index.html"; //指定为默认网页 
    }
    
    //使用路径解析模块,组装实际文件路径 
    var filePath = libPath.join("./WebRoot", pathName);
    
    //判断文件是否存在 
    libFs.exists(filePath, function (exists) {
        //文件存在
        if (exists) {
            //在响应头中写入内容类型 
            res.writeHead(200, { "Content-Type": funGetContentType(filePath) });
            
            //创建只读流用于返回 
            var stream = libFs.createReadStream(filePath, { flags: "r", encoding: null });
            
            //指定如果流读取错误,返回404错误 
            stream.on("error", function () {
                res.writeHead(404);
                res.end("<h1>404 Read Error</h1>");
            });
            
            //连接文件流和http返回流的管道,用于返回实际Web内容 
            stream.pipe(res);
        }
        else {
            //文件不存在，返回404错误 
            res.writeHead(404, { "Content-Type": "text/html" });
            res.end("<h1>404 Not Found</h1>");
        }
    });
}
//创建一个http服务器 
var webSvr = libHttp.createServer(funWebSvr);
//指定服务器错误事件响应 
webSvr.on("error", function (error) {
    //在控制台中输出错误信息 
    console.log(error); 
});
//设置端口号
var port = 1234;
//开始侦听端口 
webSvr.listen(port, function () {
    //向控制台输出服务启动的信息 
    console.log('WebServer running at http://127.0.0.1:' + port + '/');
    
    //关闭服务启动计时器
    console.timeEnd('start WebServer need time');
});

修改好端口与网站根目录后, 把它保存为.js文件. 把网页放在网站根目录之后就可以用Node运行它了.

$ node [你刚刚自定义的文件名].js

大功告成, 你再也不用烦恼绝对路径的问题了.

这是该文章的另一个作者:Water Moelon.