TinyWebServer源码解析——HTTP机制

TinyWebServer源码解析——HTTP机制

项目地址
https://github.com/qinguoyi/TinyWebServer.git
尊重开源精神,保障作者权益,内容均为原创,如有雷同,纯属巧合

笔者能力有限,我认为这个部分还有更多的技术栈能够写出来,但是我的能力做不到了,如果以后有机会,我会再写一个修订版。敬请期待!

定义了一个http_conn类

实现了一个基于Linux epoll I/O 多路复用模型的高性能 HTTP 服务器核心模块


http_conn类
封装内容
  1. void init()函数初始化连接
  2. void close_conn()函数关闭连接
  3. void process()主处理函数,由epoll触发后调用
  4. bool read_once()函数一次性读取数据
  5. bool write()函数发送响应数据
  6. HTTP_CODE process_read()函数驱动状态机解析HTTP请求
  7. bool process_write()函数生成HTTP响应
  8. bool add_response()该函数格式化字符串并追加到写缓冲区
  9. bool add_content()函数添加内容到响应体
  10. bool add_status_line()函数添加状态行
  11. bool add_headers()函数添加通用响应头
  12. bool add_content_length()函数单独添加content_length头
  13. bool add_linger()函数添加Connection: keep-aliveclose
  14. bool add_blank_line()函数表示响应头结束
  15. LINE_STATUS parse_line()函数从m_read_buf中查找完整一行
  16. HTTP_CODE parse_request_line()函数解析请求行
  17. HTTP_CODE parse_headers()函数解析单个请求头字段
  18. HTTP_CODE parse_content()函数处理POST请求体
  19. HTTP_CODE do_request()函数决定返回什么内容
  20. void initmysql_result()函数一次性从数据库加载所有用户到全局

事件驱动(Event-Driven)
组成:epoll+非阻塞I/O模型

程序不主动轮询或阻塞等待 I/O,而是注册对某些“事件”的兴趣,当事件发生时,由系统通知程序进行处理

核心组件:
组件作用
epollLinux 高效 I/O 多路复用机制(替代 select/poll)
非阻塞 socket避免 read/write 阻塞线程
事件循环(Event Loop)主线程不断调用 epoll_wait() 等待事件
回调/处理函数事件触发时执行的逻辑(如 http_conn::process()
具体体现:
  • 主线程使用epoll_wait()监听多个socket事件
  • 当某个客户端socket可读或者可写,epoll通知服务器
  • 非阻塞socket+ET/LT模式
状态机(State Machine)

HTTP 请求是分阶段、异步到达的(可能分多个 TCP 包),状态机能增量解析,避免等待完整数据,提升响应速度和内存效率

状态任务
解析请求行找到第一行 "GET ..."
解析请求头逐行读取 Host:, Content-Length:
解析请求体如果是 POST,读取 username=... 这部分内容
将复杂的任务拆分为小步骤
体现位置:HTTP请求解析过程
具体体现:
  • 定义枚举状态CHECK_STATE
enumCHECK_STATE{ CHECK_STATE_REQUESTLINE =0,//解析请求行 CHECK_STATE_HEADER,//解析请求头 CHECK_STATE_CONTENT //解析请求体};
  • process_read()状态转移
http_conn::HTTP_CODE http_conn::process_read(){ LINE_STATUS line_status = LINE_OK; HTTP_CODE ret = NO_REQUEST;char*text =0;while((m_check_state == CHECK_STATE_CONTENT && line_status == LINE_OK)||((line_status =parse_line())== LINE_OK)){ text =get_line();//获取当前行 m_start_line = m_checked_idx;LOG_INFO("%s", text);switch(m_check_state){case CHECK_STATE_REQUESTLINE:{ ret =parse_request_line(text);//可能转移到HEADERif(ret == BAD_REQUEST)return BAD_REQUEST;break;}case CHECK_STATE_HEADER:{ ret =parse_headers(text);//可能转移到CONTENT或完成if(ret == BAD_REQUEST)return BAD_REQUEST;elseif(ret == GET_REQUEST){returndo_request();}break;}case CHECK_STATE_CONTENT:{ ret =parse_content(text);//完成if(ret == GET_REQUEST)returndo_request(); line_status = LINE_OPEN;break;}default:return INTERNAL_ERROR;}}return NO_REQUEST;}
零拷贝(Zero-Copy)
组成:mmap()+writev()发送文件
具体体现
  • 传统发送文件需要数据从磁盘 → 内核 → 用户 → 内核 → 网卡,4次上下文切换,4次数据拷贝
  • 零拷贝实现
// 1. mmap 将文件映射到用户空间(实际是内核页缓存的映射)  m_file_address =(char*)mmap(0, m_file_stat.st_size, PROT_READ, MAP_PRIVATE, m_file_fd,0);// 2. 构造 iovec 数组(响应头 + 文件内容)  m_iv[0].iov_base = m_write_buf;// 响应头(小)  m_iv[0].iov_len = m_write_idx; m_iv[1].iov_base = m_file_address;// 文件内容(大)  m_iv[1].iov_len = m_file_stat.st_size;// 3. 一次系统调用发送全部  ssize_t ret =writev(m_sockfd, m_iv,2);
  • CUP不参与数据的搬运,在用户态与内核态之间无冗余拷贝
  • mmap本身不是零拷贝,需要配合writev/sendfile才能实现高效传输
三者联系:

MySQLStatic Filehttp_connepoll (事件驱动)ClientMySQLStatic Filehttp_connepoll (事件驱动)Clientalt[解析完成且是静态文件][CGI 请求]发送 HTTP 请求(分包)触发 EPOLLIN 事件状态机解析(逐行)mmap 映射触发 EPOLLOUT(若需)writev(mmap地址) → 零拷贝发送查询/插入(非零拷贝路径)write() 发送动态内容


HTTP请求(HTTP Request)

进入网页时,浏览器向服务器发送一个请求

结构:
GET /index.html HTTP/1.1 ← 请求行(方法 + 路径 + 协议版本) Host: example.com ← 请求头(Header) User-Agent: Chrome/120 Connection: keep-alive ← 空行(分隔头和体) username=admin&password=123 ← 请求体(Body,仅 POST/PUT 有) 
  • GET请求通常没有请求体,参数在URL中
  • POST请求由请求体
响应头(Response Header)

服务器在返回内容前,先发送一些元信息(metadata),告诉浏览器“接下来要发什么

实例:
HTTP/1.1 200 OK ← 状态行(协议 + 状态码 + 描述) Content-Type: text/html ← 响应头 Content-Length: 1024 Connection: keep-alive Set-Cookie: sessionid=abc123 ← 空行(头结束) <html>... </html> ← 响应体 
常见头字段及作用:
头字段作用
Content-Type告诉浏览器内容类型(text/html, image/png, application/json
Content-Length响应体有多少字节
Connection是否保持连接(keep-aliveclose
Location用于重定向(302 状态码)
响应体(Response Body)

服务器真正返回给你的内容

实例:
<html> <head><title>Hello</title></head> <body><h1>Welcome!</h1></body> </html> 
mmap映射(Memory Mapping)

一种将文件直接映射到内存的技术。你可以像访问数组一样访问文件内容,而无需调用 read()

  • 传统方式:
char buffer[4096];int fd =open("a.jpg", O_RDONLY);while(read(fd, buffer,4096)>0){send(socket, buffer,...);// 数据:磁盘 → 内核 → 用户 → 内核 → 网卡(多次拷贝) }
  • mmap方式:
int fd =open("a.jpg", O_RDONLY);structstat sb;fstat(fd,&sb);char* data =(char*)mmap(NULL, sb.st_size, PROT_READ, MAP_PRIVATE, fd,0);// 现在 data 就是文件内容! send(socket, data, sb.st_size,...);// 内核直接从页缓存发数据,无需用户缓冲区
优势:
  • 文件不经过用户空间缓冲区
  • CPU不参与数据搬运
  • 适合大文件传输
协作关系:

DBFile服务器(http_conn)浏览器DBFile服务器(http_conn)浏览器alt[请求静态文件(如 /image.jpg)][请求登录(POST /login)]发送 HTTP 请求(请求行+头+体)用状态机逐步解析请求用 mmap 映射文件到内存发送响应头 + mmap 的内容(响应体)查询数据库发送 JSON 响应头 + {"status":"ok"}(响应体)

术语一句话解释
HTTP 请求客户端问服务器:“我要什么?”
响应头服务器说:“我要给你的是 HTML,共 1024 字节,保持连接”
响应体服务器真正给你的内容(网页、图片、数据)
状态机服务器“边收边猜”客户端到底想干嘛(因为数据可能分批到)
mmap 映射服务器快速读大文件的“黑科技”,避免慢速拷贝

函数返回为HTTP_CODE
  • 特殊含义:
enumHTTP_CODE{ NO_REQUEST,// 请求不完整,需要继续读 GET_REQUEST,// GET 请求,可以处理 BAD_REQUEST,// 400 错误:语法错误 NO_RESOURCE,// 404 错误:文件不存在 FORBIDDEN_REQUEST,// 403 错误:无权限 FILE_REQUEST,// 静态文件请求,准备发送 INTERNAL_ERROR,// 500 错误:服务器内部错误 CLOSED_CONNECTION // 连接已关闭};
  • 语义相比于int或者bool,更加清晰
  • 统一错误处理机制
  • 支持更多中错误类型
  • 大量枚举的存在,增加代码容错率,以及更加清晰的状态返回参数

Read more

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.