前言

本篇Blog搭建一个“最小化”的环境，在这个环境里仅有 HTTP 协议的两个端点：请求方和应答方，去除一切多余的环节，快速掌握 HTTP 的本质。

环境

实验环境

  • Wireshark
  • Chrome/Firefox
  • Telnet
  • OpenResty

简单介绍

Wireshark是著名的网络抓包工具，能够截获在 TCP/IP 协议栈中传输的所有流量，并按协议类型、地址、端口等任意过滤。

Telnet是一个经典的虚拟终端，基于 TCP 协议远程登录主机，我们可以使用它来模拟浏览器的行为，连接服务器后手动发送 HTTP 请求，把浏览器的干扰也彻底排除，能够从最原始的层面去研究 HTTP 协议。

OpenResty是基于 Nginx，利用了 Nginx 模块化、可扩展的特性，开发了一系列的增强模块，并把它们打包整合，形成了一个**“一站式”的 Web 开发平台**。OpenResty 其中一个关键模块是 ngx_lua，它为 Nginx 引入了脚本语言 Lua。

下载安装

下载release：https://github.com/chronolaw/http_study.git

Telnet：打开 Windows 的设置窗口，搜索“Telnet”，就会找到“启用或关闭 Windows 功能”，在这个窗口里找到“Telnet 客户端”，打上对钩。

OpenResty：http://openresty.org/

解压在http_study下，并修改成openresty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
D:.
├─openresty
│  ├─conf
│  ├─html
│  ├─include
│  │  └─luajit-2.1
│  ├─logs
│  ├─lua
│  │  └─jit
│  ├─lualib
│  │  ├─ngx
│  │  │  └─ssl
│  │  ├─redis
│  │  └─resty
│  │      ├─core
│  │      ├─dns
│  │      ├─limit
│  │      ├─lrucache
│  │      ├─upstream
│  │      └─websocket
│  └─pod
│      ├─array-var-nginx-module-0.06
│      ├─drizzle-nginx-module-0.1.12
│      ├─echo-nginx-module-0.63
│      ├─encrypted-session-nginx-module-0.09
│      ├─form-input-nginx-module-0.12
│      ├─headers-more-nginx-module-0.37
│      ├─iconv-nginx-module-0.14
│      ├─lua-5.1.5
│      ├─lua-cjson-2.1.0.13
│      ├─lua-rds-parser-0.06
│      ├─lua-redis-parser-0.13
│      ├─lua-resty-core-0.1.28
│      ├─lua-resty-dns-0.23
│      ├─lua-resty-limit-traffic-0.09
│      ├─lua-resty-lock-0.09
│      ├─lua-resty-lrucache-0.13
│      ├─lua-resty-memcached-0.17
│      ├─lua-resty-mysql-0.27
│      ├─lua-resty-redis-0.30
│      ├─lua-resty-shell-0.03
│      ├─lua-resty-signal-0.03
│      ├─lua-resty-string-0.15
│      ├─lua-resty-upload-0.11
│      ├─lua-resty-upstream-healthcheck-0.08
│      ├─lua-resty-websocket-0.11
│      ├─lua-tablepool-0.03
│      ├─luajit-2.1
│      ├─luajit-2.1-20231117
│      ├─memc-nginx-module-0.20
│      ├─nginx
│      ├─ngx_coolkit-0.2
│      ├─ngx_devel_kit-0.3.3
│      ├─ngx_lua-0.10.26
│      ├─ngx_lua_upstream-0.07
│      ├─ngx_postgres-1.0
│      ├─ngx_stream_lua-0.0.14
│      ├─opm-0.0.8
│      ├─rds-csv-nginx-module-0.09
│      ├─rds-json-nginx-module-0.16
│      ├─redis-nginx-module-0.3.9
│      ├─redis2-nginx-module-0.15
│      ├─resty-cli-0.30
│      ├─set-misc-nginx-module-0.33
│      ├─srcache-nginx-module-0.33
│      └─xss-nginx-module-0.06
├─python
├─wireshark
└─www
    ├─cache
    ├─conf
    │  ├─http
    │  │  └─servers
    │  ├─ssl
    │  └─ssl_bak
    ├─html
    ├─logs
    ├─lua
    │  └─resty
    ├─mime
    └─temp

修改C:\WINDOWS\system32\drivers\etc\host文件，添加以下内容。

1
2
3
127.0.0.1       www.chrono.com
127.0.0.1       www.metroid.net
127.0.0.1       origin.io

补充：hosts文件的作用

hosts文件是一个用于储存计算机网络中各节点信息的计算机文件；作用是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址。

  • 加快域名解析
  • 构建映射关系
  • 屏蔽网站或广告
  • 调试、测试

在 http_study 的“www”目录下有四个批处理文件，分别是：

  • start：启动 OpenResty 服务器；
  • stop：停止 OpenResty 服务器；
  • reload：重启 OpenResty 服务器；
  • list：列出已经启动的 OpenResty 服务器进程。

实践

使用Wireshark抓包。

抓包结果：

image-20240515104056238

用图示说明

image-20240515104122463

总结：

  1. 浏览器从地址栏的输入中获得服务器的 IP 地址和端口号；
  2. 浏览器用 TCP 的三次握手与服务器建立连接；
  3. 浏览器向服务器发送拼好的报文；
  4. 服务器收到报文后处理请求，同样拼好报文再发给浏览器；
  5. 浏览器解析报文，渲染输出页面。

参考资料：

《自己动手，搭建HTTP实验环境》