前端er,什麼時候,你想寫一個 HTTP 服務器?

語言: CN / TW / HK

前端 er,什麼時候,你想寫一個 HTTP 服務器?

當你第一次接觸工程化的項目時,看到項目控制枱正在 building,過一會突然跳出一個 URL 地址,你點開它居然是你剛寫好的網頁,好神奇。

當你接後端同伴的接口時,你把數據帶去,接口竟然給你返回 500 錯誤;你去找後端,後端説這樣傳不行,要怎麼怎麼改,你按照他的改完,返回 200 成功了。

有時候你的請求莫名其妙的就跨域了,後端説讓你們自己處理,你就找呀找解決方案。但是為什麼會跨域?後端怎麼配置的,你也不清楚。

終於有一天,你痛定思痛,決定痛改前非,一定要自己搭一個 HTTP 服務器,徹底理清這裏面的彎彎繞繞,從此拒絕被忽悠,拒絕做只聽命令的大頭兵。

但是話説回來了,怎麼入手呢?

別急,這都給您備好啦。寫 HTTP 服務器需要後端語言,不用説,自然首選 Node.js。

下面我們基於 Node.js 的 http 模塊,一起搭建一個的 HTTP 服務器。

http 模塊

一個超簡單的 HTTP web 服務器的示例:

```js const http = require('http')

const server = http.createServer((request, response) => { response.statusCode = 200 response.end('hello world') })

server.listen(3000) ```

這裏引入了 http 模塊,提供了 createServer 方法,傳入一個回調函數,創建了一個服務器。

現在把代碼寫進 index.js ,再超簡單的把它運行起來:

sh $ node index.js

運行起來後,接着來剖析一下這段代碼 👇。

代碼剖析

http.createServer 方法的參數是一個回調函數,這個回調函數有兩個參數 —— 它們是 HTTP 服務器的核心。

第一個參數是請求對象 request,第二個參數是響應對象 response。你可以把它們看作兩個袋子,一個袋子裏裝着請求相關的數據,一個袋子裏裝着響應相關的操作。

request 包含了詳細的請求數據,也就是我們前端調接口傳遞過來的數據。通過它可以獲取請求頭,請求參數,請求方法等等。

response 主要用於響應相關的設置和操作。什麼是響應?就是我收到了客户端的請求,我可以設置狀態碼為 200 並返給前端數據;或者設置狀態碼為 500 並返給前端錯誤。

總之一句話,調用接口返回什麼,是由 response 決定的。

事實上,createServer 返回的是一個 EventEmitter,因此上面的寫法等同於這樣:

```js const server = http.createServer()

server.on('request', (request, response) => { response.statusCode = 200 response.end('hello world') }) ```

request 解析

用户發起請求的相關數據,都包含在 request 對象中。

這些數據包含常用的請求方法,請求頭,url,請求體等等數據。

js const { method, url, headers } = request

method 表示請求方法可直接使用,headers 返回請求頭對象,使用也比較簡便:

js const { headers } = request const userAgent = headers['user-agent'] // 請求頭全是小寫字母

唯獨 url 字符串不好解析,裏面包含了協議,hostname,path,query 等等。

所幸 Node.js 提供了 urlquerystring 兩個模塊解析 url 字符串。

URL 解析

先看一個 url 模塊的例子:

```js const url = require('url') // 解析url字符串 var string = 'http://localhost:8888/start?foo=bar&hello=world'

var url_object = url.parse(string) // { protocol: 'http:', host:'localhost:8888', pathname: '/start', query: 'foo=bar&hello=world' } ```

看到了吧,url 模塊可以將一個完整的 URL 地址字符串,拆分成一個包含各部分屬性的對象。

但是美中不足,其他部分都解析出來了,唯獨 query 還是一個字符串。

query 需要二次解析。怎麼辦呢?這時候第二個模塊 querystring 出場了:

```js const querystring = require('querystring') // 解析query字符串 var string = 'http://localhost:8888/start?foo=bar&hello=world'

var url_object = url.parse(string) // { query: 'foo=bar&hello=world' } var query_object = querystring.parse(url_object.query) // { foo: 'bar', hello: 'world' } ```

這下就完美了。用 url + querystring 組合,可以完整解析你的 URL。

請求體解析

對於 POST 或者 PUT 請求,我們需要接收請求體的數據。

這裏請求體比較特殊,它不是一次性傳過來的數據,而是通過 Stream 流的方式流式傳遞來的,因此要通過監聽 dataend 事件一點點的接收。

獲取方法如下:

js let body = [] request.on('data', chunk => { // 這裏的 chunk 是一個 Buffer body.push(chunk) }) request.on('end', () => { body = Buffer.concat(body) })

response 設置

服務器收到客户端請求,要通過 response 設置如何響應給客户端。

響應設置,主要就是狀態碼,響應頭,響應體三部分。

首先是狀態碼,比如 404:

js response.statusCode = 404

再有是響應頭

js response.setHeader('Content-Type', 'text/plain')

最後是響應體

js response.end('找不到數據')

這三部分也可以合在一起:

js response .writeHead(404, { 'Content-Type': 'text/plain', 'Content-Length': 49 }) .end('找不到數據')

發送 http 請求

http 模塊除了接受客户端的請求,還可以作為客户端去發送請求。

發送 http 請求是指,在 Node.js 中請求其他接口獲取數據。

發送請求主要通過 http.request 方法來實現。

GET

下面是一個發送 GET 請求的簡單示例:

```js const http = require('http') const options = { hostname: 'nodejs.cn', port: 80, path: '/learn', method: 'GET' }

const req = http.request(options, res => { console.log(狀態碼: ${res.statusCode}) res.on('data', d => { process.stdout.write(d) }) res.on('end', () => {}) })

req.on('error', error => { console.error(error) })

req.end() ```

使用 http.request 發送請求後,必須顯示調用 req.end() 來表示完成請求發送。

POST

與上面 GET 請求基本一致,區別是看請求體怎麼傳

```js const http = require('http') const options = { hostname: 'nodejs.cn', port: 80, path: '/learn', method: 'POST' }

const body = { sex: 'man', name: 'ruims' }

const req = http.request(options, res => { console.log(狀態碼: ${res.statusCode}) res.on('data', d => { process.stdout.write(d) }) res.on('end', () => {}) })

req.on('error', error => { console.error(error) })

req.write(JSON.stringify(body)) // 傳遞 body 參數寫法

req.end() ```

詭異之處

看到這裏,如果你對 nodejs 理解不深,可能會發現幾處詭異的地方。

比如,正常情況下 POST 請求傳遞 body 參數可能是這樣的:

js var body = { desc: '請求體參數' } var req = http.request({ path: '/', method: 'POST', data: body })

而上面説到的正確姿勢是這樣的:

js var body = { desc: '請求體參數' } var req = http.request({ path: '/', method: 'POST' }) req.write(JSON.stringify(body))

還有上面獲取請求體也是如此,不能直接通過 res.body 獲取,非得監聽事件,然後拼接數據。

這幾處應該是大家理解 http 模塊最困惑的地方。其實刨根問底,這不屬於 http 的難點,而是 Node.js Stream 流的特有語法。

事實上,http 模塊的核心 ——— requestresponse 都屬於 Stream,一個是可讀流,一個是可寫流。

因此,徹底理解 http 模塊,還需要深入瞭解 Stream 流是什麼。

這篇就到這裏,下一篇我們繼續探索 Stream 流,記得關注我哦。

本文來自我的專欄 前端砍柴人,如果對您有幫助,不妨點個贊鼓勵一下哈,成功我再接再厲~