计算机网络概论（三） | 青训营笔记

wee
143 阅读8分钟

目标

  • 建立对计算机网络的整体认知
  • 可以在后续的实际工作中能高效解决网络问题。

1 内容介绍

  • CDN
  • WebSocket

2 CDN

CDN：你无法突破物理极限的

  • 物理极限：现实中的路程距离

    • HTTP3快吗？

      快！

    • 那从美国到中国，HTP3要多久？ 150ms!

    • 和北京到上海比，还快吗？ 好像不够？

CDN：你的钱包够鼓吗？

  • 流量多少钱一个G？
  • 1块
  • 那我在福建给上海的小满发一部100G的小电影大合集得100块钱？
  • 对！
  • 发10次岂不是要1000块钱？
  • 是的！
  • 我都发到北京了，小满就不能跟其他同学内部共享一下吗？

CND：你，够强大吗？

  • 我们有几台服务器？
  • 1台
  • 他能抗多少流量？
  • 100G!
  • 双十一峰值得1000G，扛得住吗？
  • 不一定，可能会G....

CND：最多跳两次

image.png

CDN：DNS劫持

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

image.png

  • CDN（Content Delivery Network，内容分发网络）是一种用于优化网络资源访问速度和提高用户体验的技术。

    • 核心思想：将网站或应用程序的内容（如图片、视频、脚本等）缓存到位于不同地理位置的服务器上，使用户可以从最近的服务器获取所需的内容，从而降低延迟、提高访问速度和可用性。

    • 主要组成部分包括：

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

    • 优点：

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

  • CDN 有两种基本的缓存策略：拉取策略（Pull）和推送策略（Push）。

  • 拉取策略，也叫做就近访问策略，指的是 CDN 节点通过 HTTP 请求直接向源站请求数据，然后缓存到本地节点，当用户请求数据时，就直接从缓存的本地节点中获取数据。

    • 这种策略主要用于数据更新较少的情况，适用于流量较小、访问频率低的站点。

  • 推送策略，也叫做预先访问策略，指的是将源站的数据推送到 CDN 节点，通过 HTTP 请求缓存到 CDN 节点，当用户请求数据时，直接从缓存的本地节点中获取数据。

  • 这种策略适用于数据更新频繁的情况，可以有效地缓解源站的访问压力，提高用户访问速度。推送策略需要源站和 CDN 之间建立预先配置好的链接，源站通过这个链接将数据推送到 CDN 节点。

image.png

  1. 拉取策略

    • 优点：
      1. 可以实时获取最新数据，不需要手动推送数据。
      2. 可以有效地缓解源站的访问压力，节省带宽和资源。
      3. 部署简单，不需要与源站建立链接。
    • 缺点：
      1. 访问速度可能较慢，特别是在访问量较大时。
      2. 需要源站保持开放状态，以便 CDN 节点随时请求数据。

  2. 推送策略

    • 优点：
      1. 访问速度较快，因为数据已经预先推送到了 CDN 节点。
      2. 可以减轻源站的访问压力，提高网站的稳定性和可靠性。
    • 缺点：
      1. 需要手动推送数据到 CDN 节点。
      2. 可能会出现数据不一致问题，需要定期同步数据。
      3. 部署和维护较为复杂，需要建立预先配置好的链接。

3 WebSocket

  • WebSocket 是一种网络通信协议，可以在客户端和服务器之间实现双向通信。

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

  • WebSocket 协议的实现基于 TCP 协议，使用类似 HTTP 的握手协议建立连接。

    • 客户端和服务器之间建立连接后，可以通过 send() 方法发送数据，通过 onmessage() 方法接收数据。
    • 客户端和服务器之间的通信是双向的，可以在任何时间点发送和接收数据。当客户端或服务器需要关闭连接时，可以调用 close() 方法关闭连接。

  • 小结

    • WebSocket 协议是一种实现双向实时通信的网络通信协议，可以在 Web 应用程序和服务器之间实现实时数据传输和通信。WebSocket 协议可以提高数据传输效率和实时性，适用于在线游戏、聊天室、实时数据监测等场景。
    • 有状态的持久连接
    • 服务端可以主动推送消息
    • 用WebSocket发送消息延迟比HTTP低

WebSocket代码示例

image.png

  • 客户端代码
<!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:6000');

    // 连接成功后执行的回调函数
    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>

image.png

  • 服务端代码
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(6000, () => {
  console.log('WebSocket server started on port 6000');
});

3 总结

  • 对于CDN之前不太熟悉，现在可以说了解了
  • 复习了WebSocket的知识，之前也做过一个聊天室项目，算是再次脑内实现了
  • 很开心自己的学习有所产出，以后复习时候也可以拿自己文章来复习

参考

avatar
文章
阅读
粉丝