使用Node.js原生API寫一個web服務器

Node.js是JavaScript基礎上發展起來的語言，因此前端開發者應該天生就會一點。通常咱們會用它來作CLI工具或者Web服務器，作Web服務器也有不少成熟的框架，好比Express和Koa。可是Express和Koa都是對Node.js原生API的封裝，因此其實不借助任何框架，只用原生API咱們也能寫一個Web服務器出來。本文要講的就是不借助框架，只用原生API怎麼寫一個Web服務器。由於在個人計劃中，後面會寫Express和Koa的源碼解析，他們都是使用原生API來實現的。因此本文實際上是這兩個源碼解析的前置知識，能夠幫咱們更好的理解Express和Koa這種框架的意義和源碼。本文僅爲說明原生API的使用方法，代碼較醜，請不要在實際工做中模仿！

本文可運行代碼示例已經上傳GitHub，你們能夠拿下來玩玩：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Node.js/HttpServer

Hello World

要搭建一個簡單的Web服務器，使用原生的http模塊就夠了，一個簡單的Hello World程序幾行代碼就夠了：

const http = require('http')

const port = 3000

const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain')
  res.end('Hello World')
})

server.listen(port, () => {
  console.log(`Server is running on http://127.0.0.1:${port}/`)
})

這個例子就很簡單，直接用http.createServer建立了一個服務器，這個服務器也沒啥邏輯，只是在訪問的時候返回Hello World。服務器建立後，使用server.listen運行在3000端口就行。

這個例子確實簡單，可是他貌似除了輸出一個Hello World以外，啥也幹不了，離咱們通常使用的Web服務器還差了很遠，主要是差了這幾塊：

1. 不支持HTTP動詞，好比GET，POST等
2. 不支持路由
3. 沒有靜態資源託管
4. 不能持久化數據

前面三點是一個Web服務器必備的基礎功能，第四點是否須要要看狀況，畢竟目前不少Node的Web服務器只是做爲一箇中間層，真正跟數據庫打交道作持久化的仍是各類微服務，可是咱們也應該知道持久化怎麼作。

因此下面咱們來寫一個真正能用的Web服務器，也就是說把前面缺的幾點都補上。

處理路由和HTTP動詞

前面咱們的那個Hello World也不是徹底不能用，由於代碼位置仍是得在http.createServer裏面，咱們就在裏面添加路由的功能。爲了跟後面的靜態資源作區分，咱們的API請求都以/api開頭。要作路由匹配也不難，最簡單的就是直接用if條件判斷就行。爲了能拿到請求地址，咱們須要使用url模塊來解析傳過來的地址。而Http動詞直接能夠用req.method拿到。因此http.createServer改造以下：

const url = require('url');

const server = http.createServer((req, res) => {
  // 獲取url的各個部分
  // url.parse能夠將req.url解析成一個對象
  // 裏面包含有pathname和querystring等
  const urlObject = url.parse(req.url);
  const { pathname } = urlObject;

  // api開頭的是API請求
  if (pathname.startsWith('/api')) {
    // 再判斷路由
    if (pathname === '/api/users') {
      // 獲取HTTP動詞
      const method = req.method;
      if (method === 'GET') {
        // 寫一個假數據
        const resData = [
          {
            id: 1,
            name: '小明',
            age: 18
          },
          {
            id: 2,
            name: '小紅',
            age: 19
          }
        ];
        res.setHeader('Content-Type', 'application/json')
        res.end(JSON.stringify(resData));
        return;
      }
    }
  }
});

如今咱們訪問/api/users就能夠拿到用戶列表了：

支持靜態文件

上面說了API請求是以/api開頭，也就是說不是以這個開頭的能夠認爲都是靜態文件，不一樣文件有不一樣的Content-Type，咱們這個例子裏面暫時只支持一種.jpg吧。其實就是給咱們的if (pathname.startsWith('/api'))加一個else就行。返回靜態文件須要：

1. 使用fs模塊讀取文件。
2. 返回文件的時候根據不一樣的文件類型設置不一樣的Content-Type。

因此咱們這個else就長這個樣子：

// ... 省略先後代碼 ...

else {
  // 使用path模塊獲取文件後綴名
  const extName = path.extname(pathname);

  if (extName === '.jpg') {
    // 使用fs模塊讀取文件
    fs.readFile(pathname, (err, data) => {
      res.setHeader('Content-Type', 'image/jpeg');
      res.write(data);
      res.end();
    })
  }
}

而後咱們在同級目錄下放一個圖片試一下：

數據持久化

數據持久化的方式有好幾種，通常都是存數據庫，少數狀況下也有存文件的。存數據庫比較麻煩，還須要建立和鏈接數據庫，咱們這裏很差demo，咱們這裏演示一個存文件的例子。通常POST請求是用來存新數據的，咱們在前面的基礎上再添加一個POST /api/users來新增一條數據，只須要在前面的if (method === 'GET')後面加一個POST的判斷就行：

// ... 省略其餘代碼 ...

else if (method === 'POST') {
  // 注意數據傳過來可能有多個chunk
  // 咱們須要拼接這些chunk
  let postData = '';
  req.on('data', chunk => {
    postData = postData + chunk;
  })

  req.on('end', () => {
    // 數據傳完後往db.txt插入內容
    fs.appendFile(path.join(__dirname, 'db.txt'), postData, () => {
      res.end(postData);  // 數據寫完後將數據再次返回
    });
  })
}

而後咱們測試一下這個API:

再去看看文件裏面寫進去沒有：

總結

到這裏咱們就完成了一個具備基本功能的web服務器，代碼不復雜，可是對於幫咱們理解Node web服務器的原理頗有幫助。可是上述代碼還有個很大的問題就是：代碼很醜！全部代碼都寫在一堆，並且HTTP動詞和路由匹配所有是使用if條件判斷，若是有幾百個API，再配合十來個動詞，那代碼簡直就是個災難！因此咱們應該將路由處理，HTTP動詞，靜態文件，數據持久化這些功能所有抽離出來，讓整個應用變得更優雅，更好擴展。這就是Express和Koa這些框架存在的意義，下一篇文章咱們就去Express的源碼看看他是怎麼解決這個問題的，點個關注不迷路~

本文可運行代碼示例已經上傳GitHub，你們能夠拿下來玩玩：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Node.js/HttpServer

文章的最後，感謝你花費寶貴的時間閱讀本文，若是本文給了你一點點幫助或者啓發，請不要吝嗇你的贊和GitHub小星星，你的支持是做者持續創做的動力。

做者博文GitHub項目地址： https://github.com/dennis-jiang/Front-End-Knowledges

我也搞了個公衆號[進擊的大前端]，不打廣告，不寫水文，只發高質量原創，歡迎關注~