• HTTP协议初识·中篇

     

    承接上文：HTTP协议初识·上篇_清风玉骨的博客-CSDN博客

    加上目录，会出现导向不正确的情况，可能是bug，目录一长就容易出错？

    本篇主要讲解了：

            网页分离(网页代码和.c文件分离)

            html链接跳转

            网页添加图片

            确认并返回资源类型

            填写正文长度属性

            添加表单

            临时重定向

    补充知识：

            前后端区别

            浏览器是如何显示页面的

            http各字段属性是什么意思

            提交给指定的路径有什么意义？

            http方法

            http状态码

            HTTP常见Header

            写入cookie信息

    源码

    承接上文

     HTTP协议初识·上篇_清风玉骨的博客-CSDN博客

    第二点在上文中已经完成 

    1：网页分离

    网页分离1.0:404文件一定会存在

    readFile函数1.1:读取文件中的内容

    读取文件中的内容

     

    404html文件

    在vscode有快捷生成网页，！+  Tab键 

    测试1:网页分离与404文件

    成功

     

    404访问

    2：html链接跳转

    2.0添加点击键与返回键

    其实游览器的返回键可以直接使用，效果是一样的

    测试2：返回键与404测试

    返回键

    404(返回时候不存在)

    故意写错

    别人的404网页

    高级一点…… 

    补充1:后端与前端区别做那些部分？

    3：添加图片

    测试3：图片测试

    在wwwroot下创建一个image文件夹，把图片放进去就行了，这里不显示的原因估计是云服务器配置太低，导致图片加载不出来，因为这个.jpg的格式一般都比较大，这边测试用的是大概200kb的图片，果然配置低了点

    补充2：浏览器是如何显示网页的？

            其实很简单，例如访问首页，就是把的全部资源下载下来，再组合显示过来就行了

            即用户看到的网页结果，可能是多个资源组合而成的！所以要获取一张网页效果，浏览器一定会发起多次http请求，这也是为什么会有高并发访问原因

    4：如何正确返回资源类型？

    为了返回正确的文件信息，我们得填写Content-Type来，让它不要一直指向首页，这里直接搜索对照表即可找到相应的对照

    suffixToDesc函数4.1后缀分离函数

    测试4：图片再测试

            不过通常这类的图片音频之类的比较吃资源的文件一般并不会直接放置在服务器里面，而是放置在别的专门放置资源的服务器上，为了进一步测试，我们还可以使用别人的图床中的图片，走别人的服务器

    这一次很幸运的显示出来的，要注意很多网站的图片其实并不能直接使用，视乎做了处理，这里就不深加讨论了

    5：添加正文长度

    认识系统调用stat

    测试5：添加正文长度

    补充2：http各个字段的意思

    6：添加表单

    目前我们写的都是单向的，无法做到交互，因为使用的是，为了做到可以交互我们得引用表单

    补充6.0：表单各部分意思

    测试6：表单测试

    GET方法：数据拼接到url后面

     

    POST方法：数据放到正文部分

    GET与POST方法只有私密性这一点不同

    要想安全，得到https这一点我们后续再详谈

    这里百度一下就是直接使用GET方法的

    补充3：提交给指定的路径有什么意义？

    补充4：使用unordered_map进行修改可以实现功能路由

    这里是伪代码，仅提供思路

    补充5：HTTP的方法

            其实除了GET和POST方法我们常使用，其他的方法我们使用的频率并不高，所以我们这里也就不详谈了，不是重点

    所以GET和POST相比

    如果你只想单纯的从远端获取资源：GET

    如果你想要提参：GET/POST

    无私密性：GET(简单)

    私密性：POST

    补充6：HTTP的状态码

            不过我们需要知道，虽然这些状态码是协议标准，不过解释权还是在写代码的人在操作，并且现在一般也不需要严格遵守，比如5开头的状态码我们平时就很少见，这一点想必大家都会意识到这一点，毕竟有点掉价，所以大部分服务器的错误，基本上都是返回4开头的状态码，因为这些错误要么就是很苛刻，要么就是大家都懂得，而且很重要的一点，根据5状态码的信息，一些非法分子可能就会利用这个错误码来进行攻击服务器，自然而然的这也成为了不成文规定了，基于这一点关于状态码与前端后端程序员对于状态码的认识注定是不一样的。

            不过现在的浏览器很智能了，它一般也不会通过状态码来规定网页显示内容，一般都是通过正文部分来显示的，这一点做得很好了

    补充7：3开头重定向状态码

    301 永久重定向  307 临时重定向 

            重定向可能提出来会有些不了解，其实我们很容易见到这个的，比如当年点击这个网站的时候，就会跳转来一个广告页面，这就是重定向的一种，这种一般是临时重定向，那边是金主就给那边定向导流，这种强制重定向就是用3开头的状态码来实现的

    7：临时重定向

    HTTP常见Header

    Content-Type: 数据类型(text/html等)
    Content-Length: Body的长度
    Host: 客户端告知服务器, 所请求的资源是在哪个主机的哪个端口上;
    User-Agent: 声明用户的操作系统和浏览器版本信息;
    Referer: 当前页面是从哪个页面跳转过

    Location: 搭配3xx状态码使用, 告诉客户端接下来要去哪里访问;
    Cookie: 用于在客户端存储少量信息. 通常用于实现会话(session)的功能;

    我们需要填写好Location这个报头属性

            静态网页 -- 目前我们所写的，因为C++并不适合写网页，动态网页专注与交互，用C++来做比较麻烦，所以我们C++程序员一般也不适用写复杂网页

    修正bug代码 

    之前的图片不显示bug已经修复，是之前的函数用错的原因，现在进行更正

            不过需要注意的是，这样会导致当资源不存在的时候，跳转的404页面将会跳转不成功，这个问题出现在添加的读取内容大小那边，因为当资源不存在的时候读取大小为-1(本程序设计)，导致404页面读取失败，这里就不进行修正了，注意这一点就好了

    源码

    HttpServer.cc

    1. #include "HttpServer.hpp"
    2. #include 
    3.  
    4. using namespace std;
    5. using namespace server;
    6.  
    7. void Usage(std::string proc)
    8. {
    9.     cerr << "Usage:\n\t" << proc << " port\r\n\r\n";
    10. }
    11.  
    12. std::string suffixToDesc(const std::string suffix)
    13. {
    14.     std::string ct = "Content-Type: ";
    15.     if (suffix == ".html")
    16.         ct += "text/html";
    17.     else if (suffix == ".jpg")
    18.         ct += "application/x-jpg";
    19.     ct += "\r\n";
    20.     return ct;
    21. }
    22.  
    23. // 1. 服务器和网页分离，html
    24. // 2. url -> / : web根目录
    25. // 3. 我们要正确给客户端返回资源类型，我们首先要自己知道！所有的资源都有后缀！！！
    26. bool Get(const HttpRequest &req, HttpResponse &resp)
    27. {
    28.     /*
    29.     伪代码
    30.     if(req.path == "test.py") 假如提交到一个python脚本
    31.     {
    32.          首先建立进程间通信, pipe
    33.          fork创建子进程, execl("/bin/puthon", test.py) 这样子进程就执行这个脚本
    34.          父进程, 将req.parm 通过管道写过某些后端语言, C++并不适合写这个, 一般是指, python, java, php等
    35.          这也是为什么服务器是C++写的，但是它的后端却是其他语言的原因
    36.     }
    37.     if(req.path == "/search")
    38.     {
    39.          req.parm
    40.          使用我们自己写到C++方法,提供服务
    41.     }
    42.     */
    43.  
    44.     // for test
    45.     cout << "----------------------- http start ------------------------------------" << endl;
    46.     cout << req.inbuffer << endl; // 暂时不做其他处理，直接打印出来看请求内容
    47.     std::cout << "method: " << req.method << std::endl;
    48.     std::cout << "url: " << req.url << std::endl;
    49.     std::cout << "httpversion: " << req.httpversion << std::endl;
    50.     std::cout << "path: " << req.path << std::endl;
    51.     std::cout << "suffix: " << req.suffix << std::endl;
    52.     std::cout << "size: " << req.size << "字节" << std::endl;
    53.     cout << "------------------------ http end -------------------------------------" << endl;
    54.  
    55.     // std::string respheader = "Content-Type: text/html\r\n"; 不用这个了，固定死的
    56.     std::string respline = "HTTP/1.1 200 OK\r\n";  // 其实这里的状态码也应该修改，不过这边就不做字符串拼接的过程了，就这样显示
    57.     // std::string respline = "HTTP/1.1 307 Temporary Redirect\r\n";
    58.     std::string respheader = suffixToDesc(req.suffix);
    59.  
    60.     // 往后每次http请求，都会自动携带曾经设置的所有cookie，帮服务器进行鉴权行为
    61.     respheader += "Set-Cookie: name=1234567abcdefg; Max-Age=120\r\n"; // 有时间限制的120秒，时间到自动失效
    62.  
    63.  
    64.     // respheader += "Location: https://www.bilibili.com/\r\n";
    65.     std::string respblank = "\r\n"; // 空行
    66.     // 网页 -- 自己写一个简单的, 不要在C++中写html，这里是测试，很不方便
    67.     std::string body; // 从文件中来
    68.     body.resize(req.size+1);
    69.     if (!Util::readFile(req.path, (char*)body.c_str(), req.size))
    70.     {
    71.         Util::readFile(html_404, (char*)body.c_str(), req.size); //  这个操作一定能成功
    72.     }
    73.  
    74.     /*
    75.     测试 -- 这个代码会导致本地图片显示不出来，因为视频图片都是二进制的东西不能按行读取！要用read
    76.     if (!Util::readFile(req.path, &body))
    77.     {
    78.         Util::readFile(html_404, &body); //  这个操作一定能成功
    79.     }
    80.     */
    81.  
    82.     /*
    83.     这里没用了，修正还是有错误，错误转移了
    84.     if (req.size > 0)
    85.     {
    86.          respheader += "Content-Length: ";  添加正文的长度
    87.          respheader += std::to_string(req.size);
    88.          respheader += "\r\n";
    89.     }
    90.     */
    91.  
    92.     // 直接拼接就可以了，本身很简单
    93.     respheader += "Content-Length: ";
    94.     respheader += std::to_string(body.size());
    95.     respheader += "\r\n";
    96.     resp.outbuffer += respline;
    97.     resp.outbuffer += respheader;
    98.     resp.outbuffer += respblank;
    99.  
    100.     cout << "----------------------- http response start ------------------------------------" << endl;
    101.     std::cout << resp.outbuffer << std::endl;
    102.     cout << "----------------------- http response end ------------------------------------" << endl;
    103.  
    104.     resp.outbuffer += body;
    105.  
    106.     return true;
    107. }
    108.  
    109. // ./httpServer 8080    -- 这里实际是80端口号，不过这里是为了测试就不用了，并且80也绑定不了，前一千多号基本内部资源无法绑定
    110. int main(int argc, char *argv[])
    111. {
    112.     if (argc != 2)
    113.     {
    114.         Usage(argv[0]);
    115.         exit(0);
    116.     }
    117.     uint16_t port = atoi(argv[1]);
    118.     unique_ptr httpsvr(new HttpServer(Get, port));
    119.  
    120.     /*
    121.     伪代码
    122.     httpsvr->registerCb("/", Get); // 这就是 功能路由!
    123.     httpsvr->registerCb("/search", Search);
    124.     httpsvr->registerCb("/test.py", Other);
    125.     */
    126.  
    127.     httpsvr->initServer();
    128.     httpsvr->start();
    129.  
    130.     return 0;
    131. }

    HttpServer.hpp

    1. #pragma once
    2.  
    3. #include 
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10. #include 
    11. #include 
    12. #include 
    13. #include 
    14. #include 
    15. #include 
    16. #include 
    17.  
    18. #include "Protocol.hpp"
    19.  
    20. namespace server
    21. {
    22.     enum
    23.     {
    24.         USAGE_ERR = 1,
    25.         SOCKET_ERR,
    26.         BIND_ERR,
    27.         LISTEN_ERR
    28.  
    29.     };
    30.  
    31.     static const uint16_t gport = 8080;
    32.     static const int gbacklog = 5; // 10、20、50都可以，但是不要太大比如5千，5万
    33.  
    34.     using func_t = std::function<bool(const HttpRequest &, HttpResponse &)>;    // 回调
    35.  
    36.     class HttpServer
    37.     {
    38.     public:
    39.         HttpServer(func_t func, const uint16_t &port = gport) : _func(func), _listensock(-1), _port(port)
    40.         {
    41.         }
    42.         void initServer()
    43.         {
    44.             // 1. 创建socket文件套接字对象 -- 流式套接字
    45.             _listensock = socket(AF_INET, SOCK_STREAM, 0); // 第三个参数默认 0
    46.             if (_listensock < 0)
    47.             {
    48.                 exit(SOCKET_ERR);
    49.             }
    50.  
    51.             // 2.bind绑定自己的网路信息 -- 注意包含头文件
    52.             struct sockaddr_in local;
    53.             memset(&local, 0, sizeof(local));
    54.             local.sin_family = AF_INET;
    55.             local.sin_port = htons(_port);      // 这里有个细节，我们会发现当我们接受数据的时候是不需要主机转网路序列的，因为关于IO类的接口，内部都帮我们实现了这一功能，这里不帮我们做是因为我们传入的是一个结构体，系统做不到
    56.             local.sin_addr.s_addr = INADDR_ANY; // 接受任意ip地址
    57.             if (bind(_listensock, (struct sockaddr *)&local, sizeof(local)) < 0)
    58.             {
    59.                 exit(BIND_ERR);
    60.             }
    61.  
    62.             // 3. 设置socket 为监听状态 -- TCP与UDP不同，它先要建立链接之后，TCP是面向链接的，后面还会有“握手”过程
    63.             if (listen(_listensock, gbacklog) < 0) // 第二个参数backlog后面再填这个坑
    64.             {
    65.                 exit(LISTEN_ERR);
    66.             }
    67.         }
    68.  
    69.         /*
    70.         伪代码
    71.         void registerCb(std::string servicename, func_t cb) // 写一个注册方法
    72.         {
    73.             funcs.insert(std::make_pair(servicename, cb));
    74.         }
    75.         */
    76.  
    77.         void HandlerHttp(int sock)
    78.         {
    79.             // 1. 读到完整的http请求
    80.             // 2. 反序列化
    81.             // 3. 反序列化后得到httprequest, 回调填写httpresponse, 利用_func(req, resp)
    82.             // 4. 序列化resp
    83.             // 5. send
    84.             char buffer[4096];
    85.             HttpRequest req;
    86.             HttpResponse resp;
    87.             size_t n = recv(sock, buffer, sizeof(buffer) - 1, 0);   // 大概率我们直接能读取到完整的http请求
    88.             if(n > 0)
    89.             {
    90.                 buffer[n] = 0;
    91.                 req.inbuffer = buffer;
    92.                 req.parse();
    93.                 // funcs[req.path](req, resp); 有了哈希表就不需要下面这一句了, 使用路径绑定服务, 这里并没有实现
    94.                 _func(req, resp);  // 可以根据bool返回值进行判断，这里就不判断了
    95.                 send(sock, resp.outbuffer.c_str(), resp.outbuffer.size(), 0);
    96.             }
    97.         }
    98.  
    99.         void start()
    100.         {
    101.             for (;;) // 一个死循环
    102.             {
    103.                 // 4. server 获取新链接
    104.                 // sock 和 client 进行通信的fd
    105.                 struct sockaddr_in peer;
    106.                 socklen_t len = sizeof(peer);
    107.                 int sock = accept(_listensock, (struct sockaddr *)&peer, &len);
    108.                 if (sock < 0)
    109.                 {
    110.                     continue;
    111.                 }
    112.  
    113.                 /* 这里直接使用多进程版的代码进行修改
    114.                  version 2 多进程版(2) -- 注意子进程会继承父进程的一些东西,父进程的文件操作符就会被子进程继承，
    115.                  即父进程的文件操作符那个数字会被继承下来，指向同一个文件，但是文件本身不会被拷贝一份
    116.                  也就是说子进程可以看到父进程创建的文件描述符sock和打开的listensock     */
    117.                 pid_t id = fork();
    118.                 if (id == 0) // 当id为 0 的时候就代表这里是子进程
    119.                 {
    120.                     /* 关闭不需要的文件描述符 listensock -- 子进程不需要监听，所以我们要关闭这个不需要的文件描述符
    121.                        即使这里不关，有没有很大的关系，但是为了防止误操作我们还是关掉为好   */
    122.                     close(_listensock);
    123.                     if (fork() > 0) exit(0); // 解决方法1: 利用孤儿进程特性
    124.                     HandlerHttp(sock);
    125.                     close(sock);
    126.                     exit(0);
    127.                 }
    128.                 /* 一定要关掉，否则就会造成文件描述符泄漏，但是这里的关掉要注意了，这里只是把文件描述符的计数-1
    129.                  子进程已经继承过去了，所以这里也可以看做，父进程立马把文件描述符计数-1，只有当子进程关闭的时候，这个文件描述符真正的被关闭了
    130.                  所以后面申请的链接使用的还是这个4号文件描述符，因为计算机太快了
    131.                  close(sock);   */
    132.  
    133.                 /* father
    134.                   那么父进程干嘛呢？ 直接等待吗？ -- 显然不能，这样又会回归串行运行了，因为等待的时候会阻塞式等待
    135.                   且这里并不能用非阻塞式等待，因为万一有一百个链接来了，就有一百个进程运行，如果这里非阻塞式等待
    136.                   一但后面没有链接到来的话.那么accept这里就等不到了，这些进程就不会回收了 */
    137.  
    138.                 // 不需要等待了 version 2
    139.                 waitpid(id, nullptr, 0);
    140.             }
    141.         }
    142.  
    143.         ~HttpServer() {}
    144.  
    145.     private:
    146.         int _listensock;
    147.         uint16_t _port;
    148.         func_t _func;
    149.         // std::unordered_map funcs;   构建一个哈希表用来实现功能路由
    150.     };
    151.  
    152. } // namespace server

    makefile

    1. cc=g++
    2. httpserver:HttpServer.cc
    3. 	$(cc) -o $@ $^ -std=c++11
    4.  
    5. .PHONY:clean
    6. clean:
    7. 	rm -f httpserver

    Protocol.hpp

    1. #pragma once
    2.  
    3. #include 
    4. #include 
    5. #include 
    6. #include  // 可以直接以空格作为分隔符来进行分割
    7. #include 
    8. #include 
    9. #include 
    10.  
    11. #include "Util.hpp"
    12.  
    13. const std::string sep = "\r\n";                  // 分隔符
    14. const std::string default_root = "./wwwroot";    // web起始目录,前面的 ./ 加不加都可以
    15. const std::string home_page = "index.html";      // 默认首页，任何服务器都会有这个默认首页
    16. const std::string html_404 = "wwwroot/404.html"; // 这个文件一定会存在
    17.  
    18. class HttpRequest
    19. {
    20. public:
    21.     HttpRequest() {}
    22.     ~HttpRequest() {}
    23.     void parse() // 解析
    24.     {
    25.         // 1. 从inbuffer中拿到第一行,分隔符\r\n
    26.         std::string line = Util::getOneline(inbuffer, sep);
    27.         if (line.empty())
    28.             return;
    29.         // 2. 从请求行中提取三个字段 -- 下面放开的三个
    30.         std::cout << "line: " << line << std::endl; // 打印出来显示一下
    31.         std::stringstream ss(line);                 // 可以直接以空格作为分隔符来进行分割
    32.         ss >> method >> url >> httpversion;
    33.  
    34.         /*
    35.         2.1 /search?name=zhangsan&pwd=123456
    36.         我们首先通过 ? 将左右进行分离
    37.         如果是POST方法，本来就是分离的!
    38.         左边path, 右边parm
    39.         */
    40.  
    41.         // 3. 添加web默认路径
    42.         path = default_root; // 未来可以进行修改  变成 ./wwwroot
    43.         path += url;         // 到这一步之后就会  变成 ./wwwroot/a/b/c.html
    44.                              // 未来访问路径都会从这个路径下开始访问
    45.                              // 这边会遇到一个问题，当url是一个 / 的时候就不行,拼接的时候会变成 ./wwwroot/ 没有具体目标
    46.         if (path[path.size() - 1] == '/')
    47.             path += home_page; // 加一个判断就行了
    48.  
    49.         // 4. 获取path对应的资源后缀
    50.         // ./wwwroot/index.html
    51.         // ./wwwroot/test/a.html
    52.         // ./wwwroot/image/宇宙.jpg
    53.         auto pos = path.rfind(".");
    54.         if (pos == std::string::npos)
    55.             suffix = ".html";
    56.         else
    57.             suffix = path.substr(pos); // 截取到末尾
    58.  
    59.         // 5. 得到资源的大小
    60.         struct stat st;
    61.         int n = stat(path.c_str(), &st);// 这个系统调用会自动填充字段
    62.         if(n == 0) size = st.st_size;   // 成功返回 0
    63.         else size = -1;
    64.     }
    65.  
    66. public:
    67.     std::string inbuffer;
    68.  
    69.     /*  我们可以细分许多字段，当需要什么就可以添加什么，这里为了简洁就不做这些工作了
    70.     std::string reqline; // 请求行
    71.     std::vector reqheader; // 请求报头
    72.     std::string body;   // 请求正文
    73.     */
    74.  
    75.     std::string method;      // 请求方法
    76.     std::string url;         // 网址
    77.     std::string httpversion; // 请求版本
    78.     std::string path;        // web默认路径
    79.     std::string suffix;      // 文件后缀
    80.     int size;                // 正文的长度,把请求的资源的大小返回
    81.     // std::string parm;        伪代码,用于放置 ? 右边的数据
    82. };
    83.  
    84. class HttpResponse
    85. {
    86. public:
    87.     std::string outbuffer;
    88. };

    Util.hpp

    1. #pragma once
    2.  
    3. #include 
    4. #include 
    5. #include 
    6.  
    7. class Util
    8. {
    9. public:
    10.     // XXXX XXX XXX\r\nYYYYY  -- 格式
    11.     // 第二个参数是分隔符，暴露在外部，让外部传进来
    12.     static std::string getOneline(std::string &buffer, const std::string &sep) // 类内静态方法可以直接使用 -- 为了方便写，就定义成静态的
    13.     {
    14.         auto pos = buffer.find(sep);
    15.         if (pos == std::string::npos)
    16.             return "";                           // 没有找到分隔符
    17.         std::string sub = buffer.substr(0, pos); // [ ) 左闭右开 拿到这一行字段
    18.         // buffer.erase(0, sub.size() + sep.size());   删除这一行
    19.         return sub;
    20.     }
    21.     
    22.     static bool readFile(const std::string resource, char *buffer, int size) // 视频图片都是二进制的东西不能按行读取！
    23.     {               
    24.         std::ifstream in(resource, std::ios::binary);  // 按照二进制的方式读取文件内容
    25.         if (!in.is_open()) return false; // resource not found
    26.         
    27.         in.read(buffer, size);  
    28.         in.close();
    29.         return true;
    30.     }
    31.     
    32.  
    33.     /*
    34.     测试 -- 这个代码会导致本地图片显示不出来，因为视频图片都是二进制的东西不能按行读取！要用read
    35.     static bool readFile(const std::string resource, std::string *out) // 视频图片都是二进制的东西不能按行读取！
    36.     {               
    37.         std::ifstream in(resource, std::ios::binary);  // 按照二进制的方式读取文件内容
    39.         if (!in.is_open()) return false; // resource not found
    40.             
    42.         std::string line;
    43.         while (std::getline(in, line))
    44.         {
    45.             *out += line;
    46.         }
    48.         in.close();
    49.         return true;
    50.     */
    51. };

    其他文件内容自行添加即可，这里为了简便篇幅就不粘贴了

    未完持续更新中……

  • 相关阅读:
    计算机微信小程序毕业设计题目SSM项目班级打卡系统+后台管理系统|前后分离VUE[包运行成功]
    ThingsBoard教程（二八）：详细讲解在tb平台下 mqtt协议下的 rpc 遥测，客户端rpc，服务的rpc的使用 ，与node-red联动
    Golang实现JAVA虚拟机-指令集和解释器
    04 【Sass语法介绍-运算】
    从根源剖析qsort函数及冒泡算法详解（qsort函数简介+排序算法举例+排序各类型数据举例及详细解析+冒泡排序算法实现qsort函数）
    Arthas 常用命令
    vue实现自定义指令和指令的周期
    U-Boot初始化及工作流程分析
    1/2.数据库集簇、元组，进程、内存架构
    ubuntu安装debian包的命令dpkg和apt的详解
  • 原文地址：https://blog.csdn.net/weixin_67595436/article/details/132490205