浅入浅出 HTTP 协议 - 她和她的猫

先粘一段来自 MDN 的解释：

1
2
3

HTTP 消息是服务器和客户端之间交换数据的方式。有两种类型的消息︰ 请求（requests）--由客户端发送用来触发一个服务器上的动作；响应（responses）--来自服务器的应答。

HTTP消息由采用 ASCII 编码的多行文本构成。

说白了就是客户端与服务端通信的协议，就像人与人之间进行交流，大家都要用相同的语言（协议）才能进行沟通（通信）。

GET 请求

来看一个简单的 GET 请求协议的数据：

GET /index.html?name=her-cat HTTP/1.1\r\n
Host: 127.0.0.1:8081\r\n
Connection: keep-alive\r\n
Accept: text/html\r\n
\r\n

这里通过多行展示只是为了看起来更清晰，实际上不会有视觉上的换行。

第一行是 请求行（Request Line），由请求方法、请求地址（包含请求参数）、HTTP 协议版本三部分组成，通过空格分隔；服务端只需要解析该行就可以知道客户端通过什么方式取哪里的数据。

第二、三行是 请求头（Request Header），每行以 字段: 值 方式组成，用来携带一些请求信息。比如 Host 就是目标主机的地址和端口号，Connection 就是连接方式。

第四行是一个 CRLF（又称回车换行符：\r\n），用来表示请求头信息到此结束。

在传输过程中协议的数据实际是这样的：

1	GET /index.html?name=her-cat HTTP/1.1\r\nHost: 127.0.0.1:8081\r\nConnection: keep-alive\r\nAccept: text/html\r\n\r\n

可以看到最后有两个连续的 CRLF，第一个是上一行的结束标识，第二个是请求头结束标识。

通过判断数据中是否包含两个连续的 CRLF 来确定 HTTP 请求头是否读取完毕。

下面是 Workerman 的实现：

// source: Workerman/Protocols/Http.php

/**
 * 返回值为 0 有两种情况：
 *   1) 如果断开了连接，表示不再接收数据
 *   2) 如果未断开连接，表示需要继续接收数据
 *
 * 返回值大于 0 表示 HTTP 协议包的大小或请求体的大小
 *
 */
public static function input($recv_buffer, TcpConnection $connection)
{
    // 判断收到的数据中是否包含两个连续的 CRLF
    $crlf_pos = \strpos($recv_buffer, "\r\n\r\n");
    // false 说明不包含，需要继续接收数据
    if (false === $crlf_pos) {
        // 判断请求头数据长度是否超限
        if ($recv_len = \strlen($recv_buffer) >= 16384) {
            // 超限则断开连接并响应 413 状态码
            $connection->close("HTTP/1.1 413 Request Entity Too Large\r\n\r\n");
            return 0;
        }
        return 0;
    }

    // 请求头长度，+4 是将两个 CRLF 的长度算上
    $head_len = $crlf_pos + 4;
    // 请求方式
    $method = \strstr($recv_buffer, ' ', true);

    if ($method === 'GET' || $method === 'OPTIONS' || $method === 'HEAD' || $method === 'DELETE') {
        // 这几种方法不需要接收请求体，直接返回请求头长度
        return $head_len;
    } else if ($method !== 'POST' && $method !== 'PUT') {
        // 非法的请求方式
        $connection->close("HTTP/1.1 400 Bad Request\r\n\r\n", true);
        return 0;
    }

    // 到这里说明本次是 POST 或 PUT 请求，在后面的 POST 请求中讲解。
}

POST 请求

POST 请求其实跟 GET 差不多，只不过请求方法是 POST，多了一个请求体。

POST / HTTP/1.1\r\n
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Content-Length: 28\r\n
Accept: text/html\r\n
Content-Type: application/x-www-form-urlencoded\r\n
\r\n
name=her-cat&password=123456

name=her-cat&password=123456 就是请求体的内容。

Content-Length 字段用来表示请求体的大小，如果请求体为空，那么该值为 0。

在接收 HTTP 协议数据时，可以通过 Content-Length 字段判断请求数据是否接收完毕。

当 Content-Length 等于已接收的字节数时，说明已经读取完毕了。

public static function input($recv_buffer, TcpConnection $connection)
{
    ...上面解析 GET 请求的逻辑...

    // 获取请求头的内容
    $header = \substr($recv_buffer, 0, $crlf_pos);
    // 请求体的长度
    $length = false;

    // 解析请求体的长度
    if ($pos = \strpos($header, "\r\nContent-Length: ")) {
        $length = $head_len + (int)\substr($header, $pos + 18, 10);
    } else if (\preg_match("/\r\ncontent-length: ?(\d+)/i", $header, $match)) {
        $length = $head_len + $match[1];
    }

    if ($length !== false) {
        // 返回请求体的长度
        return $length;
    }

    // 未解析到 Content-Length 字段则断开连接并响应 400 状态码
    $connection->close("HTTP/1.1 400 Bad Request\r\n\r\n", true);
    return 0;
}

Content-Type 字段表示请求体的类型，这个值可以通过 form 表单的 enctype 属性指定，有 application/x-www-form-urlencoded、 multipart/form-data 两种类型，下面分别介绍一下两种类型的区别。

application/x-www-form-urlencoded

当 enctype 为 application/x-www-form-urlencoded 时，在发送到服务端之前，会先将表单的数据转为 名称=值 的格式，再通过 & 符号将它们拼接起来。

如果名称或值有特殊字符，则会先将它们进行 urlencode（又叫百分号编码），编码方法很简单，在该字节 ASCII 码的 16 进制字符前面加 %。

比如 & 字符，ASCII 码是 38，对应 16 进制是 26，那么 urlencode 编码结果是 %26。

用 PHP 实现该过程：

$form_params = [
    '&name' => 'her-cat=',
    'password' => '123456&',
];

$data = [];
foreach ($form_params as $name => $value) {
    $data[] = urlencode($name).'='.urlencode($value);
}

$body = implode('&', $data);

echo $body;

// 输出：%26name=her-cat%3D&password=123456%26

PHP 服务端接收到该数据后，可以使用 parse_str 函数得到表单数据。

注意，application/x-www-form-urlencoded 类型下，请求体末尾没有 CRLF。

multipart/form-data

当 enctype 为 multipart/form-data 时，收到的 HTTP 数据：

POST / HTTP/1.1\r\n
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Content-Length: 243\r\n
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarySyX8l4XxjtjHAusG\r\n
\r\n
------WebKitFormBoundarySyX8l4XxjtjHAusG\r\n
Content-Disposition: form-data; name="name"\r\n
\r\n
her-cat\r\n
------WebKitFormBoundarySyX8l4XxjtjHAusG\r\n
Content-Disposition: form-data; name="file"; filename="code.txt"
Content-Type: text/plain\r\n
\r\n
hello her-cat\r\n
------WebKitFormBoundarySyX8l4XxjtjHAusG--\r\n

相对于上一种类型，multipart/form-data 要复杂一些，因为这种类型不仅仅可以用来提交表单数据，本文的重点“文件上传”也是用的该类型，只不过它们的格式有一点点不同。

可以看到 Content-Type 中除了 multipart/form-data，还多了 boundary=—-WebKitFormBoundarySyX8l4XxjtjHAusG。

boundary 翻译过来就是边界的意思，它表示了数据块在请求体中的边界，后面的值就是分割请求体中数据块的边界值。

在边界值的前面添加 -- 才是在请求体中实际的边界值。

1 2	----WebKitFormBoundarySyX8l4XxjtjHAusG // 请求头中的边界值 ------WebKitFormBoundarySyX8l4XxjtjHAusG // 请求体中的边界值

boundary 的值并非是固定的，可以是 1 到 70 个字符组成的随机字符串，不同的浏览器中 boundary 的生成规则也不一样。

Content-Disposition

Content-Disposition 存储了数据块的内容信息，form-data 表示是表单数据，name 字段表示该数据块的名称，如果有 filename 字段说明该数据块是用来存储文件上传的数据，filename 字段存储的是文件名称。

Content-Type

Content-Type 字段只会在文件上传时才会存在，用于表示数据块的内容类型。比如 text/plain 表示纯文本、image/jpeg 表示 jpg 图片、video/mp4 表示视频。

详见：MIME 类型

紧接着一个空白行（实际上是 CRLF）后面的就是数据块的内容。如果数据块是普通的表单数据，这里就是它的值，如果是文件上传，那么这里就是文件的内容了。

最后，通过在边界值的后面添加 -- 表示请求体结束。

总结

这篇文章其实是 “Workerman 源码分析：基于 HTTP 协议实现文件上传” 的前半部分，写的时候发现大部分都是在讲 HTTP 协议，索性分成了两篇文章。

本文对于 HTTP 协议的描述仅仅是一小部分，如果想要深入的了解，推荐阅读 MDN 的文档。

参考链接：

HTTP | MDN

文章目录