Node 核心模組HTTP模組

阿新 • • 發佈：2020-10-04

Node 核心模組HTTP模組

客戶端、服務端對我們都不陌生，Node.js 中的 HTTP 介面被設計成支援協議的許多特性。比如，大塊編碼的訊息。這些介面不緩衝完整的請求或響應，使用者能夠以流的形式處理資料。

為了支援各種可能的 HTTP 應用，Node.js 的 HTTP API 是非常底層的。它只涉及流處理與訊息解析。它把一個訊息解析成訊息頭和訊息主體，但不解析具體的訊息頭或訊息主體。

1、API結構圖

1.1 模組類結構圖

1.2 Agent類結構圖

1.3 ClientRequest類結構圖

1.4 Server 類結構

1.5 ServerResponse類結構圖

1.6 IncomingMessage類結構圖

1.7 靜態方法和屬性圖

2、實現常用http服務案例

開啟http服務

// 1. 匯入http模組
var http = require('http');

// 2. 使用http這個模組中的createServer()建立一個伺服器例項物件
var server = http.createServer();

// 3. 繫結埠號,啟動web伺服器
server.listen(8000, function() {
    console.log(' 請訪問http://localhost:8000');
});

// 4. 為這個伺服器例項物件註冊 request 請求處理函式
// 請求處理函式function(形參1,形參2){}
// 形參1:request請求物件 獲取到當前請求的路徑,方法等本次請求的所有資訊
// 形參2:response響應物件 傳送響應資料
server.on('request', function(request, response) {
    console.log('服務端收到客戶端的請求啦!!!');
    // 向客戶端頁面返回字串
    response.write("hello node");
    // 結束響應
    response.end();
});

執行結果

客戶端請求兩次的問題

用瀏覽器訪問你會發現，node啟動的服務會被請求兩次，這是怎麼回事呢？

列印下請求的url

原來是請求了favicon.ico(瀏覽器預設會請求一次favicon.ico)，那就做下過濾吧

// 1. 匯入http模組
var http = require('http');

// 2. 使用http這個模組中的createServer()建立一個伺服器例項物件
var server = http.createServer();

// 3. 繫結埠號,啟動web伺服器
server.listen(8000, function() {
    console.log(' 請訪問http://localhost:8000');
});

// 4. 為這個伺服器例項物件註冊 request 請求處理函式
// 請求處理函式function(形參1,形參2){}
// 形參1:request請求物件 獲取到當前請求的路徑,方法等本次請求的所有資訊
// 形參2:response響應物件 傳送響應資料
server.on('request', function(request, response) {
    //過濾請求favicon.ico
    if(request.url === '/favicon.ico'){
        return;
    }

    console.log('服務端收到客戶端的請求啦!!!');
    //列印請求的url
    console.log(request.url);
    // 向客戶端頁面返回字串
    response.write("hello node");
    // 結束響應
    response.end();
});

執行結果

已被過濾

響應中文亂碼的問題

當我們想響應中文，你會發現中文是亂碼的

這時候就需要設定響應頭了，告訴瀏覽器我響應的是什麼型別的資料

// 設定響應頭
response.setHeader('Content-Type', 'text/html;charset=utf-8');

例：

// 1. 匯入http模組
var http = require('http');

// 2. 使用http這個模組中的createServer()建立一個伺服器例項物件
var server = http.createServer();

// 3. 繫結埠號,啟動web伺服器
server.listen(8000, function() {
    console.log(' 請訪問http://localhost:8000');
});

// 4. 為這個伺服器例項物件註冊 request 請求處理函式
// 請求處理函式function(形參1,形參2){}
// 形參1:request請求物件 獲取到當前請求的路徑,方法等本次請求的所有資訊
// 形參2:response響應物件 傳送響應資料
server.on('request', function(request, response) {
    //過濾請求favicon.ico
    if(request.url === '/favicon.ico'){
        return;
    }

    console.log('服務端收到客戶端的請求啦!!!');
    //列印請求的url
    console.log(request.url);


    // 設定響應頭
    response.setHeader('Content-Type', 'text/html;charset=utf-8');

    // 向客戶端頁面返回字串
    response.write("hello node");
    response.write("你好世界");
    // 結束響應
    response.end();
});

執行結果

響應整個html頁面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試Node 響應 html</title>
</head>
<body>
<h1>Node 響應整個html</h1>
</body>
</html>

httpServer.js

// 1. 匯入http模組
var http = require('http');
var fs = require('fs');

// 2. 使用http這個模組中的createServer()建立一個伺服器例項物件
var server = http.createServer();

// 3. 繫結埠號,啟動web伺服器
server.listen(8000, function() {
    console.log(' 請訪問http://localhost:8000');
});

// 4. 為這個伺服器例項物件註冊 request 請求處理函式
// 請求處理函式function(形參1,形參2){}
// 形參1:request請求物件 獲取到當前請求的路徑,方法等本次請求的所有資訊
// 形參2:response響應物件 傳送響應資料
server.on('request', function(request, response) {
    //過濾請求favicon.ico
    if(request.url === '/favicon.ico'){
        return;
    }
    // 設定響應頭
    response.setHeader('Content-Type', 'text/html;charset=utf-8');

    //讀取index.html並響應
    fs.readFile('./index.html', 'utf-8', function (error, data) {
        // 結束響應
        response.end(data);
    });
});

執行結果

響應圖片

如果響應http頁面中有圖片，你列印請求的連結你會發現，會向伺服器再次請求圖片，如

這時候我們可以根據請求連結判斷，去處理是請求html頁面還是圖片，判斷如果是圖片的話就直接返回圖片，如

// 判斷請求圖片
if (request.url.indexOf('jpg') >= 0) {
    fs.readFile('./img.jpg', function (error, data) {
        response.end(data);
    });
    return;
}

完整程式碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試Node 響應 html</title>
</head>
<body>
<h1>Node 響應整個html</h1>

<img src="img.jpg"/>

</body>
</html>

httpServer.js

// 1. 匯入http模組
var http = require('http');
var fs = require('fs');

// 2. 使用http這個模組中的createServer()建立一個伺服器例項物件
var server = http.createServer();

// 3. 繫結埠號,啟動web伺服器
server.listen(8000, function() {
    console.log(' 請訪問http://localhost:8000');
});

// 4. 為這個伺服器例項物件註冊 request 請求處理函式
// 請求處理函式function(形參1,形參2){}
// 形參1:request請求物件 獲取到當前請求的路徑,方法等本次請求的所有資訊
// 形參2:response響應物件 傳送響應資料
server.on('request', function(request, response) {
    console.log(request.url, '請求連結');
    //過濾請求favicon.ico
    if(request.url === '/favicon.ico'){
        return;
    }

    // 判斷請求圖片
    if (request.url.indexOf('jpg') >= 0) {
        fs.readFile('./img.jpg', function (error, data) {
            response.end(data);
        });
        return;
    }

    // 設定響應頭
    response.setHeader('Content-Type', 'text/html;charset=utf-8');

    //讀取index.html並響應
    fs.readFile('./index.html', 'utf-8', function (error, data) {
        // 結束響應
        response.end(data);
    });

});

執行結果

響應一切靜態資源

前面已經可以響應html頁面和圖片了，但是圖片是根據url判斷的，那如果要響應其他的靜態資源呢，難道每個都做判斷，這顯然太麻煩了，不過你總結一下會發現其實我們要響應的就兩種，一種是html頁面還有一種是靜態資源(圖片，js，css)，那就可以吧我們的程式碼稍微改下

如

// 1. 匯入http模組
var http = require('http');
var fs = require('fs');

// 2. 使用http這個模組中的createServer()建立一個伺服器例項物件
var server = http.createServer();

// 3. 繫結埠號,啟動web伺服器
server.listen(8000, function() {
    console.log(' 請訪問http://localhost:8000');
});

// 4. 為這個伺服器例項物件註冊 request 請求處理函式
// 請求處理函式function(形參1,形參2){}
// 形參1:request請求物件 獲取到當前請求的路徑,方法等本次請求的所有資訊
// 形參2:response響應物件 傳送響應資料
server.on('request', function(request, response) {
    console.log(request.url, '----請求連結');
    //響應html頁面
    if(request.url === '/'){
        // 設定響應頭
        response.setHeader('Content-Type', 'text/html;charset=utf-8');
        //讀取index.html並響應
        fs.readFile('./index.html', 'utf-8', function (error, data) {
            // 結束響應
            response.end(data);
        });
    }else{
        //響應其他靜態資源
        fs.readFile('.'+request.url,function(error,data){
            response.end(data);
        })
    }

});

執行結果