快捷導(dǎo)航

Node.js搭建WEB服務(wù)器的示例代碼

更新時(shí)間：2018年08月15日 08:25:43 作者：霖哲煌

這篇文章主要介紹了Node.js搭建WEB服務(wù)器的示例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

這幾天為了熟悉vue.js框架，還有webpack的使用，就準(zhǔn)備搭建一個(gè)發(fā)布和瀏覽markdwon的簡(jiǎn)單WEB應(yīng)用。原本是想著用bash腳本和busybox的httpd來(lái)作為后臺(tái)服務(wù)，但是bash腳本解析和生成JSON非常不方便，而用Java語(yǔ)言寫又覺(jué)得部署不方便，所以就想到了正在用到的Node.js，于是就有了這篇博文。（文末有本文代碼的github地址）

簡(jiǎn)單例子

首先，從搭建最簡(jiǎn)單的 Hello world 開(kāi)始，建立以下目錄、文件和內(nèi)容。

建立項(xiàng)目及運(yùn)行

project

web-server
+ | - server.js

server.js

const http = require('http');

http.createServer(function(request, response) {
 // 設(shè)置響應(yīng)頭
 response.writeHeader(200, {
  "Content-Type" : "text/plain"
 });
 // 響應(yīng)主體為 "Hello world!"
 response.write("Hello world!");
 response.end();
})
// 設(shè)置監(jiān)聽(tīng)端口為9000
.listen(9000);

現(xiàn)在，在項(xiàng)目目錄運(yùn)行下面命令來(lái)執(zhí)行 server.js ，瀏覽器地址欄中輸入 localhost:9000 ，如果一切訪問(wèn)都正常，瀏覽器就會(huì)顯示 Hello world! 。

node server.js

提示：使用 ctrl+c 停止腳本運(yùn)行。

至此一個(gè)簡(jiǎn)單例子就運(yùn)行成功了，下面來(lái)分析一下代碼。

代碼分析

首先， server.js 中引入了Node.js的 http模塊，它提供了非常底層HTTP API支持。這里使用 createServer() 方法，它返回一個(gè) http.server 實(shí)例，使用該實(shí)例的 listen() 方法來(lái)設(shè)置監(jiān)聽(tīng)端口。

方法 createSever() 中填寫的參數(shù)是一個(gè)函數(shù)，該函數(shù)會(huì)作為回調(diào)函數(shù)自動(dòng)添加到 request事件去，其參數(shù)類型分別為 http.IncomingMessage 和 http.ServerResponse 。在回調(diào)函數(shù)體里，利用 http.ServerResponse 的方法設(shè)置了響應(yīng)頭和響應(yīng)主體，最后以 end() 方法結(jié)束本次請(qǐng)求。

路由功能

上述的例子僅僅實(shí)現(xiàn)了簡(jiǎn)單請(qǐng)求響應(yīng)功能，現(xiàn)在增加路由的功能來(lái)健壯我們的WEB服務(wù)器?，F(xiàn)在，修改為以下的目錄、文件和內(nèi)容。

實(shí)現(xiàn)簡(jiǎn)單路由

project

web-server
 | - server.js
+ | - router.js

server.js

const http = require('http');
const router = require('./router.js');

function handleHello(request, response) {
 // 設(shè)置響應(yīng)頭
 response.writeHeader(200, {
  "Content-Type" : "text/plain"
 });
 // 響應(yīng)主體為 "Hello world!"
 response.write("Hello world!");
 response.end();
}

http.createServer(function(request, response) {
 // 注冊(cè)路徑和其對(duì)應(yīng)回調(diào)函數(shù)
 router.register(request, response, [
  {
   'url': '/hello',
   'handler': handleHello
  }
 ]);
})
// 設(shè)置監(jiān)聽(tīng)端口為9000
.listen(9000);

router.js

const url = require('url');

exports.register = function(request, response, mapping) {
 // 解析請(qǐng)求路徑
 var pathName = url.parse(request.url).pathname;
 // 執(zhí)行相應(yīng)請(qǐng)求路徑的回調(diào)函數(shù)
 for(let i = 0, len = mapping.length;i < len;i++) {
  if(mapping[i].url === pathName) {
   mapping[i].handler(request, response);
   return;
  }
 }
 // 請(qǐng)求路徑不存在返回404頁(yè)面
 response.writeHeader(404, {
  "Content-Type" : "text/html"
 });
 response.end(`
  <html>
   <head>
    <title>NOT FOUND</title>
   </head>
   <body>
    <h1>404 NOT FOUND</h1>
   </body>
  </html>
 `);
}

現(xiàn)在，再次執(zhí)行 server.js 腳本，接著瀏覽器訪問(wèn) localhost:9000\hello 會(huì)得到 Hello world! 的結(jié)果，而訪問(wèn)其他路徑則會(huì)得到404頁(yè)面。

這個(gè)功能的核心實(shí)現(xiàn)是在 router.js 中，通過(guò)請(qǐng)求路徑的解析，然后根據(jù)預(yù)先注冊(cè)好的 mapping 數(shù)組，找到與之對(duì)應(yīng)的路徑并執(zhí)行相應(yīng)的回調(diào)函數(shù)。

靜態(tài)資源請(qǐng)求

當(dāng)前的路由功能只能實(shí)現(xiàn)回調(diào)函數(shù)的執(zhí)行，而一個(gè)WEB服務(wù)器應(yīng)具有響應(yīng)靜態(tài)資源請(qǐng)求的能力，接下我們繼續(xù)來(lái)改造它?，F(xiàn)在，保持 server.js 內(nèi)容不變，只改變 router.js 中的內(nèi)容（部分代碼內(nèi)容省略）。

route.js

const url = require('url');
const path = require('path');
const fs = require('fs');

function getErrorInfo(errorType) {
 // 省略代碼
}

function writeErrorPage(response, errorType) {
 // 省略代碼
}

exports.register = function(request, response, mapping) {
 // 解析請(qǐng)求路徑
 var pathName = url.parse(request.url).pathname;
 // 執(zhí)行相應(yīng)請(qǐng)求路徑的回調(diào)函數(shù)
 for(let i = 0, len = mapping.length;i < len;i++) {
  if(mapping[i].url === pathName) {
   mapping[i].handler(request, response);
   return;
  }
 }
 // 請(qǐng)求路徑為文件返回文件內(nèi)容
 var file = path.resolve(__dirname, '.' + pathName);
 fs.exists(file, function(exists) {
  // 請(qǐng)求路徑不存在返回404頁(yè)面
  if(!exists) {
   writeErrorPage(response, 'NOT_FOUND');
  }
  else {
   var stat = fs.statSync(file);
   // 請(qǐng)求路徑為目錄返回403頁(yè)面
   if(stat.isDirectory()) {
    writeErrorPage(response, 'FORBIDDEN');
   }
   else {
    response.writeHeader(200, {
     "Content-Type" : "text/html"
    });
    response.end(
     fs.readFileSync(file, 'utf-8')
    );
   }
  }
 });
}

將靜態(tài)資源請(qǐng)求的行為置后的設(shè)計(jì)，是為了保證回調(diào)函數(shù)一定能執(zhí)行。當(dāng)靜態(tài)資源不存在時(shí)，應(yīng)當(dāng)返回不存在的錯(cuò)誤，同時(shí)也設(shè)置了禁止目錄的訪問(wèn)的規(guī)則。

后話

現(xiàn)在，只是實(shí)現(xiàn)了WEB服務(wù)器基本的功能，它還有很大的改進(jìn)空間。我將項(xiàng)目開(kāi)源到 github 上，有興趣的可以克隆下來(lái)。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: