最近，看了不少关于网络协议的文章。今天呢，我就把那些文章做个总结，然后加上自己的一些感悟，分享给大家。 我会从这以下几个方向跟大家分享：
- 什么是http协议？
- 什么是https协议？
- 什么是websocket协议？
一、什么是http协议？
1、http协议的定义
http(Hypertext transfer protocol)超文本传输协议，通过浏览器和服务器进行数据交互，进行超文本（文本、图片、视频等）传输的规定。也就是说，http协议规定了超文本传输所要遵守的规则。
2、http发展历史
- HTTP/0.9（1991年）
只有一个命令GET
没有HEADER等描述数据的信息
服务器发送完毕，就关闭TCP连接 - HTTP/1.0（1996年）
增加了很多命令
增加status code和header
多字符集支持、多部分发送、权限、缓存等 - HTTP/1.1（1997年）
持久连接
pipeline
增加host和其他一些命令 - HTTP2（2015年）
所有数据以二进制传输
同一个连接里面发送多个请求不再需要按照顺序来
头信息压缩以及推送等提高效率的功能
3、HTTP协议的特点
1、HTTP协议是无状态的
就是说每次HTTP请求都是独立的，任何两个请求之间没有什么必然的联系。但是在实际应用当中并不是完全这样的，引入了Cookie和Session机制来关联请求。
2、多次HTTP请求
在客户端请求网页时多数情况下并不是一次请求就能成功的，服务端首先是响应HTML页面，然后浏览器收到响应之后发现HTML页面还引用了其他的资源，例如，CSS，JS文件，图片等等，还会自动发送HTTP请求这些需要的资源。现在的HTTP版本支持管道机制，可以同时请求和响应多个请求，大大提高了效率。
3、基于TCP协议
HTTP协议目的是规定客户端和服务端数据传输的格式和数据交互行为，并不负责数据传输的细节。底层是基于TCP实现的。现在使用的版本当中是默认持久连接的，也就是多次HTTP请求使用一个TCP连接。
4、http的请求步骤
那么浏览器从输入URL到浏览器显示页面，发生了什么？
1、输入网址
2、DNS解析域名的IP地址
3、建立tcp连接（三次握手）
4、浏览器向WEB服务器发起Http请求
5、服务器处理请求
6、关闭TCP链接（四次挥手）
7、浏览器解析资源
8、浏览器布局渲染
http究竟又做了哪些工作呢，也就是第四步执行的工作？
浏览器负责发起请求和最后的响应请求，服务器接收请求后，处理请求。我们一步一步来看这个过程，http是如何设定步骤，设置规范的：
1、输入URL。不管是链接还是地址栏的输入，情况都是一样的。http协议已经规定了URL的格式，通过http协议中的域名或IP找到服务器。
2、找到服务器的同时，会有http的请求发送过来，告诉服务器我求你做什么？http协议规定了发送请求的格式，这个格式有三部分组成请求行、请求头、请求体。
请求行包括请求的方式（get、post或其他）、要求响应的文件、http版本。
请求头包括本机信息、浏览器信息等等，当然，也包括URL中？后面的参数，常见的请求头属性如下：
Accept：指定客户端能够接收的内容类型 | Accept: text/plain, text/html
Cache-Control：指定请求和响应遵循的缓存机制 | Cache-Control: no-cache
Cookie：HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器 | Cookie:$Version=1; Skin=new;
Content-Type：请求的与实体对应的MIME信息 | Content-Type: application/x-www-form-urlencoded
Host：指定请求的服务器的域名和端口号
Referer：先前网页的地址，当前请求网页紧随其后,即来路
User-Agent：发起请求的用户的身份标识
请求体包括POST传递数据的相关信息，Get方式传值时，请求体为空。
3、请求信息发送至服务器以后，服务器会获取传递过来的相关信息进行后端程序的处理。一般通过request.querystring获取URL传递过来的指，通过request.form获取POST传递过来的值，当然，也是可以获取到所有的其他请求过来的信息，如浏览器信息、cookie信息、操作系统信息等。获取相关的数据以后，服务器就会根据程序进行处理。
4、处理完成以后，服务器会做出响应，向浏览器输出相关信息。http对响应的格式也做出了规定，响应的信息主要包括，响应码、响应头、响应体。
响应码用来标识服务器响应的结果，如我们常看到的200、404等。大致的分类如下：1开头的表示消息，2开头表示成功，3开头表示重定向，4开头表示失败，5开头表示服务器异常。
响应头记录服务器相关信息如服务器是否启用压缩、服务器为IIS或Ngnix、程序所用服务端语言等等。当然，缓存也是在这里设置的，通过修改响应头可以修改html在本地缓存的情况，如设置浏览器缓存过期的时间。
二、什么是https协议？
1、https协议的由来
Web浏览器和网站服务器之间传递信息时，如果采用HTTP协议（超文本传输协议），内容会以明文方式传送，没有任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。
为了解决HTTP协议的这一缺陷，需要使用另一种协议：HTTPS协议（安全套接字层超文本传输协议），为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
2、HTTPS协议和HTTP协议的区别是什么？
1、https协议需要到CA申请证书，一般免费证书很少，需要交费。
2、http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。3、http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。
4、http的连接很简单，是无状态的 。
5、HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议， 要比http协议安全。
三、什么是websocket协议？
1、websocket 协议的由来
以前，很多网站为了实现推送技术，所用的技术都是轮询。轮询是指在特定的时间间隔(如每一秒)，由浏览器对服务器发起HTTP请求，然后由服务器返回数据给浏览器。由于HTTP协议是惰性的，只有客户端发起请求，服务器才会返回数据。轮询技术实现的前提条件同样是基于这种机制。
于是，WebSocket 协议在2008年诞生，2011年成为国际标准。现在所有浏览器都已经支持了。WebSocket 的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。WebSocket属于服务端推送技术，本质是一种应用层协议，可以实现持久连接的全双工双向通信。
对大部分web开发者来说，上面这段描述有点枯燥，其实只要记住几点：
WebSocket可以在浏览器里使用、支持双向通信、使用很简单、相比HTTP协议更灵活、更高效、可扩展性更好。
下面一张图说明了 HTTP 与 WebSocket 的主要区别：
2、WebSocket 的特点？
1、建立在 TCP 协议之上，服务器端的实现比较容易。
2、与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
3、数据格式比较轻量，性能开销小，通信高效。
4、可以发送文本，也可以发送二进制数据。
5、没有同源限制，客户端可以与任意服务器通信。
6、协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
3、WebSocket 的连接过程
1、简单的客户端与服务器通信的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocket示例</title>
</head>
<body>
<h1>Echo Test</h1>
<input id="sendTxt" type="text" />
<button id="sendBtn">发送</button>
<div id="recv"></div>
<script>
//创建websocket实例
var websocket=new WebSocket('ws://echo.websocket.org'); //‘ws://echo.websocket.org’是websocket测试的服务器，把你的数据原封不动的返回给你
//建立连接后的事件
websocket.onopen=function(){
console.log('websocket open');
document.getElementById('recv').innerHTML='Connected';
}
//关闭连接
websocket.onclose==function(){
console.log('websocket close');
}
//客户端接收到数据触发
websocket.onmessage=function(e){
console.log(e.data);
document.getElementById('recv').innerHTML=e.data;
}
//点击发送按钮触发
document.getElementById('sendBtn').onclick=function(){
var txt=document.getElementById('sendTxt').value;
document.getElementById('recv').innerHTML=txt;
}
</script>
</body>
</html>
直接浏览器打开文件，即可运行。按F12观察一下
协议是ws协议，且状态是101正在连接的状态。