【字节前端训练营01】计算机网络概论(2) | 青训营笔记

百里飞洋
102 阅读6分钟

课程大纲

04 Web 中的网络

HTTP 协议

2023-94 (4)

HTTP 连接模型

  • 队头堵塞（Head of Line Blocking）
  • HTTP 1.1：无法多路复用

HTTP 2：帧

  • HTTP 2 在连接上每个数据包都有自己的身份，可以表示哪个数据包属于哪个请求，进而实现 TCP 连接上的多路复用。

  • 帧带来的额外好处：

    1. 调整响应传输的优先级
    2. 头部压缩
    3. Server Push

HTTP3出现的原因是HTTP2还不够快和解决 HTTP/2 中仍然存在的一些问题和局限性。

HTTP 3：QUIC

  • Quick UDP Internet Connection
  • 现存网络设备对TCP和UDP支持已经僵化
  • UDP不靠谱(包丢了就不管了，业务给多少数据，它就发多少数据)但是QUIC靠谱
  • QU1C可以为除HTP协议以外的应用层协议提供支持

CDN

CDN（Content Delivery Network，内容分发网络）是一种用于优化网络资源访问速度和提高用户体验的技术。CDN 的核心思想是将网站或应用程序的内容（如图片、视频、脚本等）缓存到位于不同地理位置的服务器上，使用户可以从最近的服务器获取所需的内容，从而降低延迟、提高访问速度和可用性。

CDN：DNS劫持

  • 域名解析一般由网站自己处理
  • 要加速的域名则重定向到CDN厂商的域名解析服务处理(通常不是由自己来解析，而是由CDN厂商来做)
  • CDN厂商根据来源确定最近的CDN服务器的IP
  • 用户直接访问最近的CDN服务器

CDN 的主要组成部分

  1. 边缘服务器（Edge Server）：位于各地的服务器，用于缓存和分发内容。当用户请求内容时，CDN 会将请求重定向到最近的边缘服务器，从而加快访问速度。边缘服务器之间会根据一定的策略进行内容同步，确保缓存的内容是最新的。
  2. 负载均衡器（Load Balancer）：用于在多个边缘服务器之间分发用户请求。负载均衡器根据各边缘服务器的负载情况和用户的地理位置，智能地将请求分配到合适的边缘服务器。
  3. 域名解析系统（DNS）：CDN 通常会有自己的 DNS 服务，用于将用户的请求重定向到最近的边缘服务器。当用户访问一个使用 CDN 的网站时，DNS 会根据用户的 IP 地址和边缘服务器的位置信息，返回最近的边缘服务器 IP 地址，从而实现请求的重定向。
  4. 内容管理系统（CMS）：用于管理和维护 CDN 中的内容。内容提供者可以通过 CMS 将内容发布到 CDN，并对内容进行更新、删除等操作。

CDN 的主要优点

  1. 降低延迟：通过将内容缓存到离用户更近的边缘服务器上，CDN 可以显著降低访问延迟，提高用户体验。
  2. 提高可用性：CDN 能够在多个边缘服务器之间分发流量，从而提高系统的冗余性。当某个边缘服务器出现故障时，用户的请求可以被重新定向到其他可用的服务器，确保服务的正常运行。
  3. 减轻源站压力：由于大部分用户请求都被 CDN 的边缘服务器处理，源站服务器的压力得到了缓解，从而降低了源站的成本和维护复杂性。
  4. 节省带宽：CDN 可以通过缓存和压缩技术，有效地减少网络带宽的消耗，降低数据传输成本。
  5. 安全性：CDN 可以提供诸如 DDoS（分布式拒绝服务）攻击保护、Web 应用程序防火墙等安全措施，保护网站免受攻击和恶意访问。
  6. 支持动态内容：除了静态内容外，CDN 还可以缓存和分发动态内容，如动态生成的 HTML 页面、Web API 的响应等。

需要注意的是，CDN 的应用场景和效果并不是完全适用于所有类型的网站和应用程序。特别是对于内容更新频繁的网站或应用程序，使用 CDN 可能会导致更新不及时或者缓存不一致等问题。因此，在使用 CDN 时需要根据具体情况进行评估和权衡。

WebSocket

WebSocket 是一种网络通信协议，可以在客户端和服务器之间实现双向通信。与传统的 HTTP 协议不同，WebSocket 协议在客户端和服务器之间建立持久连接，可以在任何时间点双向通信，而不需要通过 HTTP 请求和响应来进行。WebSocket 协议可以在 Web 应用程序和服务器之间实现实时通信和数据传输，常用于在线游戏、聊天室、实时数据监测等场景。

WebSocket 协议的优点如下：

  1. 实时性：WebSocket 协议可以在客户端和服务器之间实现双向实时通信，可以在任何时间点发送和接收数据，避免了 HTTP 请求和响应的延迟和重复。
  2. 效率：WebSocket 协议可以在客户端和服务器之间建立持久连接，避免了每次请求和响应的开销，提高了数据传输效率。
  3. 跨域支持：WebSocket 协议可以支持跨域通信，可以在不同的域名和端口之间进行数据传输。
  4. 可扩展性：WebSocket 协议可以通过自定义消息格式和协议扩展实现更复杂的应用场景和功能。

WebSocket 协议的实现基于 TCP 协议，使用类似 HTTP 的握手协议建立连接。客户端和服务器之间建立连接后，可以通过 send() 方法发送数据，通过 onmessage() 方法接收数据。客户端和服务器之间的通信是双向的，可以在任何时间点发送和接收数据。当客户端或服务器需要关闭连接时，可以调用 close() 方法关闭连接。

总之，WebSocket 协议是一种实现双向实时通信的网络通信协议，可以在 Web 应用程序和服务器之间实现实时数据传输和通信。WebSocket 协议可以提高数据传输效率和实时性，适用于在线游戏、聊天室、实时数据监测等场景。

WebSocket代码示例

  • 客户端代码

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Example</title>
</head>
<body>
  <h1>WebSocket Example</h1>
  <input type="text" id="message">
  <button id="send">Send</button>
  <ul id="messages"></ul>
​
  <script>
    const messages = document.getElementById('messages');
    const messageInput = document.getElementById('message');
    const sendButton = document.getElementById('send');
    
    // 创建 WebSocket 连接
    const ws = new WebSocket('ws://localhost:3000');
​
    // 连接成功后执行的回调函数
    ws.addEventListener('open', () => {
      console.log('Connected to WebSocket server');
    });
​
    // 接收服务器发送的消息并显示在页面上
    ws.addEventListener('message', (event) => {
      const li = document.createElement('li');
      li.textContent = event.data;
      messages.appendChild(li);
    });
​
    // 发送消息给服务器
    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

  • 服务端代码

    const express = require('express');
const http = require('http');
const WebSocket = require('ws');
​
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
​
wss.on('connection', (ws) => {
  console.log('Client connected');
​
  // 接收客户端发送的消息并广播给所有连接的客户端
  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
​
  // 连接关闭后执行的回调函数
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});
​
server.listen(3000, () => {
  console.log('WebSocket server started on port 3000');
});
avatar
文章
阅读
粉丝