node.js程序创建 http 静态web服务器

conanma

发布于 2022-01-05 18:51:42

1.4K0

发布于 2022-01-05 18:51:42

文章被收录于专栏：正则

http静态web服务器

这里的http静态服务器是指创建静态网站，并且通过node.js创建静态web服务器来向客户端提供服务。一个静态web服务器的例子就是Apache，只需要把网站相关的html，css，javascript，jpg等静态资源放到Apache的目录下，只需要访问主机名就可以显示网页了。

这里面我们可以看到，静态网站资源包括：

html文件
css文件
javascript文件

实际情况是，除了这三类主要文件，大部分网站资源还包括图片文件，音频文件，压缩文件，字体文件等等。

而静态网站的web服务器需要提供

http服务，可以对于客户端提交的http请求，返回静态页面以及静态页面所需要使用的资源。假设需要访问index.html页面，那么该页面中使用到的图片文件，css风格文件，javascript文件都需要返回给客户端的浏览器用以展示。如果在程序中只返回了html文件，那么浏览器将无法显示关联的图片，响应的css效果，javascript效果也无法展示。
http端口，用于监听客户端提交的http请求，上面Apache使用的就是80端口。各个web服务器都支持端口的配置，那我们node.js也不例外，可以在程序中实现
状态码：对于每一个客户端请求，在返回页面的同时，web服务器会返回一个状态码。请求处理成功的状态码是 200，而 404 则表示访问的文件或者资源不存在。

HTTP Header 中的 Content-Type

node.js 08 代码创建 http 静态web服务器

http header

上图是访问某网站时的http response header。我们可以看到这次的状态码 status code 是 200，表示请求处理成功。在返回的 response headers 里面有一个Content-Type，这里面的值是"text/html;charset=utf-8"。

text/html：表示返回页面的格式是html，页面在浏览器中以html的形式显示。
charset: 返回页面的字符集

有时候返回页面的格式如果是"text/plain"，表示页面将以纯本文的形式来展示。

这些格式统称为 MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

根据不同文件类型，需要在http headers中的Content-Type里面写入对应的值。

具体可以在node.js中定义一个常量，通过键值对的方式根据文件后缀名来获得Content-Type。

const mimeType = {  
  '.ico': 'image/x-icon',  
  '.html': 'text/html',  
  '.js': 'text/javascript',  
  '.json': 'application/json',  
  '.css': 'text/css',  
  '.png': 'image/png',  
  '.jpg': 'image/jpeg',  
  '.wav': 'audio/wav',  
  '.mp3': 'audio/mpeg',  
  '.svg': 'image/svg+xml',  
  '.pdf': 'application/pdf',  
  '.zip': 'application/zip',  
  '.doc': 'application/msword',  
  '.eot': 'application/vnd.ms-fontobject',  
  '.ttf': 'application/x-font-ttf',  
};

上面的代码基本可以满足一个静态网站所需要的资源类型的定义。

代码逻辑以及实现

通过node.js 创建http server
解析url
通过访问路径判断文件或者目录是否存在，如果不存在，则返回错误状态码 404
如果访问路径为目录，则返回文件路径index.html
根据请求路径在response中写入文件内容，同时根据资源类型设定Conten-type。

上面逻辑中所有跟文件处理，目录处理相关的代码都需要通过node.js中的fs模块的调用来实现，详见 node.js 07 文件操作。

具体代码段如下：

http.createServer(function (req, res) {  
  // 调用url模块来解析访问的url  
  const parsedUrl = url.parse(req.url);  
  
  // 提取路径  
  const sPath = path.normalize(parsedUrl.pathname).replace(/^(\.\.[\/\\])+/, '');  
  let pathname = path.join(__dirname, sPath);  
//判断路径是否存在  
  fs.exists(pathname, function (exist) {  
    if(!exist) {  
      //如果路径不存在，则返回404  
      res.statusCode = 404;  
      res.end(`File ${pathname} not found!`);  
      return;  
    }  
  
    // 如果路径是目录，则将路径替换为目录下的 index.html  
    if (fs.statSync(pathname).isDirectory()) {  
      pathname += '/index.html';  
    }  
  
    // 根据路径读取文件，此处调用fs模块方法  
    fs.readFile(pathname, function(err, data){  
      if(err){  
        res.statusCode = 500;  
        res.end(`Error getting the file: ${err}.`);  
      } else {  
        // 获取路径后缀名  
        const ext = path.parse(pathname).ext;  
        // 根据后缀名获取响应的content-type; 这里的minType定义见上面的代码块  
        res.setHeader('Content-type', mimeType[ext] || 'text/plain' );  
        //通过end方法来结束response  
        res.end(data);  
      }  
    });  
  });  
//提供http端口监听  
}).listen(8001);

这样一个http静态web服务器的代码就完成了，非常轻便，跟很多语言比起来，可谓是很精悍了。本文参考原文-http://bjbsair.com/2020-03-22/tech-info/2821/ 首先我们会介绍http静态web服务器需要实现哪些需求，接下来我们会从node.js出发，介绍所需要的模块。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

node.js

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

node.js

作者已关闭评论

0 条评论

热度