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

蔣鵬飛 發表於 2020-10-26

Node.jsJavaScript基礎上發展起來的語言,所以前端開發者應該天生就會一點。一般我們會用它來做CLI工具或者Web伺服器,做Web伺服器也有很多成熟的框架,比如ExpressKoa。但是ExpressKoa都是對Node.js原生API的封裝,所以其實不借助任何框架,只用原生API我們也能寫一個Web伺服器出來。本文要講的就是不借助框架,只用原生API怎麼寫一個Web伺服器。因為在我的計劃中,後面會寫ExpressKoa的原始碼解析,他們都是使用原生API來實現的。所以本文其實是這兩個原始碼解析的前置知識,可以幫我們更好的理解ExpressKoa這種框架的意義和原始碼。本文僅為說明原生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動詞,比如GETPOST
  2. 不支援路由
  3. 沒有靜態資源託管
  4. 不能持久化資料

前面三點是一個Web伺服器必備的基礎功能,第四點是否需要要看情況,畢竟目前很多NodeWeb伺服器只是作為一箇中間層,真正跟資料庫打交道做持久化的還是各種微服務,但是我們也應該知道持久化怎麼做。

所以下面我們來寫一個真正能用的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就可以拿到使用者列表了:

image-20201005214628113

支援靜態檔案

上面說了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();
    })
  }
}

然後我們在同級目錄下放一個圖片試一下:

image-20201007092853547

資料持久化

資料持久化的方式有好幾種,一般都是存資料庫,少數情況下也有存檔案的。存資料庫比較麻煩,還需要建立和連線資料庫,我們這裡不好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:

image-20201007165330636

再去看看檔案裡面寫進去沒有:

image-20201007165506756

總結

到這裡我們就完成了一個具有基本功能的web伺服器,程式碼不復雜,但是對於幫我們理解Node web伺服器的原理很有幫助。但是上述程式碼還有個很大的問題就是:程式碼很醜!所有程式碼都寫在一堆,而且HTTP動詞和路由匹配全部是使用if條件判斷,如果有幾百個API,再配合十來個動詞,那程式碼簡直就是個災難!所以我們應該將路由處理HTTP動詞靜態檔案資料持久化這些功能全部抽離出來,讓整個應用變得更優雅,更好擴充套件。這就是ExpressKoa這些框架存在的意義,下一篇文章我們就去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

作者掘金文章彙總:https://juejin.im/post/5e3ffc85518825494e2772fd

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