前端需要掌握的计算机网络知识WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端和服务器之

前言

终于开始开拓计算机网络这块荒土了，一直以来对互联网的神秘面纱也是揭开了。仔细想想，我们学校开设课程感觉还是很不合理的，或者是我们中国的高校开设课程都不怎么合理，通常是把一部分一部分学到精通的，有时候真让人学的挺无语的。在未知全貌的情况下，学习起来很容易产生困惑，让人抓不着头脑，当你对整个体系有一个全面的认知，学习起来还是很快的。

正文

网络结构

计算机网络中的各个设备

如果把计算机网络比作现实中的交通，以下设备能看作

路由器（Router）：交通信号灯

功能：用于连接不同的网络，并在这些网络之间转发数据包。
用途：实现不同网络之间的通信，提供网络地址转换（NAT），支持动态路由协议（如RIP、OSPF）。
示例：家用路由器、企业级路由器、核心路由器。

交换机（Switch）：交通路口

功能：用于在局域网内的多个设备之间交换数据包，提高网络性能。
用途：实现局域网内设备的高效通信，支持VLAN（虚拟局域网）划分，提供二层和三层交换功能。
示例：二层交换机、三层交换机、千兆交换机。

集线器（Hub）：交叉路口

功能：将多个设备连接在一起，广播所有接收到的数据包到所有端口。
用途：简单的网络连接，适用于小型网络或测试环境。
示例：10/100 Mbps 集线器。

网卡（Network Interface Card, NIC）：车轮

功能：用于将计算机连接到网络，实现数据的发送和接收。
用途：提供物理接口，支持不同的网络协议（如以太网、Wi-Fi）。
示例：以太网网卡、无线网卡。

调制解调器（Modem）：桥梁（用来连接不同的区域）

功能：将数字信号转换为模拟信号，或将模拟信号转换为数字信号，以便通过电话线、光纤等传输介质进行数据传输。
用途：实现广域网连接，如ADSL、光纤宽带。
示例：DSL Modem、光纤调制解调器。

中继器（Repeater）：加油站

功能：放大和再生信号，延长网络传输距离。
用途：用于扩展网络覆盖范围，特别是在长距离传输中。
示例：以太网中继器、无线信号中继器。

网桥（Bridge）：渡口

功能：连接两个或多个网络段，过滤和转发数据帧。
用途：隔离网络流量，减少网络拥塞。
示例：透明网桥、源路由网桥。

防火墙（Firewall）：检查站

功能：保护网络免受未授权访问，监控和控制进出网络的数据流。
用途：网络安全防护，实现访问控制和数据过滤。
示例：硬件防火墙、软件防火墙。

网关（Gateway）：交通枢纽

功能：作为不同网络或协议之间的桥梁，实现不同协议的转换。
用途：连接不同类型的网络，如连接局域网和互联网。
示例：代理服务器、协议网关。

TCP/UDP协议

TCP(Transmission Control Protocol)---提供面向连接的、可靠的数据传输服务，其数据传输的单位是报文段。

工作原理
1. 三次握手：
  - 第一次握手：客户端发送一个带有SYN标志的TCP段到服务器，请求建立连接。
  - 第二次握手：服务器收到SYN后，回复一个带有SYN和ACK标志的TCP段，表示同意建立连接。
  - 第三次握手：客户端收到SYN+ACK后，回复一个带有ACK标志的TCP段，确认连接已建立。
2. 数据传输：
  - 数据分段：数据被分成多个TCP段，每个段包含一个序列号，用于标识数据的位置。
  - 确认应答：接收方收到数据段后，发送一个带有ACK标志的TCP段，确认已收到数据。
  - 重传机制：如果发送方在一定时间内没有收到确认应答，会重传该数据段。
  - 流量控制：通过滑动窗口机制，控制发送方的数据发送速率，防止接收方无法处理过多的数据。
  - 拥塞控制：通过慢启动、拥塞避免、快重传和快恢复等算法，管理网络拥塞。
3. 四次挥手：
  - 第一次挥手：客户端发送一个带有FIN标志的TCP段，请求关闭连接。
  - 第二次挥手：服务器收到FIN后，回复一个带有ACK标志的TCP段，确认收到关闭请求。
  - 第三次挥手：服务器发送一个带有FIN标志的TCP段，请求客户端关闭连接。
  - 第四次挥手：客户端收到FIN后，回复一个带有ACK标志的TCP段，确认连接已关闭。
UDP（User Datagram Protocol)---提供无连接的尽最大努力的数据传输服务，其数据传输的单位是用户数据报。

工作原理
1. 无连接：
  - 发送数据前不需要建立连接，可以直接发送数据。
  - 没有关闭连接的过程，减少了通信开销。
2. 数据传输：
  - 数据分组：数据被分成多个UDP数据报，每个数据报包含一个16位的端口号和16位的长度字段。
  - 无确认应答：接收方不会发送确认应答，发送方也不会重传数据。
  - 无顺序保证：数据报可能按任意顺序到达，也可能丢失。

对比

特性	TCP	UDP
连接类型	面向连接	无连接
可靠性	可靠传输	不可靠传输
数据顺序	保证顺序	不保证顺序
头部开销	较大（20字节）	较小（8字节）
流量控制	有	无
拥塞控制	有	无
应用场景	高可靠性、数据完整性要求高的应用	实时多媒体通信、对实时性要求较高的应用

HTTP的发展过程

HTTP 连接模型

1. 建立连接

客户端发起请求：
- 客户端（通常是浏览器）向服务器发送一个 HTTP 请求。请求包括请求行、请求头和请求体。
- 请求行包含方法（如 GET、POST）、请求的资源路径（URL）和协议版本（如 HTTP/1.1）。
- 请求头包含一些元数据，如接受的内容类型、用户代理信息等。
- 请求体（可选）包含发送给服务器的数据，如表单数据。
三次握手（TCP 层）：
- 在 HTTP 请求之前，客户端和服务器需要通过 TCP 协议建立一个连接。
- 第一次握手：客户端发送一个带有 SYN 标志的 TCP 段到服务器。
- 第二次握手：服务器收到 SYN 后，回复一个带有 SYN 和 ACK 标志的 TCP 段。
- 第三次握手：客户端收到 SYN+ACK 后，回复一个带有 ACK 标志的 TCP 段，确认连接已建立。

2. 传输数据

服务器处理请求：
- 服务器接收到 HTTP 请求后，解析请求行和请求头，根据请求的方法和资源路径处理请求。
- 服务器可能需要查询数据库、执行脚本或读取文件来生成响应。
服务器发送响应：
- 服务器生成一个 HTTP 响应，响应包括状态行、响应头和响应体。
- 状态行包含协议版本、状态码和状态消息（如 200 OK）。
- 响应头包含一些元数据，如内容类型、内容长度等。
- 响应体（可选）包含返回给客户端的数据，如 HTML 文档、图片等。
客户端接收响应：
- 客户端接收到 HTTP 响应后，解析状态行和响应头，根据状态码判断请求是否成功。
- 客户端处理响应体中的数据，如渲染 HTML 页面、显示图片等。

3. 关闭连接

保持连接（HTTP/1.1 默认）：
- 在 HTTP/1.1 中，默认情况下连接是持久的（keep-alive），即客户端和服务器保持连接，可以进行多次请求和响应，直到一方明确关闭连接。
- 客户端可以在同一个连接上发送多个请求，服务器也可以在同一个连接上发送多个响应，从而减少建立和关闭连接的开销。
关闭连接（HTTP/1.0 默认）：
- 在 HTTP/1.0 中，默认情况下连接是非持久的，即每次请求和响应之后，连接会被关闭。
- 客户端和服务器需要为每个请求和响应重新建立和关闭连接，增加了通信开销。

HTTP 1

短连接

短连接（Short-lived Connection）是指在完成一次请求和响应后立即关闭的连接。
这种方式在早期的 HTTP/1.0 中是默认的行为。
短连接的主要特点是每次请求和响应都需要建立和关闭一个新的 TCP 连接，这在某些情况下会带来额外的开销。

长连接
长连接（Long-lived Connection）是指在完成一次请求和响应后保持连接打开，以便后续的请求和响应可以复用同一个连接。
这种方式在 HTTP/1.1 中是默认的行为，通过使用持久连接（Keep-Alive）机制来实现。
长连接可以显著减少建立和关闭连接的开销，提高性能。

HTTP 管线
HTTP 管线（HTTP Pipelining）是一种在 HTTP/1.1 中引入的技术，允许客户端在同一个连接上发送多个请求，而不需要等待每个请求的响应。
这种技术可以进一步提高长连接的性能，减少延迟。

HTTP 队头堵塞
队头堵塞（Head-of-Line Blocking，简称 HOLB）是网络通信中常见的一种现象，尤其是在使用 HTTP 管线（Pipelining）时。
队头堵塞指的是当一个请求或响应在队列中阻塞时，后续的所有请求或响应也会被阻塞，无法及时处理。
这种现象会严重影响性能和用户体验。
就像银行取钱一样吗，如果前一个人一直取不出钱，后一个也没办法取钱。

HTTP 2

帧

帧：HTTP/2 通信的最小单位，所有帧都共享一个 8 字节的首部，包含帧的长度、类型、标志和流标识符。

头部压缩

HTTP/2 使用 HPACK 压缩算法来压缩 HTTP 首部。HPACK 算法通过索引表和哈夫曼编码来减少首部的传输大小。

好处：

减少带宽消耗：通过压缩首部，可以显著减少每次请求和响应的传输数据量，提高传输效率。
提高性能：特别是在移动网络环境中，首部压缩可以显著改善页面加载速度。

服务器推送（Server Push）

服务器可以在客户端请求之前，主动推送额外的资源给客户端。这样客户端在需要这些资源时，可以直接从缓存中获取，而不需要再次请求。

好处：

减少往返时间：通过提前推送资源，可以减少客户端的请求次数，提高页面加载速度。

HTTP/2 通过引入多路复用（Multiplexing）和二进制分帧层（Binary Framing Layer）来解决队头堵塞（Head-of-Line Blocking, HOLB）的问题。这两项技术结合起来，可以显著减少因单个请求或响应被阻塞而导致的性能问题。

HTTP 3

HTTP/3 是 HTTP/2 的进一步演进，主要通过使用 QUIC（Quick UDP Internet Connections）协议来替代传统的 TCP 协议，以解决 TCP 存在的一些性能问题，特别是队头堵塞（HOLB）问题。

QUIC

QUIC 是一种基于 UDP 的传输协议，旨在提供类似 TCP 的可靠性，同时减少延迟和提高性能。QUIC 在应用层实现了许多 TCP 和 TLS 的功能，但通过 UDP 进行传输，从而避免了 TCP 的一些限制。

解决 TCP 队头堵塞

独立流：每个流在 QUIC 中是独立的，即使某个流被阻塞，其他流仍然可以继续传输数据，避免了队头堵塞。
细粒度控制：QUIC 的帧结构允许更细粒度的控制和调度，提高了数据传输的灵活性和效率。

TCP队头堵塞

TCP 队头堵塞是指在 TCP 连接中，如果某个请求或响应被阻塞，后续的所有请求和响应也会被阻塞，无法及时处理。这是由于 TCP 的有序性和可靠性保证，即数据包必须按顺序到达，任何丢失或延迟的数据包都会导致后续数据包的阻塞。

0 RTT连接

0 RTT（Zero Round Trip Time）连接是指在客户端和服务器之间建立连接时，客户端可以立即发送数据，而不需要等待服务器的响应。这显著减少了连接建立的延迟，提高了性能。

WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时、双向的数据交换，而不需要通过 HTTP 轮询或其他复杂的机制。主要是HTTP 协议做不到服务器主动向客户端推送信息，所以有了WebSocket，最主要也应用于聊天室。

Deno.serve({
    port: 80,
    handler: async (request) => {
      // If the request is a websocket upgrade,
      // we need to use the Deno.upgradeWebSocket helper
      if (request.headers.get("upgrade") === "websocket") {
        const { socket, response } = Deno.upgradeWebSocket(request);
  
        socket.onopen = () => {
          console.log("CONNECTED");
        };
        socket.onmessage = (event) => {
          console.log(`RECEIVED: ${event.data}`);
          socket.send("pong");
        };
        socket.onclose = () => console.log("DISCONNECTED");
        socket.onerror = (error) => console.error("ERROR:", error);
  
        return response;
      } else {
        // If the request is a normal HTTP request,
        // we serve the client HTML file.
        const file = await Deno.open("./index.html", { read: true });
        return new Response(file.readable);
      }
    },
  });

<!doctype html>
<h2>WebSocket Test</h2>
<p>Sends a ping every five seconds</p>
<div id="output"></div>
<script>
  const wsUri = "ws://127.0.0.1/";
  const output = document.querySelector("#output");
  const websocket = new WebSocket(wsUri);
  let pingInterval;

  function writeToScreen(message) {
    output.insertAdjacentHTML("afterbegin", `<p>${message}</p>`);
  }

  function sendMessage(message) {
    writeToScreen(`SENT: ${message}`);
    websocket.send(message);
  }

  websocket.onopen = (e) => {
    writeToScreen("CONNECTED");
    sendMessage("ping");
    pingInterval = setInterval(() => {
      sendMessage("ping");
    }, 5000);
  };

  websocket.onclose = (e) => {
    writeToScreen("DISCONNECTED");
    clearInterval(pingInterval);
  };

  websocket.onmessage = (e) => {
    writeToScreen(`RECEIVED: ${e.data}`);
  };

  websocket.onerror = (e) => {
    writeToScreen(`ERROR: ${e.data}`);
  };
</script>

Deno运行deno run --allow-net=0.0.0.0:80 --allow-read=./index.html main.js

就能得到一个每秒接收到一个PING的消息，实现了一个简易的WebSocket的demo。

CDN

CDN似乎与镜像有点相似，但CDN其实比镜像智能。

CDN（Content Delivery Network，内容分发网络）是一种分布式网络服务，旨在通过在全球范围内部署的服务器节点，将内容缓存和分发到离用户最近的边缘节点，从而提高内容的加载速度和可用性。CDN 主要用于加速静态内容（如图片、CSS、JavaScript 文件）和动态内容（如视频流、实时数据）的传输，减少延迟，提高用户体验。

CDN服务器分布

在全国的范围内，需要在各个地方建立CDN，让各个地方访问资源的时候，不至于太远，就像瓦洛兰特游戏里的服务器分布在全国四个部分，让全国访问都不至于太卡。

CDN服务器选择

当你处于两个CDN距离相差不大的时候，需要一个算法去选择最佳的CDN，这就是CDN服务器选择

DNS劫持

DNS（Domain Name System，域名系统）是互联网的一项基础服务，用于将人类可读的域名转换为计算机可识别的IP地址。DNS劫持是指攻击者通过某种手段篡改DNS解析过程，使用户访问的域名指向攻击者控制的IP地址。

CDN服务器内容管理策略

内容管理策略就是这个CDN中包含能使用的这个应用的基本资源，让其他特殊的资源还是发向总部，并不把所有的内容都放入CDN中。

安全（SSL/TLS/基础密码学）

网络安全三大要素

机密性

传输的数据被别人拿到并不能读懂

完整性

传输的数据需要保证完整

身份验证

必须要保证发送人和接收人的身份正确，不让其他人假冒，就像寄发快递一样。

PKI

PKI 是一种用于管理和分发公钥加密技术的框架，旨在确保网络通信的安全性、完整性和身份验证。PKI 通过一系列技术和流程，确保数据的机密性、完整性和不可抵赖性。

链书证

数字证书链是一系列数字证书的集合，从终端实体证书（如用户证书或服务器证书）开始，逐级向上追溯到根证书颁发机构（Root CA）的证书。每个证书链中的证书都由其上级证书颁发机构签发，最终追溯到一个受信任的根证书。

非对称加密和对称加密

对称加密是一种加密技术，其中加密和解密使用相同的密钥。这意味着发送方和接收方必须共享同一个密钥才能进行加密和解密操作。

非对称加密是一种加密技术，其中加密和解密使用不同的密钥。通常，公钥用于加密，私钥用于解密。公钥可以公开，而私钥必须保密。

密码散列函数

码散列函数（Password Hashing Function）是一种将密码转换为固定长度的散列值（Hash Value）的算法。散列函数具有单向性、确定性和抗碰撞性等特性，广泛应用于密码存储、数据完整性校验和数字签名等领域。

前端需要掌握的计算机网络知识

前言

正文