快捷導(dǎo)航

Nodejs 搭建簡(jiǎn)單的Web服務(wù)器詳解及實(shí)例

更新時(shí)間：2016年11月30日 09:24:23 作者：一像素

這篇文章主要介紹了Nodejs 搭建簡(jiǎn)單的Web服務(wù)器詳解及實(shí)例的相關(guān)資料,并附實(shí)例代碼和實(shí)現(xiàn)效果圖，需要的朋友可以參考下

使用 Nodejs 搭建簡(jiǎn)單的Web服務(wù)器

使用Nodejs搭建Web服務(wù)器是學(xué)習(xí)Node.js比較全面的入門(mén)教程，因?yàn)橐瓿梢粋€(gè)簡(jiǎn)單的Web服務(wù)器，你需要學(xué)習(xí)Nodejs中幾個(gè)比較重要的模塊，比如：http協(xié)議模塊、文件系統(tǒng)、url解析模塊、路徑解析模塊、以及301重定向問(wèn)題，下面我們就簡(jiǎn)單講一下如何來(lái)搭建一個(gè)簡(jiǎn)單的Web服務(wù)器。

作為一個(gè)Web服務(wù)器應(yīng)具備以下幾個(gè)功能：

1、能顯示以.html/.htm結(jié)尾的Web頁(yè)面

2、能直接打開(kāi)以.js/.css/.json/.text結(jié)尾的文件內(nèi)容

3、顯示圖片資源

4、自動(dòng)下載以.apk/.docx/.zip結(jié)尾的文件

5、形如http://xxx.com/a/b/ , 則查找b目錄下是否有index.html,如果有就顯示，如果沒(méi)有就列出該目錄下的所有文件及文件夾，并可以進(jìn)一步訪問(wèn)。

6、形如http://xxx.com/a/b, 則作301重定向到http://xxx.com/a/b/ , 這樣可以解決內(nèi)部資源引用錯(cuò)位的問(wèn)題。

引入需要用到的幾個(gè)模塊：

//http協(xié)議模塊
var http = require('http');
//url解析模塊
var url = require('url');
//文件系統(tǒng)模塊
var fs = require("fs");
//路徑解析模塊
var path = require("path");

創(chuàng)建服務(wù)并在指定的端口監(jiān)聽(tīng)：

//創(chuàng)建一個(gè)服務(wù)
var httpServer = http.createServer(this.processRequest.bind(this));

//在指定的端口監(jiān)聽(tīng)服務(wù)
httpServer.listen(port,function(){
  console.log("[HttpServer][Start]","runing at http://"+ip+":"+port+"/");
  console.timeEnd("[HttpServer][Start]");
});

在創(chuàng)建服務(wù)的時(shí)候需要傳遞一個(gè)匿名函數(shù)processRequest 對(duì)請(qǐng)求進(jìn)行處理，processRequest接收2個(gè)參數(shù)，分別是request和response, request對(duì)象中包含了請(qǐng)求的所有內(nèi)容，response是用來(lái)設(shè)置響應(yīng)頭以及對(duì)客戶端做出響應(yīng)操作。

processRequest:function(request,response){
  var hasExt = true;
  var requestUrl = request.url;
  var pathName = url.parse(requestUrl).pathname;

  //對(duì)請(qǐng)求的路徑進(jìn)行解碼，防止中文亂碼
  pathName = decodeURI(pathName);

  //如果路徑中沒(méi)有擴(kuò)展名
  if(path.extname(pathName) === ''){
    //如果不是以/結(jié)尾的，加/并作301重定向
    if (pathName.charAt(pathName.length-1) != "/"){
      pathName += "/";
      var redirect = "http://"+request.headers.host + pathName;
      response.writeHead(301, {
        location:redirect
      });
      response.end();
    }
    //添加默認(rèn)的訪問(wèn)頁(yè)面,但這個(gè)頁(yè)面不一定存在,后面會(huì)處理
    pathName += "index.html";
    hasExt = false; //標(biāo)記默認(rèn)頁(yè)面是程序自動(dòng)添加的
  }

  //獲取資源文件的相對(duì)路徑
  var filePath = path.join("http/webroot",pathName);

  //獲取對(duì)應(yīng)文件的文檔類(lèi)型
  var contentType = this.getContentType(filePath);

  //如果文件名存在
  fs.exists(filePath,function(exists){
    if(exists){
      response.writeHead(200, {"content-type":contentType});
      var stream = fs.createReadStream(filePath,{flags:"r",encoding:null});
      stream.on("error", function() {
        response.writeHead(500,{"content-type": "text/html"});
        response.end("<h1>500 Server Error</h1>");
      });
      //返回文件內(nèi)容
      stream.pipe(response);
    }else { //文件名不存在的情況
      if(hasExt){
        //如果這個(gè)文件不是程序自動(dòng)添加的，直接返回404
        response.writeHead(404, {"content-type": "text/html"});
        response.end("<h1>404 Not Found</h1>");
      }else {
        //如果文件是程序自動(dòng)添加的且不存在，則表示用戶希望訪問(wèn)的是該目錄下的文件列表
        var html = "<head><meta charset='utf-8'></head>";

        try{
          //用戶訪問(wèn)目錄
          var filedir = filePath.substring(0,filePath.lastIndexOf('\\'));
          //獲取用戶訪問(wèn)路徑下的文件列表
          var files = fs.readdirSync(filedir);
          //將訪問(wèn)路徑下的所以文件一一列舉出來(lái)，并添加超鏈接，以便用戶進(jìn)一步訪問(wèn)
          for(var i in files){
            var filename = files[i];
            html += "<div><a href='"+filename+"'>"+filename+"</a></div>";
          }
        }catch (e){
          html += "<h1>您訪問(wèn)的目錄不存在</h1>"
        }
        response.writeHead(200, {"content-type": "text/html"});
        response.end(html);
      }
    }
  });
},

請(qǐng)求處理函數(shù)中有幾個(gè)重點(diǎn)需要說(shuō)一下：

對(duì)于路徑中有中文的，瀏覽器會(huì)自動(dòng)進(jìn)行編碼（英文不變，中文會(huì)變），因此在接收到地址后，需要對(duì)地址進(jìn)行解碼，否則最后得到的路徑和真實(shí)路徑不相符,

當(dāng)訪問(wèn)路徑不是以具體的文件結(jié)尾，并且不是以/結(jié)尾，則需要通過(guò)重定向加上/,表示當(dāng)前目錄，否則當(dāng)前路徑下的靜態(tài)資源會(huì)找不到

如果訪問(wèn)路徑是目錄，則列出該目錄下所有文件及文件夾，并可以點(diǎn)擊訪問(wèn)，為了讓中文目錄能正常顯示，則還要在header中設(shè)置charset=utf-8