• 【网络篇】第十四篇——HTTP协议(一)(附带电视剧李浔同款爱心+端口号被恶意占用如何清除)

    目录

    HTTP简介

    基本性质

    URI和URL

    urlencode和urldecode

    HTTP协议格式

    HTTP请求协议格式

    HTTP响应协议格式(爱心代码+端口清理)

    ​

    HTTP简介

    超文本传输协议是一个用于传输超媒体文档的应用层协议。它是为web浏览器与web服务器之间的通信而设计的，但也可以用于其他目的。HTTP遵循经典的客户端-服务端模型，客户端打开一个连接以发出请求，然后等待直到收到服务器端响应。HTTP是无状态协议，这意味着服务器不会在两个请求之间保留任何数据(状态)。尽管通常基于TCP/IP层，但它可以在任何可靠的传输层上使用，也就是说，该协议不会像UDP那样静默的丢掉信息。RUDP-作为UDP的可靠升级版本-是一种合适的替代选择。

    一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本，布局描述，图片，视频，脚本等等。客户端和服务端通过交换各自的消息(与数据流正好相反)进行交互。由像浏览器这样的客户端发出消息叫做request,被服务端响应的消息叫做response。

    HTTP被设计于20世纪90年代初期，是一种可扩展的协议，它是应用层的协议，通过TCP，或者TLS-加密的TCP连接来发送，理论上任何可靠的传输协议都可以使用。因为其有良好的扩展性，时至今日，它不仅被用来传输超文本文档，还用来传输图片，视频或者向服务器发送HTML表单这样的信息。HTTP还可以根据网页需求，仅获取部分Web文档内容更新网页。 

    基本性质

    1.HTTP是简单的:虽然下一代HTTP/2协议将HTTP消息封装到了帧中，HTTP大体上还是被设计得简单易读，HTTP报文能够被人读懂，还允许简单测试，降低了门槛，对新人很友好。

    2.HTTP是扩展的:在HTTP/1.0中出现HTTP headers让协议扩展变得非常容易。只要服务端和客户端就新headers达成语义一致，新功能就可以被轻松加入进来。

    3.HTTP是无状态，有会话的:HTTP 是无状态的：在同一个连接中，两个执行成功的请求之间是没有关系的。这就带来了一个问题，用户没有办法在同一个网站中进行连续的交互，比如在一个电商网站里，用户把某个商品加入到购物车，切换一个页面后再次添加了商品，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。而使用 HTTP 的头部扩展，HTTP Cookies 就可以解决这个问题。把 Cookies 添加到头部中，创建一个会话让每次请求都能共享相同的上下文信息，达成相同的状态。

    注意，HTTP 本质是无状态的，使用 Cookies 可以创建有状态的会话

    4.HTTP和连接:一个连接是由传输层来控制的，这从根本上不属于 HTTP 的范围。HTTP 并不需要其底层的传输层协议是面向连接的，只需要它是可靠的，或不丢失消息的（至少返回错误）。在互联网中，有两个最常用的传输层协议：TCP 是可靠的，而 UDP 不是。因此，HTTP 依赖于面向连接的 TCP 进行消息传递，但连接并不是必须的。在客户端（通常指浏览器）与服务器能够交互（客户端发起请求，服务器返回响应）之前，必须在这两者间建立一个 TCP 链接，打开一个 TCP 连接需要多次往返交换消息（因此耗时）。HTTP/1.0 默认为每一对 HTTP 请求/响应都打开一个单独的 TCP 连接。当需要连续发起多个请求时，这种模式比多个请求共享同一个 TCP 链接更低效。

    为了减轻这些缺陷，HTTP/1.1引入了流水线和持久连接的概念:底层的TCP连接可以通过connection头部来被部分控制。HTTP/2则发展得更远，通过在一个连接复用消息得方式来让这个连接始终保持为暖连接。

    为了更好的适合HTTP，设计一种更好传输协议的进程一直在进行。Google就研发了一种以UDP为基础，能提供更可可靠更高效的传输协议QUIC.

    URI和URL

    URI概念

    URI就是由某个协议方案表示的资源的定位标识符，协议方案指的是访问资源所用的协议类型名称。

    采用HTTP协议时，协议方案就是http,除此之外，还有ftp,mailto,telnet,file等。标准的URI协议有30种左右。

    URI和URL的区别和联系

    URI用字符串表示某一互联网资源，而URL表示资源的地点，即互联网上所处的位置。所以,URL是URI子集。

    URI格式 

    表示指定的URI,要使用涵盖全部必要信息的绝对URI，绝对URL以及相对URL。相对URL,是指从浏览器中基本的URI处指定的URL。

    一个绝对的URI大致由如下几部分构成:

     使用http:或https:等协议方案名获取访问资源时要指定协议类型，不区分字母大小，最后附一个冒号。也可使用data:或javascript:这类指定数据或脚本程序的方案名。

    一，协议方案名 

    http://表示的是协议名称，表示请求时需要使用的协议，通常使用的是HTTP协议或安全协议HTTPS。HTTPS是以安全为目标的HTTP通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。

    常见的应用层协议:

    • DNS（Domain Name System）协议：域名系统。
    • FTP（File Transfer Protocol）协议：文件传输协议。
    • TELNET（Telnet）协议：远程终端协议。
    • HTTP（Hyper Text Transfer Protocol）协议：超文本传输协议。
    • HTTPS（Hyper Text Transfer Protocol over SecureSocket Layer）协议：安全数据传输协议。
    • SMTP（Simple Mail Transfer Protocol）协议：电子邮件传输协议。
    • POP3（Post Office Protocol - Version 3）协议：邮件读取协议。
    • SNMP（Simple Network Management Protocol）协议：简单网络管理协议。‘
    • TFTP（Trivial File Transfer Protocol）协议：简单文件传输协议。

    二.登录信息

     usr:pass表示的是登录认证信息，包括登录用户的用户名和密码。虽然登录认证信息可以在URL中体现出来，但绝大多数URL的这个字段都是被省略的，因为登录信息可以通过其他方案交付给服务器。

    三.服务器地址

    www.example.jp表示的是服务器地址，也叫做域名，比如www.alibaba.com,www.qq.com，www.baidu,com

    需要注意的是，我们用IP地址标识公网内的一台主机，但IP地址本身并不适合给用户看，比如说我们可以通过ping命令，分别获得www.baidu.com和www.qq.com这两个域名解析后的IP地址。

    如果用户看到的是这IP地址，那么用户在访问这个网站之前并不知道这两个网站到底是干什么的，但如果用户看到的是www.baidu.com ，那么用户至少知道这两个网站分别对应的是哪家公司，因此域名具有更好的自描述性。

    四.服务器端口号 

     80表示的是服务器端口号。HTTP协议和套接字编程一样都是位于应用层的，在进行套接字编程时我们需要给服务器绑定对应的IP和端口，而这里的应用层协议也同样需要有明确的端口号。

    当我们使用某种协议时，该协议实际就是在为我们提供服务，现在这些常用的服务与端口号之间的对应关系都是明确的，所以我们在使用某种协议时实际是不需要指明该协议对应的端口号的，因此在URL当中，服务器的端口号一般也是被省略的。

    五.带层次的文件路径

    /dir/index.htm表示的是要访问的资源所在的路径。访问服务器的目的是获取服务器上的某种资源，通过前面的域名和端口已经能够找到对应的服务器进程了，此时要做的就是指明该资源所在的路径。

    比如我们打开浏览器输入百度的域名后，此时浏览器就帮我们获取到了百度的首页。

    当我们发起网页请求时，本质是获得了这样的一张网页信息，然后浏览器对这张网页信息进行解释，最后就呈现出了对应的网页。

     我们可以将这种资源称为网页资源，此外我们还会向服务器请求视频、音频、网页、图片等资源。HTTP之所以叫做超文本传输协议，而不叫做文本传输协议，就是因为有很多资源实际并不是普通的文本资源。

    因此在URL当中就有这样一个字段，用于表示要访问的资源所在的路径。此外我们可以看到，这里的路径分隔符是/，而不是\，这也就证明了实际很多服务都是部署在Linux上的。

    六.查询字符串

     uid=1表示的是请求时提供的额外的参数，这些参数是以键值对的形式，通过&符号分隔开的。

    比如我们在百度上面搜索HTTP，此时可以看到URL中很多参数，而在这众多得参数当中有一个参数q,表示的就是我们搜索时的搜索关键字q=HTTP。

     因此双方在进行网络通信时，是能够通过URL进行用户数据传送的。

    七.片段标识符

    ch1表示的是片段标识符，是对资源的部分补充。

    urlencode和urldecode

    urlencode ()函数原理就是首先把中文字符转换为十六 进制 ，然后在每个字符前面加一个标识符%。 urldecode ()函数与urlencode ()函数原理相反，用于 解码 已编码的 URL 字符串，其原理就是把十六进制字符串转换为中文字符

    如果在搜索关键字当中出现了像/?:这样的字符，由于这些字符已经被URL当作特殊意义理解了，因此URL在呈现时会对这些特殊字符进行转义。

    转义的规则如下:

    • 将需要转码的字符转为十六进制，然后从右到左，取4位（不足4位直接处理），每两位做一位，前面加上%，编码成%XY格式。

    示例

    比如当我们搜索C++时，由于+加号在URL当中也是特殊符号，而+字符转为十六进制后的值就是0x2B，因此一个+就会被编码成一个%2B。

     说明一下： URL当中除了会对这些特殊符号做编码，对中文也会进行编码。

    在线编码工具

     这里分享一个在线编码工具：

    选中其中的URL编码/解码模式，在输入C++后点击编码就能得到编码后的结果。

     再点击解码就能得到原来输入的C++。

     实际当服务器拿到对应的URL后，也需要对编码后的参数进行解码，此时服务器才能拿到你想要传递的参数，解码实际就是编码的逆过程。

    HTTP协议格式

    应用层常见的协议有HTTP和HTTPS，传输层常见的协议有TCP，网络层常见的协议是IP，数据链路层对应就是MAC帧了。其中下三层是由操作系统或者驱动帮我们完成的，它们主要负责的是通信细节。如果应用层不考虑下三层，在应用层自己的心目当中，它就可以认为自己是在和对方的应用层在直接进行数据交互。

    下三层负责的是通信细节，而应用层负责的是如何使用传输过来的数据，两台主机在进行通信的时候，应用层的数据能够成功交给对端应用层，因为网络协议栈的下三层已经负责完成了这样的通信细节，而如何使用传输过来的数据就需要我们去定制协议，这里最典型的就是HTTP协议。

    HTTP是基于请求和响应的应用层服务，作为客户端，你可以向服务器发起request，服务器收到这个request后，会对这个request做数据分析，得出你想要访问什么资源，然后服务器再构建response，完成这一次HTTP的请求。这种基于request&response这样的工作方式，我们称之为cs或bs模式，其中c表示client，s表示server，b表示browser。

    由于HTTP是基于请求和响应的应用层访问，因此我们必须要知道HTTP对应的请求格式和响应格式，这就是学习HTTP的重点。

    HTTP请求协议格式

    HTTP请求协议格式如下:

    HTTP请求由以下四部分组成:

    • 请求行：[请求方法]+[url]+[http版本]
    • 请求报头：请求的属性，这些属性都是以key: value的形式按行陈列的。
    • 空行：遇到空行表示请求报头结束。
    • 请求正文：请求正文允许为空字符串，如果请求正文存在，则在请求报头中会有一个Content-Length属性来标识请求正文的长度。

    其中，前面三部分是一般是HTTP协议自带的，是由HTTP协议自行设置的，而请求正文一般是用户的相关信息或数据，如果用户在请求时没有信息要上传给服务器，此时请求正文就为空字符串。

    • Host ：请求的资源在哪个主机的端口上
    • Connection：该请求支持长连接（heep_alive）
    • Content-Length：正文内容长度
    • Content-Type：数据类型
    • User-Agent：声明用户的操作系统和浏览器版本信息
    • Accent：发起了请求
    • Referer：当前页面是从哪个页面跳转过来的
    • Accept-Encoding：接受的编码
    • Accept-Language：接受的语言类型
    • Cookie：用于在客户端存储少量信息，通常用于实现会话（session）功能

    如何将HTTP请求的报头与有效载荷进行分离？

     当应用层收到一个HTTP请求时，它必须想办法将HTTP的报头与有效载荷进行分离。对于HTTP请求来讲，这里的请求行和请求报头就是HTTP的报头信息，而这里的请求正文实际就是HTTP的有效载荷。

    我们可以根据HTTP请求当中的空行来进行分离，当服务器收到一个HTTP请求后，就可以按行进行读取，如果读取到空行则说明已经将报头读取完毕，实际HTTP请求当中的空行就是用来分离报头和有效载荷的。

    如果将HTTP请求想象成一个大的线性结构，此时每行的内容都是用\n隔开的，因此在读取过程中，如果连续读取到了两个\n，就说明已经将报头读取完毕了，后面剩下的就是有效载荷了。

    获取浏览器的HTTP请求

    在网络协议栈中，应用层的下一层叫做传输层，而HTTP协议底层通常使用的传输层协议是TCP协议，因此我们可以用套接字编写一个TCP服务器，然后启动浏览器访问我们的这个服务器。

    由于我们的服务器是直接用TCP套接字读取浏览器发来的HTTP请求，此时在服务端没有应用层对这个HTTP请求进行过任何解析，因此我们可以直接将浏览器发来的HTTP请求进行打印输出，此时就能看到HTTP请求的基本构成。

    因此下面我们编写一个简单的TCP服务器，这个服务器要做的就是把浏览器发来的HTTP请求进行打印即可。

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10. #include 
    11. using namespace std;
    12.  
    13. int main()
    14. {
    15. 	//创建套接字
    16. 	int listen_sock = socket(AF_INET, SOCK_STREAM, 0);
    17. 	if (listen_sock < 0){
    18. 		cerr << "socket error!" << endl;
    19. 		return 1;
    20. 	}
    21. 	//绑定
    22. 	struct sockaddr_in local;
    23. 	memset(&local, 0, sizeof(local));
    24. 	local.sin_family = AF_INET;
    25. 	local.sin_port = htons(8081);
    26. 	local.sin_addr.s_addr = htonl(INADDR_ANY);
    27. 	if (bind(listen_sock, (struct sockaddr*)&local, sizeof(local)) < 0){
    28. 		cerr << "bind error!" << endl;
    29. 		return 2;
    30. 	}
    31. 	//监听
    32. 	if (listen(listen_sock, 5) < 0){
    33. 		cerr << "listen error!" << endl;
    34. 		return 3;
    35. 	}
    36. 	//启动服务器
    37. 	struct sockaddr peer;
    38. 	memset(&peer, 0, sizeof(peer));
    39. 	socklen_t len = sizeof(peer);
    40. 	for (;;){
    41. 		int sock = accept(listen_sock, (struct sockaddr*)&peer, &len);
    42. 		if (sock < 0){
    43. 			cerr << "accept error!" << endl;
    44. 			continue;
    45. 		}
    46. 		if (fork() == 0){ //爸爸进程
    47. 			close(listen_sock);
    48. 			if (fork() > 0){ //爸爸进程
    49. 				exit(0);
    50. 			}
    51. 			//孙子进程
    52. 			char buffer[1024];
    53. 			recv(sock, buffer, sizeof(buffer), 0); //读取HTTP请求
    54. 			cout << "--------------------------http request begin--------------------------" << endl;
    55. 			cout << buffer << endl;
    56. 			cout << "---------------------------http request end---------------------------" << endl;
    57. 			
    58. 			close(sock);
    59. 			exit(0);
    60. 		}
    61. 		//爷爷进程
    62. 		close(sock);
    63. 		waitpid(-1, nullptr, 0); //等待爸爸进程
    64. 	}
    65. 	return 0;
    66. }

     运行服务器程序后，然后用浏览器进行访问，此时我们的服务器就会收到浏览器发来的HTTP请求，并将收到的HTTP请求进行打印输出。

    说明一下:

    • 浏览器向我们的服务器发起HTTP请求后，因为我们的服务器没有对进行响应，此时浏览器就会认为服务器没有收到，然后再不断发起新的HTTP请求，因此虽然我们只用浏览器访问了一次，但会受到多次HTTP请求。
    • 由于浏览器发起请求时默认用的就是HTTP协议，因此我们在浏览器的url框当中输入网址时可以不用指明HTTP协议。
    • url当中的/不能称之为我们云服务器上根目录，这个/表示的是web根目录，这个web根目录可以是你的机器上的任何一个目录，这个是可以自己指定的，不一定就是Linux的根目录。

    其中请求行当中的url一般是不携带域名以及端口号的，因为在请求报头中的Host字段当中会进行指明，请求行当中的url表示你要访问这个服务器上的哪一路径下的资源。如果浏览器在访问我们的服务器时指明要访问的资源路径，那么此时浏览器发起的HTTP请求当中的url也会跟着变成该路径。

    HTTP响应协议格式(爱心代码+端口清理)

    HTTP响应协议格式如下:

    HTTP响应由以下四部分组成:

    • 状态行:[http版本]+【状态码]+[状态码描述]
    • 响应报头:响应的属性，这些属性都是以key:value的形式按行陈列的。
    • 空行:遇到空行表示响应报头结束
    • 响应正文:响应正文允许为空字符串，如果响应正文存在，则响应报头中会有一个Content-Length属性来标识响应正文的长度。比如服务器返回了一个html页面，那么这个html页面的内容就是在响应正文当中的。

    如何将HTTP响应的报头与有效载荷进行分离?

    对于HTTP响应来讲，这里的状态行和响应报头就是HTTP的报头信息，而这里的响应正文实际就是HTTP的有效载荷。与HTTP请求相同，当应用层收到一个HTTP响应时，也是根据HTTP响应当中的空行来分离报头和有效载荷的。当客户端收到一个HTTP响应后，就可以按行进行读取，如果读取到空行则说明报头已经读取完毕。

    构建HTTP响应给浏览器

    服务器读取到客户端发来的HTTP请求后，需要对这个HTTP请求进行各种数据分析，然后构建成对应的HTTP响应发回给客户端。而我们的服务器连接到客户端后，实际就只读取了客户端发来的HTTP请求就将连接断开了。

    接下来我们可以构建一个HTTP请求给浏览器，鉴于现在还没有办法分析浏览器发来的HTTP请求，这里我们可以给浏览器返回一个固定的HTTP响应。我们就将当前服务程序所在的路径作为我们的web根目录，我们可以在该目录下创建一个html文件，然后编写一个简单的html作为当前服务器的首页。(没有学过前端的朋友可以浅看一下操作就可以)

    1. HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    2. <HTML>
    3.  <HEAD>
    4.   <TITLE> New Document TITLE>
    5.   <META NAME="Generator" CONTENT="EditPlus">
    6.   <META NAME="Author" CONTENT="">
    7.   <META NAME="Keywords" CONTENT="">
    8.   <META NAME="Description" CONTENT="">
    9.   <style>
    10.   html, body {
    11.   height: 100%;
    12.   padding: 0;
    13.   margin: 0;
    14.   background: #000;
    15. }
    16. canvas {
    17.   position: absolute;
    18.   width: 100%;
    19.   height: 100%;
    20. }
    21.   style>
    22.  HEAD>
    23.  
    24.  <BODY>
    25.   <canvas id="pinkboard">canvas>
    26.   <script>
    27.   /*
    28.  * Settings
    29.  */
    30. var settings = {
    31.   particles: {
    32.     length:   500, // maximum amount of particles
    33.     duration:   2, // particle duration in sec
    34.     velocity: 100, // particle velocity in pixels/sec
    35.     effect: -0.75, // play with this for a nice effect
    36.     size:      30, // particle size in pixels
    37.   },
    38. };
    39.  
    40. /*
    41.  * RequestAnimationFrame polyfill by Erik Möller
    42.  */
    43. (function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;alength&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());
    44.  
    45. /*
    46.  * Point class
    47.  */
    48. var Point = (function() {
    49.   function Point(x, y) {
    50.     this.x = (typeof x !== 'undefined') ? x : 0;
    51.     this.y = (typeof y !== 'undefined') ? y : 0;
    52.   }
    53.   Point.prototype.clone = function() {
    54.     return new Point(this.x, this.y);
    55.   };
    56.   Point.prototype.length = function(length) {
    57.     if (typeof length == 'undefined')
    58.       return Math.sqrt(this.x * this.x + this.y * this.y);
    59.     this.normalize();
    60.     this.x *= length;
    61.     this.y *= length;
    62.     return this;
    63.   };
    64.   Point.prototype.normalize = function() {
    65.     var length = this.length();
    66.     this.x /= length;
    67.     this.y /= length;
    68.     return this;
    69.   };
    70.   return Point;
    71. })();
    72.  
    73. /*
    74.  * Particle class
    75.  */
    76. var Particle = (function() {
    77.   function Particle() {
    78.     this.position = new Point();
    79.     this.velocity = new Point();
    80.     this.acceleration = new Point();
    81.     this.age = 0;
    82.   }
    83.  Particle.prototype.initialize = function(x, y, dx, dy) {
    84.     this.position.x = x;
    85.     this.position.y = y;
    86.     this.velocity.x = dx;
    87.     this.velocity.y = dy;
    88.     this.acceleration.x = dx * settings.particles.effect;
    89.     this.acceleration.y = dy * settings.particles.effect;
    90.     this.age = 0;
    91.   };
    92.   Particle.prototype.update = function(deltaTime) {
    93.     this.position.x += this.velocity.x * deltaTime;
    94.     this.position.y += this.velocity.y * deltaTime;
    95.     this.velocity.x += this.acceleration.x * deltaTime;
    96.     this.velocity.y += this.acceleration.y * deltaTime;
    97.     this.age += deltaTime;
    98.   };
    99.   Particle.prototype.draw = function(context, image) {
    100.     function ease(t) {
    101.       return (--t) * t * t + 1;
    102.     }
    103.     var size = image.width * ease(this.age / settings.particles.duration);
    104.     context.globalAlpha = 1 - this.age / settings.particles.duration;
    105.     context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
    106.   };
    107.   return Particle;
    108. })();
    109.  
    110. /*
    111.  * ParticlePool class
    112.  */
    113. var ParticlePool = (function() {
    114.   var particles,
    115.       firstActive = 0,
    116.       firstFree   = 0,
    117.       duration    = settings.particles.duration;
    118.   
    119.   function ParticlePool(length) {
    120.     // create and populate particle pool
    121.     particles = new Array(length);
    122.     for (var i = 0; i < particles.length; i++)
    123.       particles[i] = new Particle();
    124.   }
    125.   ParticlePool.prototype.add = function(x, y, dx, dy) {
    126.     particles[firstFree].initialize(x, y, dx, dy);
    127.     
    128.     // handle circular queue
    129.     firstFree++;
    130.     if (firstFree   == particles.length) firstFree   = 0;
    131.     if (firstActive == firstFree       ) firstActive++;
    132.     if (firstActive == particles.length) firstActive = 0;
    133.   };
    134.   ParticlePool.prototype.update = function(deltaTime) {
    135.     var i;
    136.     
    137.     // update active particles
    138.     if (firstActive < firstFree) {
    139.       for (i = firstActive; i < firstFree; i++)
    140.         particles[i].update(deltaTime);
    141.     }
    142.     if (firstFree < firstActive) {
    143.       for (i = firstActive; i < particles.length; i++)
    144.         particles[i].update(deltaTime);
    145.       for (i = 0; i < firstFree; i++)
    146.         particles[i].update(deltaTime);
    147.     }
    148.     
    149.     // remove inactive particles
    150.     while (particles[firstActive].age >= duration && firstActive != firstFree) {
    151.       firstActive++;
    152.       if (firstActive == particles.length) firstActive = 0;
    153.     }
    154.     
    155.     
    156.   };
    157.   ParticlePool.prototype.draw = function(context, image) {
    158.     // draw active particles
    159.     if (firstActive < firstFree) {
    160.      for (i = firstActive; i < firstFree; i++)
    161.         particles[i].draw(context, image);
    162.     }
    163.     if (firstFree < firstActive) {
    164.       for (i = firstActive; i < particles.length; i++)
    165.         particles[i].draw(context, image);
    166.       for (i = 0; i < firstFree; i++)
    167.         particles[i].draw(context, image);
    168.     }
    169.   };
    170.   return ParticlePool;
    171. })();
    172.  
    173. /*
    174.  * Putting it all together
    175.  */
    176. (function(canvas) {
    177.   var context = canvas.getContext('2d'),
    178.       particles = new ParticlePool(settings.particles.length),
    179.       particleRate = settings.particles.length / settings.particles.duration, // particles/sec
    180.       time;
    181.   
    182.   // get point on heart with -PI <= t <= PI
    183.   function pointOnHeart(t) {
    184.     return new Point(
    185.       160 * Math.pow(Math.sin(t), 3),
    186.       130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
    187.     );
    188.   }
    189.   
    190.   // creating the particle image using a dummy canvas
    191.   var image = (function() {
    192.     var canvas  = document.createElement('canvas'),
    193.         context = canvas.getContext('2d');
    194.     canvas.width  = settings.particles.size;
    195.     canvas.height = settings.particles.size;
    196.     // helper function to create the path
    197.     function to(t) {
    198.       var point = pointOnHeart(t);
    199.       point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
    200.       point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
    201.       return point;
    202.     }
    203.     // create the path
    204.     context.beginPath();
    205.     var t = -Math.PI;
    206.     var point = to(t);
    207.     context.moveTo(point.x, point.y);
    208.     while (t < Math.PI) {
    209.       t += 0.01; // baby steps!
    210.       point = to(t);
    211.       context.lineTo(point.x, point.y);
    212.     }
    213.     context.closePath();
    214.     // create the fill
    215.     context.fillStyle = '#ea80b0';
    216.     context.fill();
    217.     // create the image
    218.     var image = new Image();
    219.     image.src = canvas.toDataURL();
    220.     return image;
    221.   })();
    222.   
    223.   // render that thing!
    224.   function render() {
    225.     // next animation frame
    226.     requestAnimationFrame(render);
    227.     
    228.     // update time
    229.     var newTime   = new Date().getTime() / 1000,
    230.         deltaTime = newTime - (time || newTime);
    231.     time = newTime;
    232.     
    233.     // clear canvas
    234.     context.clearRect(0, 0, canvas.width, canvas.height);
    235.     
    236.     // create new particles
    237.     var amount = particleRate * deltaTime;
    238.     for (var i = 0; i < amount; i++) {
    239.       var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
    240.       var dir = pos.clone().length(settings.particles.velocity);
    241.       particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
    242.     }
    243.     
    244.     // update and draw particles
    245.     particles.update(deltaTime);
    246.     particles.draw(context, image);
    247.   }
    248.   
    249.   // handle (re-)sizing of the canvas
    250.   function onResize() {
    251.     canvas.width  = canvas.clientWidth;
    252.     canvas.height = canvas.clientHeight;
    253.   }
    254.   window.onresize = onResize;
    255.   
    256.   // delay rendering bootstrap
    257.   setTimeout(function() {
    258.     onResize();
    259.     render();
    260.   }, 10);
    261. })(document.getElementById('pinkboard'));
    262.   script>
    263.  BODY>
    264. HTML>	
    265.

    当浏览器向服务器发起HTTP请求时，不管浏览器发来的是什么请求，我们都将这个网页响应给浏览器，此时这个html文件的内容就应该放在响应正文当中，我们只需读取该文件当中的内容，然后将其作为响应正文即可。

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10. #include 
    11. using namespace std;
    12.  
    13. int main()
    14. {
    15. 	//创建套接字
    16. 	int listen_sock = socket(AF_INET, SOCK_STREAM, 0);
    17. 	if (listen_sock < 0){
    18. 		cerr << "socket error!" << endl;
    19. 		return 1;
    20. 	}
    21. 	//绑定
    22. 	struct sockaddr_in local;
    23. 	memset(&local, 0, sizeof(local));
    24. 	local.sin_family = AF_INET;
    25. 	local.sin_port = htons(8081);
    26. 	local.sin_addr.s_addr = htonl(INADDR_ANY);
    27. 	if (bind(listen_sock, (struct sockaddr*)&local, sizeof(local)) < 0){
    28. 		cerr << "bind error!" << endl;
    29. 		return 2;
    30. 	}
    31. 	//监听
    32. 	if (listen(listen_sock, 5) < 0){
    33. 		cerr << "listen error!" << endl;
    34. 		return 3;
    35. 	}
    36. 	//启动服务器
    37. 	struct sockaddr peer;
    38. 	memset(&peer, 0, sizeof(peer));
    39. 	socklen_t len = sizeof(peer);
    40. 	for (;;){
    41. 		int sock = accept(listen_sock, (struct sockaddr*)&peer, &len);
    42. 		if (sock < 0){
    43. 			cerr << "accept error!" << endl;
    44. 			continue;
    45. 		}
    46. 		if (fork() == 0){ //爸爸进程
    47. 			close(listen_sock);
    48. 			if (fork() > 0){ //爸爸进程
    49. 				exit(0);
    50. 			}
    51. 			//孙子进程
    52. 			char buffer[1024];
    53. 			recv(sock, buffer, sizeof(buffer), 0); //读取HTTP请求
    54. 			cout << "--------------------------http request begin--------------------------" << endl;
    55. 			cout << buffer << endl;
    56. 			cout << "---------------------------http request end---------------------------" << endl;
    57. 			
    58. #define PAGE "index.html" //网站首页
    59. 			//读取index.html文件
    60. 			ifstream in(PAGE);
    61. 			if (in.is_open()){
    62. 				in.seekg(0, in.end);
    63. 				int len = in.tellg();
    64. 				in.seekg(0, in.beg);
    65. 				char* file = new char[len];
    66. 				in.read(file, len);
    67. 				in.close();
    68. 				
    69. 				//构建HTTP响应
    70. 				string status_line = "http/1.1 200 OK\n"; //状态行
    71. 				string response_header = "Content-Length: " + to_string(len) + "\n"; //响应报头
    72. 				string blank = "\n"; //空行
    73. 				string response_text = file; //响应正文
    74. 				string response = status_line + response_header + blank + response_text; //响应报文
    75. 				
    76. 				//响应HTTP请求
    77. 				send(sock, response.c_str(), response.size(), 0);
    78.  
    79. 				delete[] file;
    80. 			}
    81. 			close(sock);
    82. 			exit(0);
    83. 		}
    84. 		//爷爷进程
    85. 		close(sock);
    86. 		waitpid(-1, nullptr, 0); //等待爸爸进程
    87. 	}
    88. 	return 0;
    89. }

    因此当浏览器访问我们的服务器时，服务器会将这个index.html文件响应给浏览器，而该html文件被浏览器解释后就会显示出相应的内容。

    此外，我们也可以通过telnet命令来访问我们的服务器，此时也是能够得到这个HTTP响应的。 

    注意:当我把这个程序发给我的佬朋友时，他竟然编了一个多线程疯狂request,导致直接崩了.

    清除方法:

    lsof -i:端口号

    清除占用该端口号的所有进程

    sudo kill -9 $(lsof -i:端口号 -t)

     再次绑定，即可成功。

    朋友写的代码可以给大家看一下:

    但是不要拿着干坏事哦

    说明一下:

    • 实际我们在进行网络请求的时候，如果不指明请求资源的路径，此时默认你想访问的就是目标网站的首页，也就是web根目录下的index.html文件。
    • 由于只是作为示例，我们在构建HTTP响应时，在响应报头当中只添加了一个属性信息Content-Length，表示响应正文的长度，实际HTTP响应报头当中的属性信息还有很多。

    HTTP为什么要交互版本？

    HTTP请求当中的请求行和HTTP响应当中的状态行，当中都包含了http的版本信息。其中HTTP请求是由客户端发的，因此HTTP请求当中表明的是客户端的http版本，而HTTP响应是由服务器发的，因此HTTP响应当中表明的是服务器的http版本。

    客户端和服务器双方在进行通信时会交互双方http版本，主要还是为了兼容性的问题。因为服务器和客户端使用的可能是不同的http版本，为了让不同版本的客户端都能享受到对应的服务，此时就要求通信双方需要进行版本协商。

    客户端在发起HTTP请求时告诉服务器自己所使用的http版本，此时服务器就可以根据客户端使用的http版本，为客户端提供对应的服务，而不至于因为双方使用的http版本不同而导致无法正常通信。因此为了保证良好的兼容性，通信双方需要交互一下各自的版本信息

  • 相关阅读:
    测试行业面临的问题及RunnerGo在工具层面如何解决的
    1159 Structure of a Binary Tree 甲级 xp_xht123
    java后端研发经典面试题总结六
    大模型必备算力：CPU&GPU天梯图（2023年最新版）
    JAVA使用AES实现对称加密
    leetcode 39. 组合总和 回溯法求解（c++版本）
    自动化测试的必备准则
    嵌入式开发：嵌入式基础——软件错误分类
    仿真软件Proteus8.9 SP2 Pro 下载、安装、汉化详细图文教程
    如何用蓝牙实现无线定位（四）--远程定位显示
  • 原文地址：https://blog.csdn.net/m0_58367586/article/details/127858903