>[success] # 監聽主機和端口號 1. 我們在啟動一個服務時，需要指定這個服務的監聽地址（host）和監聽端口（port），用于接收來自其他設備或進程的連接請求。**通過ip:port的方式發送到我們監聽的Web服務器上時** | 地址 | 含義 | | --- | --- | | localhost | 指本機。通常被解析為 127.0.0.1 地址，用于指向本機上單個應用程序或進程內部的通信接口。 | | 127.0.0.1 | 本機回環地址。它指向的是本機本地的一個虛擬網卡，用于在本機上的進程之間進行網絡通信。 | | 0.0.0.0 | 指本機上所有 IP 地址，用于讓服務監聽在本機的所有網絡接口上等待連接請求，可以對其他設備或進程對于本機的任何 IP 地址發起的連接請求進行響應。有時也成為通配符地址。 **監聽IPV4上所有的地址** ，再根據端口找到不同的應用程序| | 網卡對應 IP | 網卡對應的 IP 地址，例如 192.168.1.100。如果要監聽來自本地網絡中其他設備對于本機的連接請求，可以使用網卡對應的 IP。 | 2. **關于監聽端口**，端口占用兩個字節 **256 * 256 = 65536** ，也就 **0 - 65536** 的端口號都能使用，但是一般 **0-1024**的都是特殊端口，推薦自定義的范圍在**1025~65535**之間的端口 * 以node 為例 ~~~ const http = require('http'); const server1 = http.createServer((req, res) => { // 請求處理邏輯 }); // 監聽在 localhost:8080 server1.listen(8080, 'localhost', () => { console.log('Server is listening on localhost:8080'); }); const server2 = http.createServer((req, res) => { // 請求處理邏輯 }); // 監聽在 127.0.0.1:8081 server2.listen(8081, '127.0.0.1', () => { console.log('Server is listening on 127.0.0.1:8081'); }); const server3 = http.createServer((req, res) => { // 請求處理邏輯 }); // 監聽在 0.0.0.0:8082 包括回環地址 127.0.0.1 和其他網卡對應的 IP 地址 server3.listen(8082, '0.0.0.0', () => { console.log('Server is listening on 0.0.0.0:8082'); }); const server4 = http.createServer((req, res) => { // 請求處理邏輯 }); // 監聽在 192.168.1.100:8083（假設網卡的 IP 是 192.168.1.100） server4.listen(8083, '192.168.1.100', () => { console.log('Server is listening on 192.168.1.100:8083'); }); ~~~ >[info] ## 創建 http服務 | API | 參數 | 介紹 | | --- | --- | --- | | http.createServer(\[requestListener\]) | requestListener(request, response) | 創建 Http 服務器實例，requestListener 為請求事件的回調函數 | | server.listen(port\[, hostname\]\[, backlog\]\[, callback\]) | port (Number)：監聽的端口號hostname (String)：主機名backlog (Number)：等待隊列最大長度callback (Function)：服務器啟動后的回調函數 | 啟動 Http 服務器，指定端口和主機名等配置信息 | * **傳入一個回調函數，這個回調函數在 被調用時會傳入兩個參數**，`req：reques`t請求對象，包含請求相關的信息，?`res：response`響應對象，包含我們要發送給客戶端的信息； **請求對象常用屬性和方法** | 屬性/方法 | 描述 | | --- | --- | | `req.method` | 請求方法（例如 GET、POST、PUT 等） | | `req.url` | 請求 URL 的完整信息（包括協議、主機名、路徑和查詢參數等） | | `req.headers` | 請求頭對象，由鍵值對構成，可通過屬性名或`getHeader()`方法獲取對應的值 | | `req.socket` | 底層套接字（socket）對象，可以用于查看底層傳輸協議的信息 | | `req.httpVersion` | 請求使用的 HTTP 版本號 | | `req.on('data', callback)` | 注冊`data`事件的回調函數，用于接收消息主體的數據塊 | | `req.on('end', callback)` | 注冊`end`事件的回調函數，表明消息主體讀取完畢 | **響應對象常用屬性和方法** | 屬性/方法 | 描述 | | --- | --- | | `res.statusCode` | 狀態碼（例如 200、404 等） | | `res.statusMessage` | 狀態消息（例如 OK、Not Found 等） | | `res.setHeader(name, value)` | 設置響應頭信息，用于聲明服務器所發送的內容類型、編碼等信息 | | `res.writeHead(statusCode[, statusMessage][, headers])` | 一次性寫入相應頭信息 | | `res.write(chunk[, encoding][, callback])` | 向客戶端發送內容，可以多次調用 | | `res.end([chunk][, encoding][, callback])` | 結束響應，通常在數據發送完畢后調用 | >[danger] ##### 案例 ~~~ const http = require('http') // 創建http 服務 const server = http.createServer((req, res) => { /** * 傳入一個回調函數，這個回調函數在 被調用時會傳入兩個參數 * req：request請求對象，包含請求相關的信息 * res：response響應對象，包含我們要發送給客戶端的信息； */ // 1.url信息 console.log(req.url) // 2.method信息(請求方式) console.log(req.method) // 3.headers信息(請求信息) console.log(req.headers) // 設置響應頭 res.setHeader('Content-Type', 'text/html;charset=utf-8') // 利用響應在頁面輸出內容， res: response對象 => Writable可寫流，write 可以使用多次，但是最后一定要使用 end 來結束響應，否則客戶端會一直等待 res.write('你好', 'utf-8', () => { console.log('發送成功') }) // 在每次響應結束后用end方法，才能保證結束響應，告訴客戶端，我的話說完了，你可以呈遞給用戶了 res.end('結尾') }) // 可以監聽多個端口 在沒有指定host 默認啟動的就是 0.0.0.0在同一個網段下的主機中，通過ip地址是可以訪問的 server.listen(8080, () => { console.log('啟動8080 端口服務: http://localhost:8080') }) ~~~ * 響應數據后使用`res.end()`來結束本次響應。在結束之前，你可以使用`res.write()`多次寫入響應數據，但必須在最后使用`res.end()`來結束此次響應。否則客戶端將一直等待服務器的響應數據，導致請求一直處于等待狀態(**因為是流在使用流的時候要關閉**)  >[danger] ##### 設置響應頭 1. `res.setHeader`：一次寫入一個頭部信息；/` res.writeHead`：同時寫入header和status 2. 如果不規定響應頭瀏覽器默認按照當前操作系統的默認編碼去解析，win是gbk所以會出現請求后出現亂碼的情況，text/plain 是普通文本，text/html是將html解析后展示，`setHeader('Content-Type', 'text/plain; charset=utf-8') `告訴瀏覽器用utf-8解析 ~~~ const http = require('http') // 1.創建server服務器 const server = http.createServer((req, res) => { // 設置header信息: 數據的類型以及數據的編碼格式 // 1.單獨設置某一個header // res.setHeader('Content-Type', 'text/plain;charset=utf8;') // 2.和http status code一起設置 res.writeHead(200, { 'Content-Type': 'application/json;charset=utf8;', }) // 3. statusCode // res.statusCode = 403 // 4. setHead 響應頭 res.writeHead(401) const list = [{ name: '1', age: 18 }] res.end(JSON.stringify(list)) }) // 2.開啟server服務器 server.listen(8000, () => { console.log('服務器開啟成功~') }) ~~~ >[danger] ##### 獲取請求連接中的參數 ~~~ const http = require('http') const url = require('url') const qs = require('querystring') // 1.創建server服務器 const server = http.createServer((req, res) => { // 1.參數一: query類型參數 // /home/list?offset=100&size=20 // 1.1.解析url const urlString = req.url const urlInfo = url.parse(urlString) // 1.2.解析query: offset=100&size=20 const queryString = urlInfo.query const queryInfo = qs.parse(queryString) console.log(queryInfo.offset, queryInfo.size) res.end('hello world aaaa bbb') }) // 2.開啟server服務器 server.listen(8000, () => { console.log('服務器開啟成功~') }) ~~~ >[danger] ##### 服務端獲取請求頭數據 1. keep-alive,http是基于TCP協議的，但是通常在進行一次請求和響應結束后會立刻中斷,在http1.0中，如果想要繼續保持連接 * 瀏覽器需要在請求頭中添加connection: keep-alive； * 服務器需要在響應頭中添加connection:keey-alive； * 當客戶端再次放請求時，就會使用同一個連接，直接一方中斷連接； 2. http1.1中，所有連接默認是connection: keep-alive的； * 不同的Web服務器會有不同的保持keep-alive的時間 * Node中默認是5s中 ~~~ const http = require('http') const url = require('url') // 1.創建server服務器 const server = http.createServer((req, res) => { console.log(req.headers) console.log(req.headers['content-type']) // cookie/session/token const token = req.headers['authorization'] console.log(token) res.end('查看header的信息~') }) // 2.開啟server服務器 server.listen(8000, () => { console.log('服務器開啟成功~') }) ~~~ >[danger] ##### 服務端獲取請求體中數據 1. `req.on('data')`是 Node.js 中 HTTP 請求對象中的一個事件，用于獲取 POST 方法提交的數據。 * 具體來說，當客戶端向服務端發送一個 POST 請求時，請求數據會被包含在 HTTP 請求體中，而 Node.js 的`http`模塊中的`req`對象（即 HTTP 請求對象）可以通過監聽`'data'`事件來逐步獲取請求體中的數據。這個事件會在每次獲取到數據的時候觸發，數據會以 Buffer 的形式作為回調函數的參數傳遞 ~~~ const http = require('http'); http.createServer((req, res) => { if (req.method === 'POST') { let postData = ''; // 獲取客戶端請求頭里面的數據 req.on('data', chunk => { postData += chunk; }); req.on('end', () => { console.log(postData); res.end('Data received\n'); }); } else { res.end('Hello World\n'); } }).listen(3000); ~~~ 2. 創建了一個 HTTP 服務器，并在其中監聽`'data'`事件和`'end'`事件。當發起 POST 請求時，服務端會在每次接收到數據時觸發`'data'`事件，并將數據以 Buffer 的形式傳入回調函數中。我們可以將這些數據片段拼接起來，得到完整的請求體數據。當請求體數據接收完畢時，`'end'`事件會被觸發，我們可以在其回調函數中做出響應。若是 GET 請求，則直接響應`"Hello World\n"`。 ~~~ let postData = JSON.stringify({ 'msg': 'Hello World!' }); let options = { hostname: 'localhost', port: 3000, path: '/', method: 'POST', headers: { 'Content-Type': 'application/json', 'Content-Length': postData.length } }; // 發起對服務端的請求數據 let req = http.request(options, res => { console.log(`statusCode: ${res.statusCode}`); res.on('data', chunk => { console.log(`BODY: ${chunk}`); }); }); req.on('error', error => { console.error(error); }); req.write(postData); req.end(); ~~~ >[info] ## 綜合案例 >[danger] ##### 根據url訪問模擬網站請求 ~~~ var http = require('http') // 1. 創建 Server var server = http.createServer() // 2. 監聽 request 請求事件，設置請求處理函數 server.on('request', function (req, res) { console.log('收到請求了，請求路徑是：' + req.url) console.log('請求我的客戶端的地址是：', req.socket.remoteAddress, req.socket.remotePort) // res.end('hello nodejs') // 根據不同的請求路徑發送不同的響應結果 // 1. 獲取請求路徑 // req.url 獲取到的是端口號之后的那一部分路徑 // 也就是說所有的 url 都是以 / 開頭的 // 2. 判斷路徑處理響應 var url = req.url if (url === '/') { res.end('index page') } else if (url === '/login') { res.end('login page') } else if (url === '/products') { var products = [{ name: '蘋果 X', price: 8888 }, { name: '菠蘿 X', price: 5000 }, { name: '小辣椒 X', price: 1999 } ] // 響應內容只能是二進制數據或者字符串 res.end(JSON.stringify(products)) } else { res.end('404 Not Found.') } }) // 3. 綁定端口號，啟動服務 server.listen(3000, function () { console.log('服務器啟動成功，可以訪問了。。。') }) ~~~ >[danger] ##### 利用文件的讀取 1. 利用讀取文件響應，其中響應到瀏覽器的內容，算然讀取出來的的是16進制，但是res.end，既可以toString()一下，也可以省略 ~~~ var http = require('http') var fs = require('fs') var server = http.createServer() server.on('request', function (req, res) { // / index.html var url = req.url if (url === '/') { // 我們要發送的還是在文件中的內容 fs.readFile('../views/index.html', function (err, data) { if (err) { res.setHeader('Content-Type', 'text/plain; charset=utf-8') res.end('文件讀取失敗，請稍后重試！') } else { // data 默認是二進制數據，可以通過 .toString 轉為咱們能識別的字符串 // res.end() 支持兩種數據類型，一種是二進制，一種是字符串 res.setHeader('Content-Type', 'text/html; charset=utf-8') res.end(data) } }) } else if (url === '/xiaoming') { fs.readFile('../resource/ab2.jpg', function (err, data) { if (err) { res.setHeader('Content-Type', 'text/plain; charset=utf-8') res.end('文件讀取失敗，請稍后重試！') } else { // data 默認是二進制數據，可以通過 .toString 轉為咱們能識別的字符串 // res.end() 支持兩種數據類型，一種是二進制，一種是字符串 // 圖片就不需要指定編碼了，因為我們常說的編碼一般指的是：字符編碼 res.setHeader('Content-Type', 'image/jpeg') res.end(data) } }) } }) server.listen(3000, function () { console.log('Server is running...') }) ~~~ >[warning] ## 注意 >[danger] ##### 修改代碼后幫自動自動服務 1. `nodemon`可以在檢測到代碼變更時自動重啟 Node.js 服務 ~~~ npm install -g nodemon ~~~ 在啟動服務時使用`nodemon`命令替代`node`命令即可 ~~~ nodemon app.js ~~~ 當修改完代碼后保存文件，`nodemon`就會檢測到變更并自動重啟服務器，從而使新的代碼生效。 >[danger] ##### 在訪問過程中發現觸發兩次 1. 是因為通過瀏覽器請求時候，訪問了`/favicon.ico`一次額外請求導致我們運行下面代碼時候打印兩次 ~~~ const http = require('http') // 1.創建server服務器 const server = http.createServer((req, res) => { console.log('服務器被訪問~') res.end('hello world aaaa') }) // 2.開啟server服務器 server.listen(8000, () => { console.log('服務器開啟成功~') }) ~~~ 2. 因為上面代碼是所有連接訪問都會接受到，瀏覽器的默認`/favicon.ico ` 也額外接到了，可以通過判斷`request `返回的指定`url `限制針對指定的條件返回，這樣就會是數以自己的被打印出來