http的概念、作用、工作原理、常用状态码与websocket原理、作用

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给出的目标资源的所有当前内容
HEAD	HEAD方法与GET方法相同，但没有响应体，仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用，而无需传输整个内容。
CONNECT	用来建立到给定URI标识的服务器的隧道；它通过简单的TCP / IP隧道更改请求连接，通常实使用解码的HTTP代理来进行SSL编码的通信（HTTPS）
OPTIONS	用来描述了目标资源的通信选项，返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
TRACE	用于沿着目标资源的路径执行消息环回测试；它回应收到的请求，以便客户可以看到中间服务器进行了哪些（假设任何）进度或增量。
PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新

4、HTTP状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。

下面是常见的HTTP状态码：

• 200：请求成功
• 301：资源（网页、图片等）被永久转移到其他URL
• 404：请求你的资源（网页、图片等）不存在
• 500：服务器内部错误

HTTP状态码分类

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

HTTP状态码列表

状态码	状态码英文名称	中文描述
100	Continue	继续。客户端应继续其请求
101	Switching Protocols	切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。成功请求并创建了新的资源
202	Accepted	已接受。已经接受请求，但未处理完成
203	Non-Authoritative Information	非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204	No Content	无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205	Reset Content	重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206	Partial Content	部分内容。服务器成功处理了部分GET请求
300	Multiple Choices	多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303	See Other	查看其它地址。与301类似。使用GET和POST请求查看
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305	Use Proxy	使用代理。所请求的资源必须通过代理访问
306	Unused	已经被废弃的HTTP状态码
307	Temporary Redirect	临时重定向。与302类似。使用GET请求重定向
400	Bad Request	客户端请求的语法错误，服务器无法理解
401	Unauthorized	请求要求用户的身份认证
402	Payment Required	保留，将来使用
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405	Method Not Allowed	客户端请求中的方法被禁止
406	Not Acceptable	服务器无法根据客户端请求的内容特性完成请求
407	Proxy Authentication Required	请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408	Request Time-out	服务器等待客户端发送的请求时间过长，超时
409	Conflict	服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410	Gone	客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411	Length Required	服务器无法处理客户端发送的不带Content-Length的请求信息
412	Precondition Failed	客户端请求信息的先决条件错误
413	Request Entity Too Large	由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414	Request-URI Too Large	请求的URI过长（URI通常为网址），服务器无法处理
415	Unsupported Media Type	服务器无法处理请求附带的媒体格式
416	Requested range not satisfiable	客户端请求的范围无效
417	Expectation Failed	服务器无法满足Expect的请求头信息
500	Internal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持请求的功能，无法完成请求
502	Bad Gateway	作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503	Service Unavailable	由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504	Gateway Time-out	充当网关或代理的服务器，未及时从远端服务器获取请求
505	HTTP 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()
}