HTTP
1、什么是HTTP
HTTP（HyperText Transger Protocol，超文本传输协议）是一个简单的请求-响应协议，他通常运行在TCP之上（应用层）。
HTTP协议通常承载于TCP协议之上，有时也承载于TLS或SSL协议层之上，这个时候，就成了我们常说的HTTPS
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rY3MuWNZ-1678861479985)(imgs/http&https.png)]
应用层：是体系结构中的最高。直接为用户的应用进程提供服务。在因特网中的应用层协议很多，如支持万维网应用的HTTP协议，支持电子邮件的SMTP协议，支持文件传送的FTP协议等等
运输层：负责向两个主机中进程之间的通信提供服务。由于一个主机可同时运行多个进程，因此运输层有复用和分用的功能。
复用：就是多个应用层进程可同时使用下面运输层的服务。分用：就是把收到的信息分别交付给上面应用层中相应的进程。运输层主要使用以下两种协议：
传输控制协议TCP(Transmission Control Protocol)：面向连接的，数据传输的单位是报文段，能够提供可靠的交付。用户数据包协议UDP(User Datagram Protocol)：无连接的，数据传输的单位是用户数据报，不保证提供可靠的交付，只能提供“尽最大努力交付”。
网络层：传输的单位是数据报，也叫分组。主要任务是为要传输的分组选择一条合适的路径，使发送分组能够准确无误地按照给定的目的地址找到目的主机
数据链路层：传输的单位是帧，传输的单位是帧，主要任务是负责在两个相邻的结点之间的链路上实现无差错的数据帧传输。概括功能为：帧的形成、差错控制、流量控制和传输管理。概括功能为：帧的形成、差错控制、流量控制和传输管理。
物理层：在传递信息的时候我们需要用到一些物理传输媒体，例如电缆、光纤等。物理层的任务就是为上层（即数据链路层）提供一个物理连接。
2、HTTP的作用
HTTP超文本传输协议：
协议：计算机之间交流通信的一种规范
HTTP由一系列规则组成，客户端和服务器需要正确的处理这些规则 传输：可以理解为把一堆东西从A搬到B，或者从B搬到A超文本：HTTP传输的内容就是超文本
文本：在互联网最早期的时候只是见到的字符文本，但现在文本的含义已经可以扩展到图片、视频、压缩包等，在HTTP眼里都算做文本超文本：就是超越了普通文本的文本，它是文字、图片、视频等的混合体，最关键的是有超链接，能从一个超文本跳转到另外一个超文本最常见的超文本：HTML，它本身只是纯文字文件，但是内部用很多标签定义了图片、视频等的链接，在经过浏览器的解析，呈现给我们的就是一个有文字、有画面的网页了
URL（Uniform Resource Locator，统一资源标识符）：
Web有很多资源组成，比如HTML页面、视频、图片，在互联网上每个资源都有一个编号，这个编号就是URL地址。服务器负责定义URL，世界上额任何一个资源的编号都是唯一的，客户端通过URL地址在互联网中找到该资源
3、HTTP工作原理
客户端与服务器建立连接客户端向服务器发送请求服务器接收请求，并根据请求返回响应的文件作为应答客户端与服务器断开连接
客户端与服务器之间的HTTP连接是一种一次性连接，它限制每次连接只处理一个请求，当服务器返回本次请求的应答后变立即关闭连接。下次请求再重新建立连接
HTTP规范定义了9中请求方法，每种请求方法规定了客户端和服务器之间不同的信息交换方式，常用的请求方法是GET和POST。服务器将根据客户端请求完成相应操作，并以应答块形式返回给客户端，最后关闭连接
根据HTTP标准，HTTP请求可以使用多种请求方法
HTTP1.0定义了三种请求方法：GET、POST、HEAD
HTTP1.1新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE、CONNECT
方法描述说明GET用来获取数据的，只是用来查询数据，不对服务器的数据做任何的修改，新增，删除等操作。get请求会把请求的参数附加在URL后面，这样是不安全的，在处理敏感数据时不用，或者参数做加密处理。get请求其实本身HTTP协议并没有限制它的URL大小，但是不同的浏览器对其有不同的大小长度限制POST数据发送到服务器以创建或更新资源，侧重于更新数据，对应update操作post请求的请求参数都是请求body中PUT数据发送到服务器以创建或更新资源，侧重于创建数据，对应insert操作DELETE用来删除指定的资源，它会删除URI给出的目标资源的所有当前内容HEADHEAD方法与GET方法相同，但没有响应体，仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用，而无需传输整个内容。CONNECT用来建立到给定URI标识的服务器的隧道；它通过简单的TCP / IP隧道更改请求连接，通常实使用解码的HTTP代理来进行SSL编码的通信（HTTPS）OPTIONS用来描述了目标资源的通信选项，返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性TRACE用于沿着目标资源的路径执行消息环回测试；它回应收到的请求，以便客户可以看到中间服务器进行了哪些（假设任何）进度或增量。PATCH是对 PUT 方法的补充，用来对已知资源进行局部更新
4、HTTP状态码
当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。
下面是常见的HTTP状态码：
200：请求成功301：资源（网页、图片等）被永久转移到其他URL404：请求你的资源（网页、图片等）不存在500：服务器内部错误
HTTP状态码分类
分类分类描述1**信息，服务器收到请求，需要请求者继续执行操作2**成功，操作被成功接收并处理3**重定向，需要进一步的操作以完成请求4**客户端错误，请求包含语法错误或无法完成请求5**服务器错误，服务器在处理请求的过程中发生了错误
HTTP状态码列表
状态码状态码英文名称中文描述100Continue继续。客户端应继续其请求101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议200OK请求成功。一般用于GET与POST请求201Created已创建。成功请求并创建了新的资源202Accepted已接受。已经接受请求，但未处理完成203Non-Authoritative Information非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本204No Content无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档205Reset Content重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域206Partial Content部分内容。服务器成功处理了部分GET请求300Multiple Choices多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）301Moved Permanently永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替302Found临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI303See Other查看其它地址。与301类似。使用GET和POST请求查看304Not Modified未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源305Use Proxy使用代理。所请求的资源必须通过代理访问306Unused已经被废弃的HTTP状态码307Temporary Redirect临时重定向。与302类似。使用GET请求重定向400Bad Request客户端请求的语法错误，服务器无法理解401Unauthorized请求要求用户的身份认证402Payment Required保留，将来使用403Forbidden服务器理解请求客户端的请求，但是拒绝执行此请求404Not Found服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面405Method Not Allowed客户端请求中的方法被禁止406Not Acceptable服务器无法根据客户端请求的内容特性完成请求407Proxy Authentication Required请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权408Request Time-out服务器等待客户端发送的请求时间过长，超时409Conflict服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突410Gone客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置411Length Required服务器无法处理客户端发送的不带Content-Length的请求信息412Precondition Failed客户端请求信息的先决条件错误413Request Entity Too Large由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息414Request-URI Too Large请求的URI过长（URI通常为网址），服务器无法处理415Unsupported Media Type服务器无法处理请求附带的媒体格式416Requested range not satisfiable客户端请求的范围无效417Expectation Failed服务器无法满足Expect的请求头信息500Internal Server Error服务器内部错误，无法完成请求501Not Implemented服务器不支持请求的功能，无法完成请求502Bad Gateway作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应503Service Unavailable由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中504Gateway Time-out充当网关或代理的服务器，未及时从远端服务器获取请求505HTTP Version not supported服务器不支持请求的HTTP协议的版本，无法完成处理
5、HTTP content-type
Content-Type（内容类型），一般是指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件。
Content-Type标头告诉客户端实际返回的内容的类型
语法格式：
Content-Type: text/html;charset=utf-8
Content-Type: multipart/form-data:boundary=something
常见的媒体格式类型如下：
text/html ： HTML格式text/plain ：纯文本格式text/xml ： XML格式image/gif ：gif图片格式image/jpeg ：jpg图片格式image/png：png图片格式
以application开头的媒体格式类型
application/xhtml+xml ：XHTML格式application/xml： XML数据格式application/atom+xml ：Atom XML聚合格式application/json： JSON数据格式application/pdf：pdf格式application/msword ： Word文档格式application/octet-stream ： 二进制流数据application/x-www-form-urlencoded ：form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
另外一种常见的媒体格式是上传文件时使用的：
multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式
请求默认的媒体格式为：
application/json： JSON数据格式（请求体中的数据会以JSON字符串的形式发送到后端）
5.1、如果后端需要的媒体格式为application/x-www-form-urlencoded，前端改如何配置
方式一：用URLSearchParams 传递参数
let param = new URLSearchParams()
param.append('name', name)
param.append('age', age)
axios({
url: '',
method: 'post',
data: param
})
注：URLSearchParams 不支持所有的浏览器，但大多数还是OK的
方式二：使用qs
// 引入qs库，这个库是axios包含了的，不需要再下载
import Qs from 'qs'
let data = {
name: '小飞飞',
pws: '123456',
}
axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
methods: 'post',
url: '',
data: Qs.stringify(data)
})
5.2、如果后端需要的媒体格式为multipart/form-data，前端改如何配置
let params = new FormData()
params.append('file', this.file)
params.append('qq', this.qq)
params.append('name', this.name)
axios({
url: '',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
data: params
})
WebSocket
1、背景
思考一下我们经常遇到的一种需求场景，要求在某个网页下，网页的内容可以实时更新。
这种情况下，最大众化的方式就是轮询接口了，即通过定时器，定时请求接口，获取到最新的信息后，将内容更新到页面中，如下：
setInterval(() => { queryAPI().then(() => update()); }, 1000);
但是我们知道，这种定时器的延时并不是很精确，而且加上接口的请求时延，实际时间可能不止代码中所预先设定的时间长度，所以这种实时更新是伪实时更新。
除此之外，还有一点可能会经常遇到，即，我们更新信息并总是要更新整个页面上所有可以看到的信息，我们更关注一些经常变化的信息，比如状态，状态的信息可能大小只有几个字节，但是我们轮询接口拿到的信息却是这个页面的所有信息，大小自然不只几个字节，但是除状态以外的信息都可以视作是冗余的。
我们实际只需要一个字段，而且即使后端提供只返回状态的接口，但实际在一个请求中还要计算ip报文头的大小，依旧是很占用带宽的。
轮询这种解决方案目前依旧是非常流行，最新的轮询技术是Comet，这种技术虽然可以实现双向通信，但仍然需要反复发出请求。而且在Comet中普遍采用的HTTP长连接也会消耗服务器资源
2、WebSocket的原理
websocket约定了一个通信的规范websocket是一种全新的协议，不属于http无状态协议，协议名为"ws和wss"
3、WebSocket与HTTP的关系
相同点：
都是基于tcp的，都是可靠性传入协议都是应用层协议
不同点：
WebSocket是双向通信协议，可以双向发送或接受信息HTTP是单向的WebSocket是需要浏览器和服务器握手进行建立连接的而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接
4、WebSocket解决的问题
4.1、http存在的问题
http是一种无状态协议，每当一次会话完成后，服务端都不知道下一次的客户端是谁，需要每次知道对方是谁，才进行相应的响应，因此本身对于实时通讯就是一种极大的障碍http协议采用一次请求，一次响应，每次请求和响应就携带有大量的header头，对于实时通讯来说，解析请求头也是需要一定的时间，因此，效率也更低下最重要的是，需要客户端主动发，服务端被动发，也就是一次请求，一次响应，不能实现主动发送
5、WebSocket的改进
一旦WebSocket连接建立后，在客户端断开WebSocket连接或Server端中断连接前，不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实现了“真·长链接”，实时性优势明显。
6、WebSocket的写法
// 创建WebSocket实例对象
let socket = new WebSocket('服务器地址')
// 连接成功的回调
socket.onopen = () => {
// 连接成功了
}
// 连接发生错误的回调
socket.onerror = () => {
// 连接发生错误
}
// 接收消息的回调
socket.onmessage = (res) => {
// res为从服务器接收到的消息
}
// 关闭连接的回调
socket.onclose = () => {
// 连接已关闭
}
// 发送消息
socket.send('消息内容') // 需要用JSON.stringify转化为字符串
// 关闭连接
socket.close()
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
socket.close()
}
推荐阅读
您阅读本篇文章共花了：
发表评论