下面我們來學nodejs中的http模塊。在此之前,你需要有一定的網絡知識儲備,能知道http,IP,端口是什么并且它們之間的關系。如果還不清楚或比較模糊,可以查看下面的文章:
HTTP協議與IP
下面我們開始學習。
目錄
創建一個HTTP服務端
向本機端口發送請求
HTTP服務的注意事項
1、如何關閉服務器?
2、如何實現代碼的修改更新?
3、響應內容中文亂碼
4、端口號被占用
5、HTTP協議默認端口
在瀏覽器中查看報文
?
創建一個HTTP服務端
有了HTTP服務端后,我們就能處理瀏覽器發送過來的請求,并且可以返回響應。和前端開發不同,我們無法隨時在瀏覽器中渲染看到我們編寫的結果,因此我們需要逐漸習慣后端開發時的編寫習慣。
1、導入http模塊
const http = require('http');
這部分和之前的導入模塊相同。
2、創建服務對象
創建服務對象我們使用 createServer 方法來創建,其返回結果為一個對象。代碼為:
const server = http.createServer();
該方法有一個實參,它是一個函數;該函數又接受兩個形參,為 request 和 response。request是瀏覽器發送的請求報文的封裝對象,可以獲取到請求報文的相關內容。
而response則是對響應報文的封裝對象,可以為瀏覽器設置響應結果。
這里我們說明一下,request和rresponse只是參數名稱,我們可以自己為參數命名。
下面我們簡單書寫一下函數:
const server = http.createServer((request,response) => {response.end('Hello HTTP Server');//設置響應體并結束響應
});
后面我們還會詳細講解如何去編寫,這里我們就留個印象,要知道這么寫的目的是什么。
3、監聽端口,啟動服務
直接看代碼:
server.listen();
listen是對象里面的一個方法,需要往里面傳入兩個參數:一個數值和回調函數。具體如下:
server.listen(9000,() => {console.log('服務器已成功啟動...');
});
數值表示端口號,上面代碼表示端口號為9000。當然其他端口也可行,這里我們選取9000。直接運行上述代碼查看結果:
這樣我們就成功運行了。當服務器啟動成功以后才會執行回調函數內的代碼。(response)
現在,端口9000就已經被我們的服務器占用了。將來只要有程序往9000端口發送http請求,回調函數就就會被執行。我們知道,瀏覽器會向服務器發送http請求;下面我們使用本機的IP試著發送請求。
向本機端口發送請求
向本機端口發送請求,我們首先要知道本機的IP地址。而本機回環地址就是我們當前計算機,即本機的地址。IP為:127.0.0.1。下面我們打開瀏覽器,輸入IP發送我們的http請求。
http://127.0.0.1:9000/
在網址欄輸入上述代碼,跳轉后我們就能看到執行了回調函數之后的頁面。
HTTP服務的注意事項
1、如何關閉服務器?
啟動服務之后,我們使用 Crtl + C 就能停止運行。
2、如何實現代碼的修改更新?
如果我們想對代碼進行修改后服務器也會做出對應修改該怎么辦呢?比如我們把之前的 'Hello HTTP Server' 修改為'Hello World!':
const http = require('http');
const server = http.createServer((request,response) => {response.end('Hello World!');//設置響應體并結束響應
});
server.listen(9000,() => {console.log('服務器已成功啟動...');
});
直接修改后發現頁面沒有變化。這時我們需要關閉當前服務器并再次啟動才會實現更新。即重啟服務。
3、響應內容中文亂碼
我們再次修改文本內容,這次我們使用中文 “你好” 來替換文本。
response.end('你好');
重啟服務器,發現出現了奇怪的結果:
感興趣可以多嘗試一些中文文本,會看到都會出現亂碼。這里是因為字符集的問題。我們在前面多加入一行代碼:
response.setHeader('content-type','text/html;charset=utf-8');
這段代碼是什么意思呢?它表示在發送請求報文時,多加入一個鍵名為 conten.type 的響應頭;返回的內為HTML,并且字符的格式為 utf-8 。這樣瀏覽器就會按照utf-8字符集的規范來解析字符了。下面我們重啟一下服務,發現回歸正常:
4、端口號被占用
我們在vscode中保持服務器不斷開,新打開一個終端,啟動文件會發現出現報錯:
這時就是端口已經被占用的情況。我們在另一個終端已經使用了9000端口,不能再被其他的使用。解決這個問題有兩個方法,一是停止正在啟動的端口;二是修改端口號。
5、HTTP協議默認端口
HTTP協議的默認端口為80。如果我們不設置端口號,請求就會默認向80端口發送請求。再補充一下 https協議的默認端口為443。
在瀏覽器中查看報文
我們在之前運行的頁面上打開控制臺應用,選擇網絡:
之后我們啟動服務器就能看到出現了兩個請求:
我們先看下面那個 favicon.ico ,這個其實是谷歌瀏覽器的默認行為,在打開網頁時它都會發送這樣一個請求。
我們再來看向本機發送的請求,有三個大的分類項;我們打開請求標頭,就能看到報文的內容了。但打開后發現沒有請求行,我們點擊原始(源代碼),就能看到初始的代碼,也就能看見請求行了。
那么請求體怎么看呢?我們需要另外建立一個文件:
如圖所示我們快速建立一個html文件,如下書寫一個表單:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://127.0.0.1:9000" method="post"><input type="text" name="username"><input type="password" name="password"><input type="submit" value="提交"></form>
</body>
</html>
之后打開網頁,輸入對應的信息后提交后就會像對應端口發送一個Post請求。
提交后我們能在控制臺看到多出來一個“負載”標簽頁,里面存放我們剛剛輸入的信息:
這就是格式化之后的請求體內容。如果想要查看原始的內容,點擊查看源即可:
username=123&password=123456
?
?
?
?
?