前端，简单的说，就是为数据提供一个操作和展示的界面，这里说的数据就是通过网络存储到数据库的数。目前实现前端的技术Vue、React等可以总结为：数据决定状态，状态决定操作和展示。本系列文章就对前端常用技术进行总结。

计算机网络OSI七层模型

用户通过前端对数据进行操作、数据通过前端展示给用户都需要通过网络进行传输。计算机网络一般使用OSI七层网络模型进行描述：应表会传网数物（应用层、表示层、传输层、网络层、数据链路层、物理层）。网络协议可以理解为双方编码、解码数据的格式。对于前端开发，日常接触到的网络协议，主要有应用层（HTTP、HTTPS）、传输层（TCP、UDP）。

1、物理层实现在两个硬件之间进行通信，构建物理链路传输比特；

2、数据链路层通过差错检测、差错控制和流量控制等方法，将有差错的物理链路变为无差错的、能可靠传输数据帧的逻辑链路来传输帧；

3、网络层通过路由选择算法实现在网络里找到目标主机，定义IP协议，使用IP地址寻址，传输报文；

4、传输层提供端（口）到端（口）的逻辑通信，监控数据传输的质量，保证报文的正确传输，提供了TCP、UDP协议；

5、会话层提供会话服务，支持用户对数据交换的控制和管理；

6、表示层负责数据格式的转换，压缩、编码、解码等；

7、应用层是用户（应用程序）和网络之间的接口，直接向用户提供服务，有HTTP、HTTPS等协议。

IP协议

IP屏蔽物理网络的细节，构建虚拟网络，实现主机到主机的联系，主机以IP地址为标识（IPV4为32位，点分十进制表示，IPV6为128位），IP地址根据网络环境变动（MAC地址与网卡一一对应，不可改变）。

TCP协议

TCP面向连接，全双工通信（通信双方能够同时发送和接受数据，都有发送缓存和接收缓存），有拥塞控制。

三次握手（建立连接）：

• 客户端请求建立连接（SYN=1，seq=x）；
• 服务端确认接受连接（SYN=1，ACK=1，seq=y，ack=x+1）；
• 客户端确认连接（ACK=1，seq=x+1，ack=y+1）

为啥需要三次握手？因为需要确保两端的发送和接收数据功能正常。

四次挥手（断开连接）：

• 客户端请求断开连接（FIN=1，seq=u）；
• 服务端确认断开连接（ACK=1，seq=v，ack=u+1）；
• 服务端无数据发送则请求断开连接（FIN=1，ACK=1，seq=w，ack=u+1）；
• 客户端确认断开连接（ACK=1，seq=u+1，ack=w+1）

为啥需要四次挥手？因为TCP是全双工通信协议，各端在发送数据的同时也在等待接收数据，请求断开连接说明己方没有要发送的数据，但己方还在等待接收数据，所以需要两端都请求断开连接，才可以让对方停止等待接收数据。

UDP协议

UDP面向报文，无需建立连接，比TCP协议更快（应用于DNS、网络音视频通话等），传输不可靠，无拥塞控制。

HTTP协议

HTTP是基于TCP协议的应用层传输协议，是无状态协议，使用80端口。

针对无状态的解决办法：

• cookie：服务器设置，浏览器请求时自动带回；
• session：服务器维护；
• token：服务器根据用户名和密码生成token，浏览器请求是带上token，服务器使用token鉴权；
• JWT：JSON Web Token，三部分组成：header、payload、signature，xxx.yyy.zzz，signature由base64编码的header、base64编码payload和密钥使用签名算法得到。

HTTP请求方法：

• GET：请求一个指定资源的表示形式，应该只被用于获取数据
• HEAD：请求一个与 GET 请求的响应相同的响应，但没有响应体
• POST：用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用
• PUT：用有效载荷请求替换目标资源的所有当前表示
• DELETE：删除指定的资源
• CONNECT：建立一个到由目标资源标识的服务器的隧道
• OPTIONS：用于描述目标资源的通信选项（HTTP请求和响应头）
• TRACE：沿着到目标资源的路径执行一个消息环回测试，请求服务器回送收到的请求信息，主要用于测试或诊断
• PATCH：用于对资源应用部分修改

RESTful API中对资源的操作正好可以对应上HTTP请求方法

HTTP响应状态码：

• 1xx：信息响应
• 2xx：成功响应，常见有200（请求成功）、206（使用Range请求资源的一部分）
• 3xx：重定向响应，常见有304（可以使用缓存的响应）
• 4xx：客户端错误响应，常见有400（请求错误）、403（未授权）、404（资源不存在）
• 5xx：服务端错误响应，常见有500（服务器未知错误）

HTTPS是HTTP协议与SSL协议（Secure Socket Layer）或TLS协议（Transport Layer Security）组合使用，用来解决HTTP协议：明文传输被窃听、伪装通信方攻击、明文传输被篡改的问题，使用443端口。

SSL/TLS是一种密码通信框架，提供两个基本的安全服务：鉴别与保密，运用了密码学中的对称密码、消息认证码、公钥密码、数字签名、伪随机数生成器等。

非对称加密（公钥、私钥）效率慢安全，适合加密信息摘要、一次性密钥等短文本。对称加密（密钥）效率快但不安全，适合加密长文本。所以可以综合两者，使用非对称加密加密对称加密的密钥。

WebSocket协议

WebSocket是基于事件驱动且全双工的长连接通信协议，基于TCP协议，针对开销和延迟做了优化，适合实时通信等应用。

WebSocket特点：

• 握手阶段采用HTTP/HTTPS协议，使用80/443端口，101状态码：切换协议，请求头Connection为Upgrade，请求头Upgrade为websocket
• 握手阶段结束后，客户端和服务端将使用通过HTTP/HTTPS协议构建的TCP信道做为WebSocket的连接信道

小结

网络协议都是向下封装细节、向上暴露接口，规定信息格式来实现各层之间的通信，通过不同的格式实现不同的功能。对于前端开发而言，日常工作中主要会接触到本文所介绍的这几种网络通信协议。