计算机网络与前端技术:探索其关联性

发表时间: 2024-01-06 13:56

封面

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

计算机网络OSI七层模型

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

OSI七层模型

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

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

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

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

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

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

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

IP协议

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

IP协议格式

TCP协议

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、网络音视频通话等),传输不可靠,无拥塞控制。

UDP报文格式

HTTP协议

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

HTTP协议格式

针对无状态的解决办法:

  • 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协议

WebSocket特点:

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

小结

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