Node.js - HTTP

1. HTTP请求

HTTP（Hypertext Transfer Protocol，超文本传输协议）是客户端和服务器之间通信的基础协议。HTTP 请求是由客户端（通常是浏览器、手机应用或其他网络工具）发送给服务器的消息，用来请求资源或执行操作。

简单来讲就是向服务器发送请求，服务器返回响应给用户端

HTTP请求由三个主要部分组成：

1.1 请求行

包含请求方法、目标资源路径、协议版本。

GET /index.html HTTP/1.1

 常见的请求方法：

方法作用
GET主要作用于获取数据
POST主要作用于新增数据
PUT/PATCH主要作用于更新数据
DELETE主要作用于删除数据

1.2 请求头

提供额外的信息，比如客户端能力，请求参数等，以键值对的形式呈现

键: 值

  1. GET /path/resource HTTP/1.1
  2. Host: www.example.com
  3. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36
  4. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
  5. Accept-Language: en-US,en;q=0.5
  6. Accept-Encoding: gzip, deflate, br
  7. Connection: keep-alive
  8. Cookie: sessionId=abc123; theme=dark
  9. Referer: https://www.google.com

1.3 请求体

用于发送数据，常见于POST或PUT请求

  1. {
  2.     "username": "user1",
  3.     "password": "password123"
  4. }

2. HTTP响应

HTTP 响应是服务器对客户端 HTTP 请求的回复。它包含状态信息、响应头和（通常）响应体，用于传递客户端所请求的资源或告知请求处理的结果。

HTTP响应基本结构由以下三个部分组成

2.1 状态行（Status Line）

描述响应的总体状态，包括协议版本、状态码和状态文本。

HTTP-Version Status-Code Reason-Phrase

HTTP-Version: 表示服务器使用的HTTP协议版本。

响应状态码： 三位数字的状态码，表示服务器对请求的处理结果，状态码分为五大类：

· 1xx（信息）

· 2xx（成功）

· 3XX（重定向）

· 4XX（客户端错误）

· 5XX（服务端错误）

常见状态码：

状态码含义
200请求成功
403禁止请求
404找不到资源
500服务器内部错误

2.2 响应头（Response Headers）

HTTP响应头（HTTP Response Headers）是服务器发送给客户端的信息的一部分，它包含关于响应的元数据。这些头部字段为客户端提供了服务器、资源和响应内容的额外信息。例如内容类型、服务器信息、缓存控制等，以键值对的形式发送。

  1. Content-Type: text/html
  2. Content-Length: 1234

2.3 响应体（Reponse Body）

包含实际的响应数据，如 HTML 页面、JSON 数据、文件内容等。

仅在部分响应中有（例如 200 OK）。错误响应（如 404）通常没有响应体。

响应示例

简单的HTML响应：

  1. HTTP/1.1 200 OK
  2. Content-Type: text/html
  3. Content-Length: 88
  4.  
  5. DOCTYPE html>
  6. <html>
  7. <head>
  8.     <title>Welcometitle>
  9. head>
  10. <body>
  11.     <h1>Hello, World!h1>
  12. body>
  13. html>

JSON响应

  1. HTTP/1.1 200 OK
  2. Content-Type: application/json
  3. Content-Length: 57
  4.  
  5. {
  6.     "status": "success",
  7.     "data": {
  8.         "id": 1,
  9.         "name": "Alice"
  10.     }
  11. }

3. IP与端口

3.1 IP

本身就是一个数字标识，是一个32Bit的二进制数字，每8bit(一个字节)为一组

表示网络中的设备，实现设备之间的通信

IP的分类

本机回环IP地址：用于测试和通信的特殊 IP 地址，始终指向本机。常见为http://127.0.0.1

局域网IP(私网IP)：分配给局域网中的设备，用于局域网内部通信。

广域网IP(公网IP)：分配给设备的唯一 IP 地址，可在互联网上直接访问。

3.2 端口

应用程序的数字标识，一台现代计算机有65536个端口，一个应用程序可以使用一个或者多个端口

实现不同主机应用程序之间的通信。可以理解为端口就是服务器中的每一个房间，在执行特定的任务。

4. 创建HTTP服务器

在Node.js中，创建HTTP服务器只需要几行简单的代码：

  1. const http = require('http');
  2.  
  3. // 创建服务器
  4. const server = http.createServer((req, res) => {
  5.     // 处理请求
  6.     res.statusCode = 200; // HTTP状态码
  7.     res.setHeader('Content-Type', 'text/plain'); // HTTP头信息
  8.     res.end('Hello, Node.js HTTP Server!'); // 响应内容
  9. });
  10.  
  11. // 启动服务器
  12. server.listen(3000, '127.0.0.1', () => {
  13.     console.log('Server running at http://127.0.0.1:3000/');
  14. });

其中http协议的默认端口为80，https的默认端口为443。我们来详细讲解代码的每一步。

4.1 导入http库

const http = require("http");

4.2 创建简单的HTTP服务器 

  1. const server = http.createServer((request,response)=>{
  2.     response.end("Hello HTTP server");
  3. });

http.createServer是Node.js中用于创建服务器的函数，接收一个回调函数作为参数，该回调函数会在每次收到HTTP请求时被调用。  

· request：表示客户端发送的 HTTP 请求对象。包含请求的所有信息，例如方法（GET/POST）、路径、头部等。

· response：表示服务器返回给客户端的 HTTP 响应对象，控制返回的内容、状态等。

  1. response.setHeader('content-type','text/html;charset=utf-8');
  2. //返回相应内容字符为utf-8
  3.

 设置返回内容的头部，包含浏览器的文字解码信息

response.end("Hello HTTP server");

结束响应并向客户端发送数据。

4.3 监听启动服务

  1. //监听窗口，启动服务
  2. server.listen(9000,()=>{
  3.     console.log("服务启动");
  4. })

server.listen启动服务器并监听端口，这里使用9000端口；

第二个参数是一个回调函数。会在服务器成功启动后执行

4.4 停止服务

在命令行中输入ctrl+c

通过资源管理器找到目标端口对应的应用程序，定位对应PID，在任务管理器中关闭即可

5. HTTP请求处理

想要获取请求的数据，需要通过request对象中的属性进行识别处理

5.1 请求路径区分

如下表格所示，request对象中包含诸多属性，通过解析不同的属性，可以区分请求路径，以此做出相应响应

含义语法
请求方法request.method
请求版本request.httpVersion
请求路径request.url
请求头request.headers

通过实现路径区分，可以对不同请求路径做出相应响应：

  1. const server = http.createServer((req, res) => {
  2.     if (req.url === '/') {
  3.         res.end('Welcome to the Homepage!');
  4.     } else if (req.url === '/about') {
  5.         res.end('This is the About page.');
  6.     } else {
  7.         res.statusCode = 404;
  8.         res.end('Page Not Found.');
  9.     }
  10. });
  11.  
  12. server.listen(3000, () => {
  13.     console.log('Server is running on port 3000');
  14. });

5.2 处理请求方式

HTTP请求可以分为GET请求和POST等，GET请求是请求服务器返回一系列内容；POST请求则是向服务器发送对应内容，服务器再返回相应报文。

通过request.method,可以区分HTTP不同的请求方式

  1. const server = http.createServer((req, res) => {
  2.     if (req.method === 'GET') {
  3.         res.end('Received a GET request');
  4.     } else if (req.method === 'POST') {
  5.         res.end('Received a POST request');
  6.     } else {
  7.         res.end('Unsupported request method');
  8.     }
  9. });
  10.  
  11. server.listen(3000, () => {
  12.     console.log('Server is running on port 3000');
  13. });

5.2.1 Get请求

 在 GET 请求中，参数通常通过 URL 查询字符串传递。例如：/search?query=nodejs。

  1. const http = require('http');
  2. const url = require('url');
  3.  
  4. // 创建 HTTP 服务器
  5. const server = http.createServer((req, res) => {
  6.     if (req.method === 'GET') {
  7.         // 解析查询字符串
  8.         const queryObject = url.parse(req.url, true).query;
  9.  
  10.         res.writeHead(200, { 'Content-Type': 'application/json' });
  11.         res.end(JSON.stringify({ message: 'Hello', query: queryObject }));
  12.     }
  13. });
  14.  
  15. // 启动服务器
  16. server.listen(3000, () => {
  17.     console.log('Server is running on http://127.0.0.1:3000');
  18. });

访问http://127.0.0.1:3000/?name=John&age=30，响应结果为：

  1. {
  2.     "message": "Hello",
  3.     "query": {
  4.         "name": "John",
  5.         "age": "30"
  6.     }
  7. }

示例：根据不同的get请求返回对应内容

  1. const http = require('http');
  2.  
  3. const server = http.createServer((request, response) => {
  4.     //获取请求的方法
  5.     let {method} = request; //解构赋值等同于let method = request.method;
  6.     //获取请求的url路径
  7.     let {pathname} = new URL(request.url,'http://127.0.0.1'); //构造URL
  8.     response.setHeader('content-type','text/html;charset=utf-8')
  9.     console.log(method);
  10.     console.log(pathname);
  11.     if (method === 'GET' && pathname === '/login'){
  12.         response.end('登录页面');
  13.     }
  14.     else if (method === 'GET' && pathname === '/reg'){
  15.         response.end('注册页面');
  16.     }
  17.     else{
  18.         response.end('404 NOT FOUND');
  19.     }
  20. });
  21.  
  22. server.listen(9000, () => {
  23.     console.log("Start, 9000 is been listened");
  24. });

5.2.2 Post请求

在HTTP模块中，post请求处理常使用监听事件的方式进行处理

  1. request.on('',()=>{})
  2. //request.on('事件名',回调函数);

以下是一个Post传递的例子： 

  1. <html>
  2.     <head>
  3.         <title>Documenttitle>
  4.     head>
  5.     <body>
  6.         <form action="http://127.0.0.1:9000" content="IE=edge">
  7.             <input type="text" name='username'>
  8.             <input type="text" name="password">
  9.             <input type="submit" value="submit">
  10.         form>
  11.     body>
  12. html>
  1. const http = require('http');
  2. const server = http.createServer((request,response)=>{
  3.     //获取请求方法
  4.     let body = '';
  5.     request.on('data',chunk=>{
  6.         body += chunk;
  7.     })
  8.     request.on('end',()=>{
  9.         console.log(body)
  10.         response.end('HelloHTTP')
  11.     })
  12. })
  13.  
  14. server.listen(9000,()=>{
  15.     console.log("Start");
  16. })

代码详解：

  1. request.on('data', chunk => {
  2.     body += chunk;
  3. });

客户端发送的请求包含数据（例如 POST 请求的请求体），这些数据会以“数据块”（chunk）的形式分批传递给服务器。每次接收到一个数据块时，回调函数会被触发，chunk 是当前接收到的这一块数据。

  1. request.on('end', () => {
  2.     console.log(body);
  3.     response.end('HelloHTTP');
  4. });

监听请求的end事件，当客户端发送的数据流完全传输完毕时，触发end事件

传入一个回调函数向客户端返回一个响应内容，并结束响应。

5.3 响应设置 

在HTTP请求发出后，服务器将返回对应的报文传输至客户端，response就是对应内容，在其中可以设置相应属性帮助浏览器与客户端识别相应内容

· 设置响应状态码 

  1. //1. 设置响应状态码
  2. response.statusCode = 203;
  3. response.statusCode = 404;

· 设置响应描述 

  1. //2. 响应状态的描述
  2. response.statusMessage = 'iloveu'

· 设置响应头 

  1. //3. 响应头的设置
  2. response.setHeader('Content-type','text/html;charset=utf-8');
  3. response.setHeader('Server','Node.js');
  4. response.setHeader('test',['a','b','c']); //设置多个同名响应头

· 设置响应体 

  1. //4. 响应体的设置
  2. response.write('Hello');
  3. response.end('end'); //有且只有一个end响应

示例：返回HTML页面

  1. <html>
  2.     <head>
  3.         <style>
  4.             table{
  5.                 width: 500px;
  6.                 height:500px;
  7.                 background-color: beige;
  8.             }
  9.             table td{
  10.                 background-color: aqua;
  11.             }
  12.         style>
  13.     head>
  14.     <body>
  15.         <table border="1">
  16.             <tr><td>td><td>td><td>td>tr>
  17.             <tr><td>td><td>td><td>td>tr>
  18.             <tr><td>td><td>td><td>td>tr>
  19.         table>
  20.         <script>
  21.             let tds = document.querySelectorAll('td');
  22.             tds.forEach(item=>{
  23.                 item.onclick = function(){
  24.                     this.style.background = '#222';
  25.                 }
  26.             })
  27.         script>
  28.     body>
  29. html>
  1. const http = require('http');
  2. const fs = require('fs');
  3.  
  4. const server = http.createServer((request,response)=>{
  5.     //读取文件内容
  6.     let html = fs.readFileSync('./example.html');
  7.     response.end(html);
  8. })
  9.  
  10. server.listen(9000,()=>{
  11.     console.log('This server is been started')
  12. })

  1. const http = require('http')
  2. const fs = require('fs');
  3.  
  4. const server = http.createServer((request,response)=>{
  5.     let {pathname} = new URL(request.url,'http://127.0.0.1')
  6.     if (pathname === '/'){
  7.         let html = fs.readFileSync('./example.html')
  8.         response.end(html);
  9.     }
  10.     else if(pathname === '/index.css'){
  11.         let css = fs.readFileSync('./index.css')
  12.         response.end(css);
  13.     }
  14.     else if (pathname === '/index.js'){
  15.         let js = fs.readFileSync('./index.js')
  16.         response.end(js);
  17.     }
  18.     else{
  19.         response.statusCode = 404;
  20.         response.end('
    404 NOT FOUND
    ')
  21.     }


 

注：本文转载自blog.csdn.net的蒜蓉大猩猩的文章"https://blog.csdn.net/qq_51222843/article/details/144582630"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！